ヴォルフロッシュ

2011年>6月

独自エンジンで動いてるいわゆるブログ

RSS

夜フクロウ 公式版アイコン

YoruFukurou Icon
YoruFukurou v2.52

先日、Twitterクライアント 夜フクロウのリプレースメント・アイコンを作りましたが、それを夜フクロウの作者の@aki_null様に拾って頂き、このたび夜フクロウ公式アイコン版も作らせて頂くことになりました。というか作りました。

v2.52から拙作のアイコンに変更されており、公式サイトでは既にダウンロード可能となっております。AppStoreは数日後、アップデートがAppleに受諾されてからの公開になります。

read more

ヴォルフロッシュ v4 -サイト内検索

サイトリニューアル記念内容大公開、最終回は新しくお目見えしたサイト内検索についてです。

だんだん内容がマニアックになってきました。ウェブデザインおよびプログラミングに興味がない人にはなんのこっちゃな内容だと思うので、そういう方は適当に読み飛ばして下さい。まぁ、雰囲気モノとして読んで見るのも良いでしょう。コンナカンジデス、うぇぶさいとセイサク。いずれにせよ、このサイト専用の検索システム、汎用性にも欠けるのでそんな具体的なソースコードについては書きません。

read more

夜フクロウ Replacement Icon Set

また勝手に代替アイコンを作ったので紹介します。今回は夜フクロウ (YoruFukurou) という、Mac用の日本製Twitterクライアント App Store です。

YoruFukurou Original Icon
Original Icon

夜フクロウはオリジナルのアイコンもなかなかかわいらしいのですが、「やっぱりもっとMacっぽくしたい!」と思い作りました。公式サイトにカスタムアイコンのページがあるというのも動機の1つ。BathyScapheもそうでしたが、こういうオープンさがあると「じゃあ私も」って気持ちになってくる。国産でなかなか人気のクライアントみたいなので大きくはばたいて欲しいなと思っています。

YoruFukurou Replacement Icon
YoruFukurou Replacement Icon

で、こんな間の抜けたのが出来上がったわけです。Dockにぽやっと座ってるイメージです。ぽやっとなんかつぶやく、といった感じ。色は直球でわかりやすくTwitterカラー。本体は塩ビのような求肥のようなサラサラしたテクスチャで目とクチバシだけツヤツヤ。

このアイコンは何処まで形を削いでフクロウに見えるか、という引き算方式で作りました。故に「フクロウなのか?これは」といった仕上がりになってますが、まぁ、いちおうギリギリそう見えるかな、と。頭からにょきにょき生えている物はフクロウのいわゆる耳のつもりです。

本当は3Dソフトで作るとちゃんと本物っぽくなるのでしょうが、そんな技術もソフトも残念ながら持ち合わせていないので、いつも通りIllustratorで描いてます。そもそも私には絵の基礎体力がないので、このパースのかかった立体的な曲線線対称型は辛くて辛くて泣きながら作りました。

と,私の技量の限界はありながらも、このアイコンはかなり気に入ってます。自分で書くのもなんだがとってもかわいいぞ。

前の2作BathyScapheとCotEditorは元のアイコンデザインに忠実に作ったのに対し、今回はデザイン的には100%オリジナル。

awake / silent mode / asleep
3つのモード

そうそう、夜フクロウはモードによってDockアイコンが変わるんですよ。普段は寝てて、起動すると目を開ける。そしてサイレント・モードというモードの時は眠そうな半目になります。そこもかわいいんで是非作ってみたかった。ちゃんと3種類作って同胞してあります。

ちなみに、システム上寝てる状態がデフォルトのアイコンなのですが、Cover Flowなんかで拡大した時は起きてるアイコンになるように、ちょっとトリッキーに作ってあります。

きたるLionに備えてデータは1024pxサイズで作ってるので、Lionがリリースされたら1024が入ったのも作ります。今はまだツール的に作れないので512pxが最大サイズです。当初はLionが出てから公開しようと思っていたのですが、来月のいつなのかよく分からないので、もう出しちゃいます。半分β版みたいな感覚です。なので1024サイズを出すまでの間にツッコミがあったら受けられるのは受けます。

毎度ながらdeviantARTに置いています。ページ右側の Download ボタンからダウンロード下さい。

今回、設定方法はREADMEに書いてあります。

また、このアイコンからライセンスにCreativeCommonsを採用しています。そんな高らかに宣言するほどのアレではないのですが、「どれなの?」と聞かれたときに楽なので。今後も基本的には同じライセンスでいこうと思ってます。

もし、気に入っていただけたら、Dockの上で是非愛でてあげて下さい。

これをベースに夜フクロウの公式アイコンも作らせて頂きました。詳しくはの記事を。

ヴォルフロッシュ v4 -内容

[サイトロゴ]

コーディング系の話題はいったん休憩。今日は普通にサイトの内容の話。

色々整理しなおそうってことで、サイトの中身も整理しました。

正直自分でもこのサイトの位置づけは困っていて、いやまぁ元々はALFEEのファンサイトなのですが、最近は私の興味の方向故にALFEEの話もめっきり減ったし、それ以外について書いてることがほとんど。「何のサイトなんですか?ここは」に少しでも答えるための、コンテンツの再構成です。

read more

figcaptionのスタイリング

figcaptionが上にある場合はキャプションに▼が、figcaptionが下にある場合はキャプションに▲が自動的に付く
使用例

ふと思いついたのだが、figurefigcaptionの使い方で、順序でセレクタを分ければうまいことCSSで矢印が付けられるのでは。

こんな風に。

CSS
figure figcaption:first-child:before { content:'▼' }
figure * + figcaption:before         { content:'▲' }

つまり、figureの直後にfigcaptionが出てきたらその下に本体があるので▼、直後じゃなかったらその前に(つまり*のところに)本体があると判断して▲。今日日このくらいならどのブラウザでも表示できるはず。便宜上書くのに楽なので▲にしたがもちろん画像でも何でも良い。contentが嫌いなら、background + 画像 で。

うん、これは理にかなってていいな。気が向いたら採用しよう。

ヴォルフロッシュ v4 -デザイン

[サイトロゴ]

私としては、今回のリニューアルの一番の目玉は、全ページをXHTML1.0 StrictからHTML5に書き換えたことです。残念ながら外から見れば何も変わらないのですが、同時にストリクタンとしては気合いが入るところ。それにPHPと違ってソースを見れば見られるのでそれなりにやりがいがあります(いや、普通は見ねぇよ、ってのは置いておいて

ってことで、今日はおおいにHTML/CSS、ついでにちょっとJavaScriptのコーディングの話をします。

read more

ヴォルフロッシュ v4 -リニューアル

[サイトロゴ]

表題の通り、とっても久しぶりに、サイト全体をリニューアルしました。そろそろ手を入れたいなとは思っていたのですが、いざ入れ始めるとあれもこれも気になって、結局丸々2ヶ月くらいかかりました。恒例ですが色々書きたいこともあるので、今後数回に分けて、このBlogで今回のリニューアルについて書いていこうと思っています。内容は、リニューアル、デザイン(HTML5/CSS)コンテンツ、オブジェクト指向、検索システムの5回に分割(予定)し、今日はその最初の、リニューアルそのものについて書きます。全5回の予定です。長いです。

read more

オリジナルはてなブックマークボタン&ツイートボタン

今回のリニューアルでこのブログにも流行のはてブボタンとツイートボタンが付きましたが、案の定凝り性なので自分で色々弄ってます。

せっかく作ったのでここに弄り方をまとめときます。

公式のSNSボタン
当サイトのカスタマイズSNSボタン

まぁ一番簡単なのは、それぞれのサービスが提供しているタグセットなのですが、それだとあまりに味気ないというかデザイン上の自由度がほぼ皆無。やはり自分の好きな画像を使ったり、ブックマークがある時だけブックマーク数を表示したり、色々臨機応変にやりたい。しかもそうやって条件分岐させるならJavaScriptで後から書き換えではなく、そもそもPHP上でページ生成時にやっちゃった方が楽というものです。JavaScript使えない環境にもやさしいもんね。

これからの解説は、JavaScriptではなくPHPでカウント数を取得,ボタンリンクを生成するための方法です。外部サービスは利用せず、Twitter/はてなの各公式サイトのAPIのみを使用しています。

ということで解説。

read more

MassReplaceIt 2.9

公式サイト
MassReplaceIt

Mac用の良いマルチファイル置換ソフトを探しているのだが、今に至るまで見つけられていない。

シンプルな
	MassReplaceItのメインウィンドウ
インターフェイスは至ってシンプル

という書き出しでソフトウェアを紹介するのもどうかと思うが、MassReplaceItである。現在は(いや、というか何年も前から)ちょっと妥協してこのMassReplaceItというソフトを使っている。フリーソフトでコンパクトで正規表現も使えて検索かけてから該当箇所の確認をしながら置換ができて(スキップもできて)申し分ないのだが、1つ重大な問題が。BOMの付いていないUTF-8ファイルを読んでくれないのだ。現在ほぼ全てのテキストファイルをUTF-8で書いているのでコレは痛い。BOMは付けたら付けたで問題も多いので「じゃあ付けとくか」というわけにもいかない。

公式サイト
MultiTextComverter

それでもコイツは良いソフトだし他に選択肢が見つからないのでそれでもこのMassReplaceItを使う日本語話者は多く、回避策としてMUltiTextConverterという別のフリーソフトで一時的にBOMを付けてから置換をしてまたBOMを外すという力技が挙げられている。私もそれに習ってそうしているのだが、まぁ、めんどくさいわけですよ。コンバート忘れることもあるし、本来1回で済む作業が「BOMつける → 置換 → BOM外す」と3段階にになってしまう。それでも使えるだけ有難いからいいのだが、スマートではない。めんどい。

それゆえMacでの複数ファイル置換はコマンドラインで済ませてる人も多く、コマンドラインでもまぁいいんだけど、でも世の中なにがあるか分からない(そしてコマンドよく忘れるのでその度に調べるのは面倒)ので、できれば確認しながら1つずつ置換もできるようなGUIソフトが欲しい。

というかやっぱMassReplaceItがBOMなしUTF-8に対応したら文句なしなんだよな。が、要望を出そうにも2006年以降開発がとまっているようなのでいかんともしがたい。うむ。

なんかのエディタのサブに付いてる機能っての以外でなんかいいの知ってる人いたらおせーて。