Weblogy » デザイン

オリジナルフォントを作るサービス

Wed, 04 Feb 2009 13:57:00 +0000

まずはこちらの記事。

あなたの書いた文字をTrueTypeフォント化する「YourFonts」

こちらの「YourFonts」はオンラインであなたの書いた文字を、TrueTypeフォントにしてくれるサービス。
あなたの書いた文字をTrueTypeフォント化する「YourFonts」 : ライフハッカー［日本版］, 仕事も生活も上手くこなすライフハック情報満載のブログ・メディア

おおっ！それは楽しそう！オンラインでTrueTypeフォント（マシン上で文字入力に使えるフォント）が作れちゃうなんて！
…と思ったら

ガッカリしないように先に書いておきますね。作れるのはアルファベットと数字と記号です。さらに米lifehackerで掲載された影響でアップロードが混みあっていますのでご注意を。

ということで、はい、ガッカリ。でも、Webデザインにはそれなりに使えるかも知れない。

日本語のフォントを手軽に作るには

さて、では日本語のTrueTypeフォントを作るにはどうすればいいだろうか。まあ実際、小文字を入れても24文字ｘ２で済むアルファベットと違って、日本語はカナだけでも５０ｘ２＋α、漢字も3000字くらいは必要になるので、とてもとてもオンラインでポイっとできるわけはない。

すると有料サービスということになるが、激安ソフトで有名なソースネクストがこんなソフトを出していた。

「まるで手書き PLUS」は、自分の手書き文字をフォントにして配布できるソフトです。互いのフォントを持ち合えば、まるで手書きのようなメールをやり取りすることもできます。
ソースネクスト：まるで手書き® PLUS

このソフトの面白いところは、全部手書きでフォント化することもできるが、「まるで手書きモード」として、200字書いてデータにすると、自体の癖を解析して、既存フォントを元に手書き風の補正を加えたフォントセットを作ってくれるところ。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

font family “Palatino Linotype”の指定

Tue, 03 Feb 2009 13:11:00 +0000

同僚から「Paratino Linotypeを使いたい」と相談を受けて調べてみた。

Palatino

パラティーノ (Palatino) は、ヘルマン・ツァップによってデザインされたラテン文字のセリフ体書体。1950年に発表された。名称は16世紀イタリアの書家ジャンバッティスタ・パラティーノに由来する。

基本的にはオールド・フェイス・スタイルであり、縦横の線の太さがあまり変わらない。しかし、セリフが直線的であり、独特の雰囲気を生み出しており、非常に美しいフォントである。

PostScriptの登場当初からよくプリンタにインストールされていたため、DTPにおいてよく普及し、Mac OSではPalatinoとして、Windows 2000とWindows XPではPalatino LinotypeとしてOSにバンドルされている。
パラティーノ (書体) – Wikipedia

なるほど、勉強になった。しかしこれをWeb向けのCSS指定でどうかけばいいかな…と検索して見つけたのがこちらのサイト。

Font Family: Palatino Linotype

Published in: CSS

Win/Mac/Linux font family for Palatino Linotype
"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
Font Family: Palatino Linotype – CSS – Snipplr

CSSからJavaScriptまで、あらゆるスニペットが収集されているサイト。font-familyで検索するとずらりと何でも出てきます。これは便利そう。

Code Snippets – Snipplr Social Snippet Repository

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

前後に記事があるときだけナビゲーションを出す

Mon, 26 Jan 2009 04:02:51 +0000

WordPressでは、next_post_link()、next_previous_link()という関数で、前後のナビゲーションが出力できるんですが、これをUL-LIでデザインしたところ、記事がないときに空のULが出てしまうことに。


 if(next_post_link('Newer : %link 
')) : ?> endif ; ?>
 if(previous_post_link('Older : %link 
')) : ?> endif ; ?>

Validatorエラーが出て気持ち悪いので、一計を案じました。
前後の記事があるときだけ、と思って

というif文で囲んでみたところ、うまくいきませんでした。next_post_linkは、リンク出力用の関数で、boolean値ではないからです。

もう少し調べてみたところ、前後の記事を判定する関数がありましたので、これを使わせてもらいました。

 if(get_next_post() || get_previous_post()) : ?>
	
	 if(next_post_link('Newer : %link 
')) : ?> endif ; ?>
	 if(previous_post_link('Older : %link 
')) : ?> endif ; ?>
	
 endif; ?>

これで、前後のどちらかに記事があるときのみ出力されるようになりました、と。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

WordPressの新聞プラグイン/テーマ

Sun, 30 Nov 2008 00:25:00 +0000

これは面白い試み、WordPressでWeb新聞を作るプラグイン。
単純に新聞風のCSSテーマにするだけでなく、印刷するときにうまく一枚に収まるようにプリント用CSSを設定してある。
こちらのサンプルを「印刷プレビュー」してみるとよく分かる。
→ サンプル新聞 Type2

新聞作成プラグイン / テーマ for WordPress

WordPressでオリジナル新聞を簡単に作成することができるプラグインとテーマです。
Webだけでなく、A4用紙印刷に最適化されていますので、実際に印刷して新聞として配布することも簡単です。
また、マガジン風デザインなどのテーマを適用することで、幅広いプリントメディアとしてもお使いいただけます。
「WP Newspaper Plugin and Theme」でWebメディアとプリントメディアの融合を、是非、お楽しみください
（WPNP » 新聞作成プラグイン / テーマ for WordPress – WordPress 新聞作成プラグイン/テーマ）

1枚以内に収めるために、字数をうまく調節しながら作成しなければ行けないが、WordPressのプレビュー機能は再現性が高いのでこの点は特に問題はなさそう。
それより気になるのは、5記事固定で設定されているらしいところ。新聞風ならいいが、実際に新聞として印刷するとなると、A4に5記事は一つ一つのスペースが少なすぎて何も書けない。

ともあれ、試みとしても面白いし、学級新聞レベルならうまく機能するだろう。
（…昔はわら半紙にプリントした学級新聞があったものだけど、今の時代はみんなデジタルでやっているのだろうか。）

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

人の作ったWordPressテーマにご用心！

Fri, 31 Oct 2008 01:09:29 +0000

いやー、びっくりした。

自分のRSSがどんな風に出力されているか、試しに確認してみたら、ドイツ語だった。翻訳プラグインが暴走しているのか？と思ったけど、読んでみると自分の投稿とは全く関係ないフィードだった。（第2外国語ドイツ語）

すぐに気付いたんですが、昨日切り替えたデザインの作者が、ヘッダーのRSS部分を自分のサイトのRSSにこっそり差し替えてたんですね。その辺の野良デザインじゃなくて、ちゃんとオフィシャルのWordPress › WordPress Themesから持ってきたんだけど、こういうこともあるんですねぇ。そりゃそこまでチェックできないしな。

フッターに自分の所への著作権リンクがあるくらいは、掲示板スクリプト等でもおなじみだからいいんですけど、まさかRSSを書き換えるとは思わなかった。そんなことしてそれほどメリットがあるとも思えないんですが…。

しかし、RSS程度ならまだいいですが、もっと凶悪なスクリプトを仕込まれていたら、もっと悲惨なことになっていただろう。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

天才高校生サーバー管理者

Mon, 13 Oct 2008 07:06:24 +0000

『ブラッディ・マンディ』というドラマが始まりました。これはマガジンで連載している漫画の実写化で、天才ハッカーの主人公が、警視庁の秘密部隊と協力しながら事件の捜査をする、という漫画的ドラマだそうです。

だいたい、ドラマや映画で「ハッカー」というと、「それはねぇよ」というような妙な描かれ方をされていますが、このドラマは意外と考証、設定がしっかりしているようです。
こちらの記事で、主人公の「ハッキングシーン」が分析されてます。

休み時間の藤丸のクラック

休み時間にクラック用スクリプトを書いてクラックするみたいです。

直後に実際に攻撃スクリプトを実行します。この番組，相当Pythonが好きなようです（笑）藤丸のターミナルには「falcon@ws2 # nasm sc3.asm」と「falcon@ws2 # python -i atk3.py web25.boucka.ru 2323 -f sc3」で既存の脆弱性を狙いリモートアタック。見事にroot権限を取得し攻撃先に侵入しました。多分オーバーフローさせて参照先アドレスを攻撃者の任意のものに書き換えて，書き換えた参照先に攻撃者の任意のスクリプトを置いておけば成功する脆弱性なのかなーっと思います。

ちなみに藤丸は侵入直後の「/var/www」ディレクトリで「ls -al」コマンドを発行しています。表示されるファイルは「.htpasswd」と「index.html」…。.htpasswdを公開ディレクトリに置いてあるし，.htaccessは無いし…よくわからないですね（笑）何の意図でしょうか。

rootなのでシャドーパスワードを走査できますね。「brute_des」でパスワードを探している様子が伺えます。

内部からポートスキャンしたのが監視システムにバレたらしく，藤丸は焦って自分の実行させているコマンドをkillしようとします。ターミナルには

「kill -9 $」や「>>>connkill() Stopping…」のような画面が見えます。 killが成功したようですが，ログの改ざんなどはしっかりやったのでしょうか…汗
（「ブラッディ・マンデイ」を考察する:高校生サーバー管理者の考察日誌 – CNET Japan）

ツッコミが細かい…。
映画『バトル・ロワイヤル』だと、ハッキングするシーンでただ延々と「ll」コマンドを入力しているだけだったりしたもんですが、これはドラマのメイン・モチーフだけあって、ちゃんと分かる人を制作スタッフに入れてやっているのでしょうね。

それにしてもちょっと気になったのは、このCNETの記事のライターである「高校生サーバー管理者」氏は、ドラマの主人公と同じく高校生なんですね。
ちょっと調べてみると、自宅サーバーを使って無料ホスティングサービスをやっているようです。

ホーム – ABELレンタルサーバーサービス
これ、デザインこそシンプルなテンプレートですけど、サービス内容はかなり充実してます。システム的にも、自動会員登録からWeb上のオリジナルコンパネまで作り込んでいるようで、素晴らしい物があります。

運営者情報を見てみると本当にまだ高校生なんですね。
運営者情報 | AbelProject

か、格好良いじゃないですか。
我々が社会人になってから、えっちらおっちらサーバ周りの勉強を始めている一方、物心ついたときから普通にネット環境があって、趣味の自宅サーバで無料ホスティングを始めてしまう高校生もいるわけです。こりゃーうかうかしてられません。

後生畏るべし。焉（いずく）んぞ来者（らいしゃ）来者（らいしゃ）の今に如かざるを知らんや。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

UIデザインの重要性

Fri, 03 Oct 2008 00:02:56 +0000

やっぱりなんだかんだ言って、Webサイトなりアプリケーションなりでユーザーにとって最も重要なのはデザインだったりするわけですよ。

しかもそのデザインというのは、見た目の綺麗さというよりも使いやすさ、ユーザーインターフェース（UI）です。開発側は往々にして機能最優先でこちらを二番手ぐらいにしてしまいますけど、両方大事なわけです。

先日、実家で新しい体重計を買ったんですが、この体重計、体脂肪から骨密度、筋肉量や基礎代謝まで図れる多機能体重計なんですが、これらの数値が１秒ごとにめまぐるしく２周表示されて、それで消えてしまう。こっちはどれがどの数値だかもよくわからず、慌ててメモして後で見なくてはいけない。

これは、機能が良くてもUIが粗悪なために、ユーザーに要らぬストレスを抱かせてしまっている典型的な例ですね。この体重計は聞いたことがない海外メーカーの安物でした。

ユーザー体験を決定的に左右するのは、機能それ自体よりもそのデザイン、インターフェースである、ということで、Web制作においてもモックアップ作成時から意識し愛知来たいところです。

上野氏は「とりあえず半分適当でもいいので、見た目を作ってそれを叩き台に」してみようと話す。まずはデザインを起こすということで、HTMLから作ってもよし、Photoshopなどのグラフィックツールでユーザーインタフェースを起こしてみてもよい。

　上野氏はモックアップ作成時の注意点として、「UIデザイン原則」を守ることが重要だと強調している。この原則は、

1. ユーザーに主導権を与える
2. 直接操作の感覚を与える
3. 一貫性を高める
4. 目に見えるようにする
5. 操作を可逆的にする
6. モードを減らす
7. エラーを回避する
8. マジョリティに最適化する
9. ユーザーの作業を加速化する

ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る – page3 – builder by ZDNet Japan

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

WordPressでカテゴリごとに別のデザイン

Thu, 02 Oct 2008 04:00:22 +0000

メニューカテゴリごとに、ヘッダー画像なり見出しのスタイルなりを変えるのは、特に企業Webサイトを運用する際にはおそらく必須の仕様となる。

通常、僕はこういう際にはBODYタグなどにそのカテゴリのIDを出力して、CSSで

body#category {
background : url(....jpg)
}

などとして指定している。

WordPressをCMSとして運用する際は、

> $cat = get_the_category(); $cat = $cat[0];{echo $cat->category_nicename;} ?>

と記述すると、カテゴリースラッグ（カテゴリURL用の別名）が出力できるので、これを利用して

body id=”company”

などとすることができる。

それにしても、カテゴリースラッグの変数って「nice name」なんですね。ナイスネーム…。ナイススティックを連想させます。（高校の頃よく食べてました）

参照
カテゴリースラッグ名をテーマファイルに指定 – WordPress*リファレンス

WordPress 3.1 にアップデートしたら、パーマリンクが全部404 Not Found！を解決。いやー、焦りました。 WordPress3.1.1にアップデートしたら、トップページには普通に記事が表示されているのに、パーマリンクとして表示させようとしたら404になる。トップページにループで表示されていると言うこと ...続きを読む...

Related posts brought to you by Yet Another Related Posts Plugin.

IE6で透過pngのCSSマウスオーバー

Thu, 25 Sep 2008 10:07:19 +0000

以前、IE6で透過pngを扱うことのできるJavaScriptライブラリを紹介した。（システム修行ブログ» ブログアーカイブ » IE6用透過pngデザイン）

が、実はメニュー部分でこれを使ったとき、Aタグのhover属性には有効にならないことが判明した。

試行錯誤の結果、こちらのサイトを参考に（CSSでブログデザイン IE6で透過PNGをロールオーバー）、JavaScriptではなく、CSSハックとの合わせ技で、IE6のときだけDirextX機能、アルファイメージローダーで画像を貼り付けるという手法で解決。

IE6透過pngテスト2
素晴らしい。『CSSでブログデザイン』様、ありがとうございます。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

WordPressで月ごとに違った画像を表示してみる

Thu, 11 Sep 2008 08:42:08 +0000

概要。
季節・月ごとに違うデザインにしたいとき、トップページの画像（フラッシュ）を、月替わりで表示させたい場合のテンプレート記述。

などにして、月ごとの画像を出力するときに、数字部分を動的に切り替える。
「05」「06」などの文字列出力切り替えなので、css等にも応用可能。

インデックス(index.php)

インデックスページには、普通にindex.phpにPHPでdate関数を記述すれば出力される。便利ですね。

1	echo date("m") ;?>

記事ページ

記事ページはちょっと厄介で、上記の記述だと、常に現在の日付で表示されてしまう。過去の記事は、そのときの月で表示されないと季節感が狂ってしまう。

リファレンスによると、the_dateというオリジナル関数でその記事の日付が取得できるらしい。

# 書式： # 説明：記事の投稿/更新日を出力。PHPの日付文法が使用できる。同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される。# 位置：ループ内（テンプレートタグ/the date – WordPress Codex 日本語版）

ループの中だけ、ということなので、while文で囲む。さらにここでは月だけ出力したいので、引数はmをとって次のようになる。

1
2
3

 while (have_posts()) : the_post(); ?>
 the_date('m'); ?>
 endwhile; ?>

header.php

ちなみに上記記述部分はヘッダーの中にあったんだけど、header.phpは共通パーツになってしまうので、該当部分をindex.phpとsingle.phpにそれぞれ切り分けて解決。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.