blog
komagata昨日行われたHeroku-ja Meetup #1でPaaS向けCMS LokkaというLTをさせていただきました。
FJORDでは４つあるサービス全てをHerokuで運営しているのでHeroku様様です。運営に関わった皆様、どうもありがとうございました。
machida昨日（2011年6月21日）、エンジニアではなくデザイナーなのにも関わらず、Mitaka.rbという三鷹を中心とするRuby/Railsエンジニアさん達の集まりに@komagataさんと一緒ではなくフィヨルドから一人で参加させていただいた上に、LTまでやらせていただきました。
Mitaka.rbは「たのしいRuby，おいしいMitaka」をコンセプトにした勉強会。今回もご飯を食べて、お酒を飲みながら、色たくさんの方とお会いしお話をさせていただきました。楽しかったです。運営をしてくださった@ysakakiさん、@monoookiさんありがとうございました。
Slide ShereのTwitter、FaceBookのHotに入りました
ありがとうございます。
これはあの名門女子大「フェリス女学院」の2010年の学園祭パンフレット。
フィヨルドはインデントに困った女子大生を救います。
2011年4月21日（木）、アップルストア銀座 3Fシアターで開催されたCSS Nite in Ginza, Vol.56で”黒い画面”のお話をさせていただきました。
CSS Nite in Ginza, Vol.56が終了しました | CSS Nite公式サイト
関係者のみなさまありがとうございました。
関連：
リポジトリホスティングサービスとしてお馴染みのgithubですが、弊社(２人だけど・・・)も全てのWebサイトのコードとデザインはgithubに預けています。そのgithubのタスク管理機能であるIssuesが先日リニューアルしました。
基本のタスクをマイルストーンとラベルで管理する感じは変わってませんがUIが大きくなったり、コンテキスト毎に整理されて見易くなりました。担当者もアイコン付きで分かりやすいですしWikiも以前より良くなっています。数人のプロジェクトだったらこれだけでいいんじゃないの？って感じです。
(Commit logに#issue番号を書いておけば勝手にcloseしてくれる)
マイルストーンあたりの進捗率が分かるし、リポジトリと最初っから密に連携していているのも話が早いです。
リニューアル前からWebフレームワークのCappucino(and Objective-J)を使った素敵なクライアント(http://githubissues.heroku.com/)もありますが本家のUIが良くなったのは嬉しいです。
僕らはSkypeより主張の少ないLingrを開発チャットに使っていますが、ファイルがpushされるとそこへ通知が行くようにしています。デザインはdesign/プロジェクト名.psdにコミットするようにしています。コミット＝進捗として通知がちゃんと行くようにすると、「キリのいいところまでコミットして帰ろうかな？」という気になって良い感じです。
参考：github service hooks on lingr | Under Construction Always!
後はHarvestなどのTime Trackingサービスと連携してくれると嬉しいです。
皆さんご存知の堅そうな名前でこちらがたじたじになってしまう会社さん「技術評論社」様のサイト「gihyo.jp」にアイコンを使ったWebデザインの記事を書かせていただきました（アイコンでガラリと変わるWebデザイン――gihyo.jpのアイコンもリニューアル？！）。
エイプリルフール用の記事なので、ちょっとしたおふざけ記事ですが、ちょっとエロ心も出してWebデザイナーの方が読んで、「あーなるほど」と思っていただけるようなことも含めたつもりです。技術でも評論でもない記事ですが、見ていただけると嬉しいです。
記事にあるように、最近アイコン制作にはまってます。記事を書いた記念に作ったやつや、今作り途中のアイコンをここに公開。
Photoshopで作ってます。アイコン制作は楽しいのでおすすめ！
お手伝いさせて頂いたfoodfoto incのコーポレートサイトが2月1日に公開されました。デザインプロセスは@machidaさんが書かれたので僕はシステム面について書きたいと思います。
といってもプログラマーの僕は殆ど何もやってません。これは依頼者である@func09さんとデザイナーの@machidaさんがコラボレーションツールを上手く使った為だと思います。そこでfoodfoto.jpサイトを作るに当たって使ったツールやサービスを紹介してみたいと思います。
Basecamp
言わずと知れた37signals, LLCのコラボレーションツール。ハードに使う人・ソフトに使う人、プロジェクトに関わる人は色々いると思いますが、今回、常にBasecampの画面を睨んでいるというようなハードな使い方ではなく、ソフトに関わった僕としては”メッセージ”の機能が便利に思いました。
“メッセージ”は要は掲示板なんですが、デザインラフをアップしたとき、進捗があったときなど、必要な時にメールで飛んでくるのが便利でした。メールだと他の作業の妨げにならずに、自分のペースで確認できます。やり取りを確認しながら、技術的なポイントについて確認を取ったりしました。
FJORDではHeroku上のRedmineを使っているので早速真似して”メッセージ”に似た”フォーラム”機能を有効にしてみました。
Github
お馴染みのソースコードリポジトリ共有サイト。あーだこーだ言うよりコード自身でコミュニケーションするのが一番早いとつくづく思いました。今回はサイトの多言語化について、文章で説明すると長いんですが、コードだとすぐ済みました。
今回は後述のHerokuとLokkaをあわせてリモートリポジトリをorigin(github), heroku, lokkaと使い分けました。
Heroku
最近Salesforceに買収されたRubyのRackアプリのホスティングをしてくれるサービス。FJORDでも殆どのサービスで使っています。一番気に入っているのは無料なところです！
無料なので、旧foodfotoサイトと新foodfotoサイトの二つを用意し、公開時に単純にDNSを切り替えました。(@func09さんが)
Lokka
言わずと知れないクラウド向けCMS。要はHeroku等のクラウド環境で動くRuby製のWordPressです。HerokuとMacで簡単に動く事に注力して出来ているのですんなり行きました。また、”たまたま”僕が開発を行っていて、@machidaさんが扱いに習熟していたので問題ありませんでした。
元々WordPressでも殆ど僕の出番は無かったんですが「ちょっとこの機能のプラグインを作って欲しい」といったことはよくありました。その時にPHPを書くのとRubyを書くのでは精神的に全然違います・・・。テーマ修正もHamlなら快適です。(erbも使えますよ！)
デザイナーが”黒い画面”を使える効能
プロジェクト開始の日に上記のBasecamp, Github, Herokuのコラボレーターに@komagataと@machidaを追加して頂きました。とっても楽です。
プログラマの方なら「何か普通なツールばっかりじゃないか」と思われるかも知れません。しかし、プログラマーの僕が殆ど手を動かさずできたのは、
「Basecampでスケジュールを確認し、GithubからpullしてきてテーマをHamlで書き、ローカルのLokkaで確認してcommitし、Herokuにpushする」
ということを全てデザイナーが出来るからこそなのです。
もちろん全てのデザイナーがこれらを使いこなせるべきとは言いませんが、これによって可能になる生産性の向上は素晴らしいものがありました。またデザイナーがgitやherokuを使うといっても完璧に理解するという感じではなく、基本的な手順がなぞれるぐらいで十分です。想定外の事が起きたらプログラマーにやってもらえばいいんです。
僕らのような小さな会社はこれからますます他の会社や個人と協力しながら仕事をする機会が増えていくと思います。そのためにはこういったコラボレーションツールを活用することはとても重要になっていくと感じました。
宣伝
@machidaさんがfoodfoto inc.の作成が終わって暇なので「あら、うちのサイトもこの会社に頼もうかしら」という方がいらっしゃったら@machidaか@komagataまでご連絡下さい。
@func09さんが立ち上げた会社「foodfoto」の会社サイトをフィヨルドで制作させていただきました。
そもそも僕も@komagataさんもラペコをオープンのときから応援してたファンだし、@func09さんのはてブがたくさんついたエントリー「自分でWebサービスを作ってたら起業することになりました」には@komagataさんが出てくるし（その前のエントリーには僕が出てくるのですが、はてブの差がひどい！）、フィヨルドでやったつくる社創業お祝い会に遊びに来ていただいたし、イベントでもよくお会いするしで、@func09さんが会社を始めたっていうだけでフィヨルドはもう祭りなのに、その会社のサイト制作の依頼をいただいてしまいました。
しかも、@komagataさんが作ってるCMSのLokkaで、というありがたい注文付き！
さらに、powerd by Lokkaも格好良く載せて、と！
そのサイトが昨日（2011年2月1日）オープンしました。
foodfoto.jp公開を記念して、サイトを作ってるときどんな感じだったかをここに公開したいと思います。
やけにデザインのいいサイトに詳しいエンジニアたち
まずは、とりあえずどんなサイトが好きかっていうのを@func09さんに出していただいたのですが、いきなり出てきたのがコレ！
Rubyをやってるエンジニアの方にはお馴染み、thoughtbot！この会社のサイトは僕も大好きで（エンジニアじゃないけど）、「じゃこれは？」、「これはどう？」…って感じで、お互い好きなサイトを出しあったところで大体の方向性なんかがすぐ見えてきました。挙がるのは海外のイケてるサービスを運営してるちょっとマニアックな会社のサイトばっかり。「隣のクラスにも洋楽に詳しいやつがいるぞ！」ってな中学時代の一幕を思い浮かべてしまいました。
@func09さんにサイトの打ち合わせで来ていただいたはずが、@komagataさも交えて好きなデザインのサイトを出し合う会に発展。それにしても@func09さんも@komagataさんもデザインがイケてるサイトにすごい詳しい。デザイナーだからとか仕事だからとかじゃなくて、普通にネットやってて格好いいものに出会ったら感動して、その感動を大事に自分自身の物作りの肥やしにしているエンジニアなんですねぇ。
今回は「foodfoto」っていうサービスをやってるfoodfotoという会社の紹介サイト。
受託中心の制作会社ではないので、
とか、
って感じのサイトじゃないやつです。だからデザイナーの自由が大きくて、デザイナー冥利に尽きる仕事である分、どんなデザインでいくべきか、責任は重大でした。
これがレイアウト案。
妄想をPhotoshopに食わせる
今回はイラストも含めてPhotopshopだけで全部の画像を作成しました。
僕の場合、デザインを考えるときはいつも妄想に妄想を重ねて、その妄想の中のモニターに映ってるものを覗き込む、って感じです。大体調子が悪いときは現実の目の前のモニターの枠の中で頭をひねっているときなんですよね。ちょっとPhotoshopから離れて妄想して、戻ったりなんてことをやってます。
例えば、奥さんがfoodfotoに娘と作った今夜の手料理の写真をアップしてて、それを残業中の旦那さんが職場で見て、「帰らなくては」っとノートPCをパタン、と閉じるシーンを思い浮かべて、そのときに旦那さんが見た画面を想像したりだとか、パーティーの翌日、職場の同僚に「昨日のお店超良かったよー」と自慢気に昨夜食べた写真を見せてるOLを思い浮かべたりだとか…。
func09さんはデザイナーにとってハードルが高い！
@func09さんは元デザイナーのエンジニア。いいデザインのサイトもたくさん知ってるし、これってデザイナーにとっては、かなりきっついお客様。さらに、奥様はすごい素敵なアニメを作ってるアニメーターだし、それに可愛い娘さんもいらっしゃる！素敵なものに囲まれた生活をしてる@func09さんに自分の作ったものを出すのは緊張してしまいます。
それに、@func09さんが起業前にいた会社、KRAYさんのサイトはつくる社・前田製作所の@monoookiさんが作ったんですが、これがまたすごい素敵なサイトなんですよね。これもプレッシャー。
いくつかデザイン案を提出させていただきましたが、全部ダメだったらどうしよう、とかドキドキでした。「デザイン案を提出する」、これはデザインする度毎回行う儀式なんですが、いくらやっても慣れないですね。一つ選んでもらったときは安心して腰がヘナヘナになりました。まぁ、その後にはユーザーの皆さんに見ていただくっていうもっと大きなイベントが待ってる訳ですが…。
せっかくなので、提出したデザイン案の一部を公開
Lokkaでの構築
いよいよコーディング。
Lokkaは@komagataさんが作ってるRubyで出来たOSSのCMSなんですが、僕もKUROIGAMENっていうデザイナー向けブログをLokkaで作ったのでちょこちょこは触っていたのですが、仕事でやるのは初めてでした（近いうちにこのサイトもLokka化します）。
いつもこういった企業サイトなどを作るときはWordpressを使うことが多いのですが、今回Lokkaを選択したことでいいことが結構あったので挙げておきます。
Lokkaを使ってここがよかった！
- Localに環境を作るのが楽だった。
- FTPを使わずに黒い画面でファイルのアップロードが出来て楽だった。
- Gitで楽々バージョン管理が行えた。
- URLをDBに持たないから本番用のURLで公開する際、DBを触る必要がなかった。
- テーマの部分はHamlでコーディングが出来た。
- 多言語化サイトの制作がすごい楽だった。
foodfotoさん用の非公開Githubアカウントを使わせていただき、そこにリポジトリを置かせてもらえたので、僕と@komagataさんとの共有も楽だったし、作業途中にあったLokkaのupdateにも楽に対応出来ました。
以前、Wordpressでのバージョン管理で苦労して結局止めた、なんてことがあったのですが、Gitを使ったLokkaのバージョン管理はかなり楽でした。DBは本番から落として来れるし。
それにしても、「デザイナーがGithub使えるのか、便利！」と言われる状態から、「ここの会社はGithubを使ってるのか、助かる！」と僕が逆に言ってしまうような立場逆点のここ最近です。
得に、多言語化が楽で助かった！
#{locale}
#{locale}ってテーマに書くだけで、日本語のときは「ja」、英語のときは「en」って出るんですよね。例えば、About Usというページを作ったときは、日本語、英語の両方のページを作って、日本語のときのパーマリンクは「aboutus-ja」、英語のときは「aboutus-en」という感じで作り、リンク先を
a href="aboutus-#{locale}"って書くだけで、言語設定でリンク先を変える、なんてことが出来ました。
また、英語と日本語では見た目的に行間の調整が必要だったりして、やっぱりこの辺をちゃんとしないと、怪しい臭いが漂ってしまいます。英語ではselifを設定しても、明朝体はキツイとかってありますよね。
こんな匂い。
細かい調整も、
body class="language-#{locale}"と、マークアップしておくだけでcssの設定は楽に出来ました。
Lokkaを誉め過ぎたのでWordpressのいいところも
- Lokkaの場合、まだ管理画面の投稿で改行二回で段落（pタグ）になったりだとか、Wordpressの定番プラグインである「add quick tags」みたいなHTMLを知らない人でも簡単にタグを入れられる機能が無いため、ネットリテラシーが低い方にはちょっと難しいです。
- フォームのプラグインがないっていうのも場合によっては困るかもしれないです。
- WordPressのマルチサイトの機能も場合によっては便利ですよね。Lokkaにはないです。
- こういうときどう書いたらいいんだろう？っていうとき、まだユーザーが少ないのでググッても情報が見つかりにくいかもしれないです。Wordpressはすごい情報量なのでデザイナーに優しい。
Lokkaはココにチャットルームがあるので、ここで質問したら誰かが答えてくれるかもしれません。
工夫したところ
長くなってしまいましたが、最後にババっと工夫したところを書いておきます。
Google web fonts
まずは、僕じゃなくて頑張ったのはGoogl先生なんですが。Google web fontsを結構色んなところで使いました。英語の方でしか使ってないので、是非英語の方も見てください。それにしてもGoogle web fontsってすごい！デザイナーは使わない手はないですね。これ使うだけで簡単に可愛い雰囲気とか出せちゃいます。Google web fontsの日本語もリリースされないかなぁ。
写真が映えるお知らせ・Information
これも、頑張ったというか偶然というか…なんですが、採用されたデザインは色が少ない、コーポレートカラーの赤が中心のものだったのですが、色が少ないから写真がよく映えます。foodfotoは写真のサービスだから、これからお知らせで写真がペタペタ貼られるだろうなぁ、なんてことを予想しながらcssの設定をしました。「foodfotoが創業1周年を迎えました」なんて記事に、foodfotoのロゴが入った誕生ケーキの写真が添えられた写真が載ったりとかするのかなぁ、とか。
絵も描きました
絵も描かせていただきました（iPhone4を持ってなくて、フィヨルドに遊びに来てた@rono23君に見せてもらったり、あのときはありがとう！）。なかなかサービスの内容と楽しい感じがイメージ出来るようなものになったんじゃないかなぁ、なんて思ってます。ちょっと洒落っぽくオムライスも載せてみたんですが、それもtwitterで好評をいただけて嬉しかったです。初めにロゴを見せていただいたときに思い浮かんだのがケチャップで描いたロゴだったんですよね。オムライスを描いてる時はなんかミニチュアフードを作ってるような感じで楽しくなって、一人でテンションを上げてました。
トップページのヘッダーのイラストの部分は、リリース後にはこの部分に使い方の動画を載せるのも面白いんじゃないなぁ、なんて思ってます。そのときは読み込む動画ファイルの名前を「movie-en」と「movie-ja」で分けて多言語化に対応かなぁ…とかまで考えてたり。
…と、まぁこんな感じで楽しくやらせていただいたfoodfotoでした。
>@func09さん
これからリリースされるサービスに期待してます！
世界中の料理の写真が並ぶのが今からすごい楽しみです。
Lokka、Wordpress他、デザインやります
フィヨルドはデザイン案件もシステム案件も募集中です。
CMSのカスタマイズはもちろん、0からのシステム構築もデザインもやりますので、もし興味がありましたらこちら、または「@machida」を付けてtweetでもどうぞ！
最後に宣伝が付いていやらしくてすいません。
Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧
Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズも最終回です。今回はそもそも”黒い画面”とは何なのかを紹介します。
“黒い画面”とは何か
“黒い画面”とは何か。そりゃあもちろん今まで使ってきたコレ。
ターミナル.appのことでしょう。
しかし、実は今まで”黒い画面”として使ってきた物は大きく二つのソフトから成り立っています。これは歴史的経緯を説明した方が分り易いと思います。
Terminal(ターミナル)
Part.01で説明したように昔は大きな”ホストコンピューター”に多数の”端末”を接続して使っていました。
“端末”にはディスプレイとキーボードが付いています。”端末”のキーボードで文字を打つと、ホストコンピューターに送られ、結果が帰ってきて”端末”のディスプレイに表示されます。
昔のコンピューターは非常に高価だったため、1台の大型コンピューターが処理を行い、単なる入出力装置としての安価な”端末”を複数用意して使いました。
この”端末”、英語ではTerminal(ターミナル)というハードウェアをソフトウェアで模倣(emulate)したものがターミナル.appです。この種類のソフトを正確にはターミナルエミュレーター(Terminal Emulator)と言います。
昔は”ホストコンピューター”と”端末”だったものが、今は端末はソフトウェアになり、ホストと端末が1台のパソコン上で完結しています。(端末で自分自身に接続している)
ターミナルは文字を入力することと結果を表示することしかできません。では今まで使ってきた$マークのアレは何だったのでしょう。
Shell(シェル)
$マークを出しているのはshell(シェル)という種類のソフトです。shellは$マークなどのプロンプトを表示してユーザーからの入力を待ち、入力されたファイル名のプログラムを実行し、終了したらまたプロンプトを表示して待ちます。
“黒い画面”の本質であると説明した、”ファイル名を入力するとそれを実行する”という機能はこのshellが行っています。
shellは殻という意味です。複雑なコンピューターを貝殻のようにつつみ、ユーザーとの仲介役をしてくれるためshellという名前なのだと思います。Finderも全く違う物に見えますが、コンピューターを包みこんでユーザーとの仲介役をしてくれるという意味では同じです。FinderのようなGUI(グラフィカルユーザーインターフェース)を持つものは特にグラフィカルシェルと呼びます。
このshellも単なるプログラムに過ぎません。/bin/shというのがそれです。shellを略してshとはやはり略し過ぎですね。
前回スクリプトを実行させる時に使ったshコマンドはこれです。普段は$の後に文字を打ち込んでいましたが、ファイルにまとめてshに渡せば同じ結果になるのは当たり前ですね。
代替ソフト
“黒い画面”は主にTerminal Emulatorとshellの二つで成り立っていると説明しました。両方とも代替ソフトが存在します。
Terminal EmulatorはMacではiTermというソフトが有名です。初期のターミナル.appは貧弱だったのでiTermが良く使われていましたが、現在ではターミナル.appも十分な機能を持つため、殆どのユーザーはデフォルトのターミナル.appを使っていると思います。
shは実はMacのデフォルトのshellではありません。Macで実際に使われているのはshの強化版とも言うべきbashというshellです。
bashの由来
元々shの正式名称はBourne Shellと言います。アメリカのAT&Tベル研究所のSteve Bourneさんが作ったshellなのでBourne Shellです。bashはBourne-Again Shellの略でBourne Shellの全ての機能をカバーしつついくつもの追加機能を付けたshellです。Bourne ShellのBourneとborn again(生まれ変わり)を引っ掛けた駄洒落です。
他にも/binディレクトリにはスクリプトを書くのに強いcsh、cshを機能強化したtcsh、最後のshellを目指して作られたzshなど様々なshellがあります。chsh(CHenge SHellの略)コマンドでデフォルトで使われるshellを変更することができます。
最後に
Webデザイナーの為の「本当は怖くない」”黒い画面”入門はこれで終わりです。どうでしょうか、”黒い画面”は怖くなくなったでしょうか？
このシリーズでお伝えしたかったのは、全体としては呪文か暗号のように見えるものでも、一つ一つの要素をとってみれば、”日本語に訳してみればそのまんま”だったり、”省略しすぎてるだけ”だったり、”それを作ったおっさんの名前”だったり、”昔の名残で”だったり、単純なことに過ぎないということです。
日本語ではDesigner(デザイナー)というとヴィジュアル面だけを担当する人という意味で使われがちですが、本来は設計者という意味合いの強い言葉です。ヴィジュアル面だけをやるならArtist(アーティスト)やIllustrator(イラストレーター)と呼ぶべきでしょう。
建築や家具などの工業製品のデザイナーにはエンジニアリングの基礎知識は必須です。Webデザイナーとは本来ヴィジュアル・システムを含めたWebの設計者であるべきです。
コンシューマー系Webサイトの大半を占める”黒い画面”すなわちUNIX系OSのエッセンスに触れることはWebのエンジニアリングを理解する上での一番の近道です。
これらのエントリーがそういった本当の意味でのWebデザイナーへの足掛かりになれば幸いです。
Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧
作業の自動化
“黒い画面”での作業は文字を打ち込むだけの単純で厳密な手順なので簡単に自動化できます。
例えば、僕はlokkaというソフトを作っていますが、新しいバージョンをリリースする時に、その時の最新のファイルをダウンロードしてきてzipファイルに固める必要があります。下記のようなコマンドでそれが可能です。
$ git clone git://github.com/komagata/lokka.git lokka
$ zip -r lokka.zip lokka
$ rm -r lokkagitというコマンドで最新のファイルをlokkaというディレクトリ名でダウンロードしてきて、zipコマンドでzipに圧縮し、元のディレクトリはもう要らないのでrmコマンドで削除しています。
実はこれをそのままファイルに書くだけで自動化が可能です。make-lokka-zipfileという分り易いファイル名に上記コマンドを書きました。catコマンドで確認するとこんな感じです。
$ cat make-lokka-zipfile
git clone git://github.com/komagata/lokka.git lokka
zip -r lokka.zip lokka
rm -r lokkaそのままです。”黒い画面”に打ち込んでいた文字をファイルに書いただけですね。そのファイルを実行するには下記のようにshコマンドに渡します。
$ sh make-lokka-zipfileファイルの中に書いたコマンドを順番に実行してくれます。このようにやって欲しいコマンドを順番に書いたファイルをscript(スクリプト)と言います。scriptは演劇などの台本という意味なのでそのままですね。台本通りに”黒い画面”が動いてくれるわけです。phpプログラムの事をphpスクリプトと言ったりすることがありますが、program(プログラム)も予定表・計画表という意味なので殆ど同じ意味です。
ただ一点、shという謎のプログラムにファイルを渡して実行するという書き方がどうも野暮ったいです。lsみたいに自分の書いたスクリプトもコマンドっぽく実行したいところです。
謎のおまじない”シバン”
“黒い画面”にはスクリプトを単体で実行するためにshebang(シバン)という機能があります。
#!/bin/sh
echo hello上記をecho-helloというファイル名で保存して実行してみてください。
$ chmod u+x echo-hello
$ /Users/komagata/echo-hello
hellochmodはChenge MODeの略でファイルの権限を変更するコマンドです。echo-helloというファイルにユーザー実行権限(u+x)を追加しています。
shebangとは1行目の最初の2文字
#!の事です。sharp bangが短くなってshebangとなったそうです。また、アメリカの俗語、the whole shebang(何もかも、一切合切)というのと掛けてるという説もあるそうです。シャープはわかります!が「バン！」って感じなのは日本人にはわかり辛いですね。でも#!の事を日本人は「シャープびっくり」と言ったりするので似たようなもんだと思います。
shebangは何なのかというと、
「”黒い画面”で実行しようとしたファイルの1行目の最初の二文字が#!だったら、その後に書いてあるコマンドに2行目以降の全てを渡す」
という機能です。
もう”黒い画面”を作った人がそうなるように作りましたという以外に説明しようがないそのままの機能です。確かに便利ですが、他にやりようは無かったのか疑問です。
このshebangを利用すれば様々なスクリプトを単体で実行できる独自のコマンドにすることができます。
phpもスクリプトをphpコマンドに渡すという点では全く同じなのでこうやって独自のスクリプトを作ることが出来ます。
しかし当然、普通のテキストファイルで、もしファイルの一行目最初の2文字が#!だったら、2行目以降を1行目のプログラムに渡して実行しようとします・・・。
もちろんfooなどというコマンドは無いのでエラーになります。interpreter(インタプリタ)というのはshやphpのようにスクリプトを実行する種類のプログラムのことです。
PATHを設定する
自分独自のスクリプトはどこに置けばいいのでしょうか。/binや/usr/binはシステムの動作に必要なコマンドを置く場所です。/usr/local/binは全ユーザー(例えばkomagataとmachida)で共有するようなコマンドなら置いても構わないでしょう。今回作ったような自分だけが使うようなスクリプトはホームディレクトリにbinというディレクトリを作ってそこに置く人が多いようです。
$ mkdir bin
$ mv make-lokka-zipfile bin/置きました。しかし/Users/komagata/binは以前説明したPATHに含まれてないのでいちいちフルパスで打つ必要があって不便です。そこで自分でPATHを設定してみましょう。
$ export PATH=$PATH:~/binexportは環境変数を設定するコマンドです。envコマンドの出力結果のように環境変数名と中身を=(イコール)で区切って渡すとその値に設定されます。
~/binというのは妙ですね。これは$HOME/binと同じ意味です。”黒い画面”では$HOMEを~(チルダ)一文字で表すことができます。
環境変数PATHは:(コロン)で区切ってディレクトリ名をつなげたものでした。上記は”今までPATHに設定されてたものに~/binを追加する”という意味になります。
$ echo $PATH
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/Users/komagata/binechoで確認するとちゃんと/Users/komagata/binがPATHに追加されているのがわかります。
$ make-lokka-zipfileこれで自分独自のスクリプトがまるでコマンドのように使えるようになりました。便利ですね。
面倒な手順や覚え辛いオプションの組み合わせなどはスクリプトにしてしまいましょう。
作業を自動化して差をつけろ
今回覚えたように”黒い画面”で行う処理は簡単にスクリプトにすることができます。スクリプトを書いておけば2度目は自動的に一瞬で作業が終わるので仕事の効率化に役立ちます。
以前、イベントのサイトを作る仕事がありました。イベントで撮った写真を次の日にはサイトに載せなければいけません。ところがその日のイベントの写真は600枚以上もあったのでとてもPhotoshopで一つ一つ縮小・形式変換していては間に合いません。
そこでImageMagickというソフトのconvertというコマンドを使って、フォルダ内のファイル全てをリサイズして変換するというスクリプトを書いて、数十分で処理を終わらせました。そしてイベントがあるたびにそのスクリプトを実行すればいいようになったのでとても助かりました。
ImageMagickはもちろんhomebrewでインストールできます。
$ brew install imagemagickこのように”黒い画面”は自動化ととても相性がいいのです。
