ヴォルフロッシュ

2012年>3月

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

RSS

ミニ・ソーシャル・アイコン -追加

たまに増えます、配布中のweb素材ミニ・ソーシャル・アイコン・シリーズ。地味にDL数が数百あるのでそれなりに使われてるのかなと思い強化してみます。6個x3列の18個増やして計72個です。

CleanArchiver Original Icon
72 pieces of social icons

追加分は上から順番に以下のようになってます。

そういえばベタなMailとかfeedのアイコンがないなぁと思って増やしてみたり、あとは最近のサービスとか目に付いたのとか思いついたのとか色々。相変わらず下の2段は日本発のサービス枠になってます。

StumbleUpon と Google+ はロゴ変わったみたいなので新しいのに差し替え。あと今回、今までのヤツのディテールもより統一感が出るように少し調整しました。

CleanArchiver Original Icon
alternative versions

bitbucketのアイコンは独自色が強いのでも少しニュートラルな別バージョンも付いてます。それ以外も以前からあるいくつかのアイコンは別verが付いてます。

ダウンロードはこちらから。

せっかくなので日本のサービスは強化してきたいなと思いつつそのためにこそ海外のもカバーしようとか。国内モノだとiddyとかtogetterとかtwilogとか足したいなと思いつつ20pxの正方形に収まりづらいので後回しになってます。どの辺に需要があるんですかね。

CleanArchiver Replacement Icon

勝手にアイコンシリーズ、第4弾。今回はCleanArchiverというフリーの圧縮ソフトです。ファイルの圧縮はMacの場合OSレベルですでに装備されているのですが、このOS内蔵のアーカイバだと .DS_Store などの不過視設定ファイルなども含まれてしまうため、Windowsなどの別のプラットフォームの人に渡すのにはあまり美しくありません。そこでCleanArchiver。これは、それらの不要な設定ファイルを自動的に除いてファイルを固めてくれるのです。

CleanArchiver Original Icon
Original Icon

こいつをDockに置いておいて、圧縮したいときDockのアイコンにポイっとドラッグ&ドロップすれば、たちまちクリーンな圧縮がされるというわけです。圧縮形式も選べるため、zipじゃなくてtar.gzの方がオシャレ!などという場合も思いのまま。かなり便利なソフトウェアです。

なかなか小憎く、痒い所に手が届くこのCleanArchiverですが、その性質上Dockに置いて使うことになり、しかしアイコンがDockに並べるにはちょっとテイストが合わないかな、ということで以前から気になってた。それにサイズが128pxまでしかないし。

ってことで、実は半年くらい前からすでにこのCleanArchiverのカスタムアイコンを作る計画はあったのですが、当時使っていたMacBook+Illustrator CS3 + Mac OS X Lion の組み合わせがあまりにも重たくてアイコン制作に耐えないため、ラフだけ作って放置してありました。Macも新しくなったし、BathyScapheも一段落したし、そろそろかなと思い作業再開。

できあがりはこんなんです。

[アイコン画像]
CleanArchiver Replacement Icon
16pxサイズは別パース
16px

一応オリジナルアイコンを出発点として、色はオレンジ・水色・若干の黄色、モチーフは紙束にそれを纏めるモノ、にしたのですが、なんだかだいぶかけ離れてしまった。

最初は輪ゴムじゃなくてバインダークリップでやろうと思っていたのですが、クリップで留めるにはある程度の紙に薄さが必要で、でもアプリケーションアイコン的にボリュームを出したい、という理由で悩んだけれど却下。紙が薄いとエディタっぽくなってしまうんでそれは避けたかった。紙モチーフってやりがちだし。エディットするものじゃなくて固めるものなのでボリュームが欲しかった。

icon detail
icon detail

また、相変わらず相当拡大させないとわからないところでアレですが、輪ゴムの質感は結構気に入ってます。

CleanArchiver Original Icon
Dockに並べた感じ

サイズは最大1024px、16pxは今回別パース。あとウィンドウの背景画像も差し替え版が同梱されています。背景画像はpdfなのでHiDPI対応、ただし差し替える際は元のPNGデータに上書きはされないので、それは名前を変えるなり外に出すなりしてどっかに避けてください。まぁ、その辺はREADMEを。

いつも通りdeviantArtで公開してます。アイコンのダウンロードはこちらから。

ちなみに現在CleanArchiverのサイトのトップページからダウンロードできるv2.3.1はLionだとうまいこと動かないので 10.7以上の人は Downloads ページにある 3.0α6 を使うと良い。

Marked 1.3.3

Marked
App Store
Marked

今日知ったMarkedというMacのソフトが便利。

なんてことない、Markdownのプレビューワだ。エディタではない、ただのプレビューワというところがポイント。既存のテキストエディタと併用することを想定して作られている。実際の使い方はサイトにある紹介ビデオがわかりやすいだろう。ファイルをドラッグ&ドロップするだけ。

編集中のウィンドウの横にコンパクトに開かれる
[screen shot] CotEditor + Marked

ただのプレビューワだからこその場所を取らないミニマルなUIが良い。プレビューワだからこその、控えめなウィンドウ幅でしかも画面の右寄りに表示されるのが良い。プレビューワだからこそのライブプレビューが良い。

適応スタイルはシンプルなプリセットがいくつかあるし、もちろん自分でCSSを書いて付け足すこともできる。HTMLの書き出しもボタン1つ。アウトラインとジャンプ機能もある。Markdown変換エンジンは好みのものを別途設定することもできる。

結局Markdownなんてプレーンテキストなんだから大げさに専用のエディタなんて使わずに気軽に普段使いのテキストエディタでやりたいのよ。そのための記法でしょ? あくまで用途によってはたまにプレビューしたくもなる、くらいで。

毎度のCotEditor+Markdownシンタックスで書いて、プレビューしたくなった時点でMarkedをラウンチ。

手抜きのためにMarked呼び出しはAppleScriptにやらせよう。これならMarkedをDockに入れておく必要すらない。

tell application "CotEditor"
    if exists front document then
        tell front document
            if coloring style is in {"HTML", "HTML5", "CSS", "JavaScript", "PHP", "SVG"} then
                -- reload Safari
                tell application "Safari" to do JavaScript "location.reload(true);" in document 1
            else if coloring style is "Markdown" then
                -- launch Marked
                set thePath to path
                tell application "Marked" to open thePath
            end if
        end tell
    end if
end tell
Preview.@r.scpt

プレビュー用のcontrol + Rで実行させるスクリプトを拡張してモードがMarkdownのときはMarkedが開くようにした(ちなみにHTMLとかCSSのときはSafariがリロードされる)

AppleScript EditorにこのスクリプトをコピペしてCotEditorのScriptMenuフォルダ (~/Library/Application Support/CotEditor/ScriptMenu) に保存して下さい。ショートカットキーはスクリプト名の末尾 (この場合@r) で指定できます。

純粋にスクリプトメニューからMarkedを開きたいだけの場合は以下で。

tell application "CotEditor"
    if exists front document then
        tell front document
            set thePath to path
            tell application "Marked" to open thePath
        end tell
    end if
end tell
Preview Markdown.scpt

まぁMarkedは1度開いちゃえばあとはテキストエディタの方でファイルを保存するたびに連動して勝手にアップデートしてくれるからラウンチだけで良いんだけど。

編集中のウィンドウの横にコンパクトに開かれる
Save RTF

そして個人的に最高なのが "Save RTF"。スタイルを適応した状態でリッチテキストで保存できる。Markdownって書慣れてる側としては書きやすいからREADMEだのなんだのに使いがちなんだけど、知らない人からするとやっぱりなんだかんだでリッチテキストの方が見やすいわけで。でも一度Markdownで書いたもののリッチテキスト版を別途作成するのも二度手間。そこでこの Save RTF、読ませる相手によってフォーマットを使い分け。もう、本当にこんな機能こそがほしかった。

あとはせっかくなんだからさらに脇役らしく立ち上がったときにDockにアイコンが出ないような設定ができるようになったら最高だなと思いつつ別にそこは使用には支障はない。これはコンパクトな良いソフトウェア。有料ソフトで350円するんだけど、350円くらい、喫茶店1回分だろう。いいじゃないそのくらい適正価格。

SVG導入のためのレガシーブラウザ振り分け

やっと少しずつ現実的になってきた、webで使える夢のベクター画像SVG。拡大し放題だししかもテキストデータでXMLだわ容量小さいわってことで何ともかわいいヤツ。 当方ものすごくSVG好きです。

13.5pxでの表示
拡大してもなめらかSVGちゃん (ちなみにこの画像自体はPNG)

SVGが使いたい

もともとサイトの素材画像はIllustatorで作ってたのもあり、実はローカル環境ではだいぶ前から画像はSVGにしてたんだけど、webでってなるとやはりネックになってくるのが、いつもの我らがInternet Explorer。caniuse.comによれば、SVG画像を普通の画像と同じ様に扱えるのはどうやらIE9以降。いくらなんでも現時点で8を切るわけにもいかず、SVG導入は将にIE待ち状態。いつも通りです。しかたなくSVGクオリティーはローカルで個人的に楽しむにとどまり、webに上げる用は別途PNG-24に書き出してました1

それでもヘッダの蛙ちゃんとかサイトロゴとかポイントになってて且つ管理しやすい部分はPHPとかCSSの方で振り分けてモダンブラウザにはSVGを渡すようにしていたのですが、いかんせん個別対応なので全部に対してやるのはしんどいしソースも汚くなるから最低限しかやってなかった。

しかしiPadもRetinaになり今後本格的にHiDPI時代がやってくるかと思うと、そろそろさらりと一足先に対応しておきたいところです。もう我慢できん。

で、「てかそもそもApacheが画像渡す時点で選別してもらえばいいんじゃん!」と気付き .htaccess で振り分けることにした。

read more

文字サイズの変更

13.5pxでの表示
未来にこの記事を見たとき用のスクリーンショット

このサイトのメインカラムの文字サイズを0.5pxほど上げてみた。13.5px。画像とかのスケールは以前のままだから違和感があるようなないような。

もしくは皆さん今時はRSSリーダとかReadabilityとか通してみるから、そんなのどうでもいいのでしょうか?

昔は12pxあれば読みやすいって言われてたのに。時代だな。昔のblogを読むと懐かしくて泣けてくる。

CotEditorのPHPシンタックス定義改良

現在は、ここで挙げた改良を含むPHP5.5まで対応したシンタックス定義をCotEditor用シンタックス定義のページで配布しています。

CotEditorのPHPシンタックスカラーリングは優秀で名高かったが、これでPHP5を書こうとするとさすがに古い。で、変数のカラーリングがなんか中途半端でもやもやするのでプロパティにも色が付くようにしてみた。

下記をPHPのシンタックス定義の「値」に足す。REにチェック。

(?<=->)\s*[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*+(?!\s*\()
プロパティと途中のインスタンスを抽出する正規表現

するとこれが

こうなる。

プロパティと変数がごっちゃになってる気もするけどまぁこんなもんだろう。これは単純に好みで::で渡すstaticなのは除外してる。

PHP5で加わった関数がどうとかclass内のアウトラインがどうとかあるけど、やると大変そうなので手は出さないでいる。時代はPHP5.3だぜよ。いやもう5.4なのか? 最近は全然触ってない。

CotEditor コメントマクロ v1.1

CotEditorの一括コメントアウトスクリプトをアップデートしました。ついでに名前も変わって専用ページも作りました。

色々変わっているのでもし使っている方がいらしたら、入れ替えることをお勧めします。

変更点はこんな感じ。

  • ブロックコメントのコメント解除ができるようになりました(単独のブロックコメントのみ)
  • コメントが行頭でしか許されていない言語 (Apache, Shell Script) では、常に行頭に対してコメントアウト/解除をするようになりました
  • "ルーズセレクト モード" が選択できるようなりました
    このモードを有効にすると、選択範囲の開始/終了が行の途中でもその行頭から行末までに対してコメントアウト/解除をします
  • 行全体を選択する Select Lines と 常にコメントアウト・解除を行う Comment Out, Uncommentを optional scripts/ として同梱しました
  • ブロックコメント切り替えの設定行数に関わらず、選択範囲内のラインコメント数が設定した割合を超えるときは、コメント解除を行うようになりました
  • コメントアウトの際、空行の行頭にもコメント記号をいれるようにしました
  • デフォルトの コメント解除 への切り替えコメント割合を2/3に変更しました
  • 対応している言語に R を含めていながら R の定義が入っていなかったので追加しました

何だか色々弄った結果ソースはかなり変わってます。AppleScriptはなかなか面白いのですがテキスト処理まわりは本当にアホの子なので色々工夫が必要でそれに行数を割かれている感じです。とはいえ速くなったか遅くなったかというと速くなってると思う。体感するほどではないと思いますが。

閑話休題。簡易ではありますがブロックコメントの解除ができるようになりました。ブロックコメントは開始と終了外すだけだから手動でもいいかな、と思っていましたが、実装してみたらとても便利だった。開始から終了までピッタリ選択しないと外れませんが、それもまた誤作動がなくていいかな、と思っておこう。

前述のとおりgistにチマチマ上げてた切れ端と合わせてCotEditorマクロ関係の専用ページを作りました。このコメントマクロはさらに隔離して1枚ページにしてあります。v1.1もここからダウンロードできます。

続きは新機能の解説みたいの。

read more

CotEditor スクリプト・プラグインまとめ

[icon]
CotEditor

世で配布されているCotEditor用のスクリプト・プラグインをまとめてみた。

私がまとめるまでもなく、踊るサボテン工房さんがCotEditor関連の情報は集めて下さっているのですが、スクリプトの機能で一発で探せるリストはなかったので便利かなと思い作ってみました(どっかで見たような文章)

ググって淡々とリストアップしているだけなので実際に動作するかまでは確認していません。機能としても重複しているものもあるかと思います。順不同。使用方法・ライセンス・動作環境云々はそれぞれのサイトの記載に従ってください。なお、リスト内の作者名は識別用に併記させていただいており、簡略化のため敬称略となっております。

read more