static

最近よくGitHubをウロウロしては、デザインテロをするのにいいアプリはないかと探してるのですが、なかなかないですよね。RubyのGemとかはいくらでもあるんですが、Happy1000Days!やフィヨルドのサービスのような、それ単体で動くWebアプリを公開してる人がなかなか見つからない。何かいい検索の仕方があったら教えていただきたいです。

静的ページのデザインテロ

久しぶりにデザインテロしました。今回のターゲットは「Remember the WordPress」っていうWordPressのPlugin。その説明とダウンロードへのリンクが置いてあるっていうペラ一（イチ）の静的ページ。前回やった、「デザイナーもHerokuを使ってみよう！Herokuを使って静的ページを無料で作る」を使ったデザインテロです。Herokuにpushするだけで静的ページが公開されるっていう便利アプリを使ったやつです。

アプリを紹介するページを作る

アプリの紹介ページを作るっていうのはなかなかデザインテロ活動としても有益なんじゃないかなぁ、って思いました。作るのは静的ページでいいから、ローカルでアプリを動かす手間もいらないし。そんなの作って意味あるの？って思う方もいるかもしれませんが、こういうページって実際結構大事なんですよ。

例えば、いつもKURIGAMENで使ってるRubyのGemの「bundler」。これ、こんなページが用意されてるんですよね。

格好いい！使いたくなってきますよね。

あとはKUROIGAMENで採用しているMacのPackage Manager、「Homebrew」のページはこれ。

うーん、こっちも格好いい！

こんな感じで、イケてるアプリにはイケてる紹介ページがあったりして、「使ってみたい！」って思わせてくるんですよね。こんなのどうでもいい、実際の使い勝手や性能が重要だ、って思う方もいるかもしれないけど、逆に、いくら性能が良くてもこんなダサいのを自分のマシンに入れたくないなぁ、って思う人もいるはず。KUROIGAMENはそちら側の味方です。っていうか、「こんなダサいのを自分のマシンに入れたくないなぁ」って思ったんなら、自分でそこをHackしてやろう、ってのがKUROIGAMENのコンセプトです。

Remember the WordPressとは？

実はこのPlugin、仕様は僕が考えたんですよね。Help me, hackers!っていうフィヨルドがやってるサービスがあるんですが、そこに僕がこんなPluginあったら便利じゃない？って投稿したところ、terakumaさんが見事作ってくれました。いくら議論を重ねたってそんなものは成果物の前では全く無力なんだなぁって思っちゃいますね。格好いいよ、terakumaさん！

ちなみにterakumaさんはe2esound.comという屋号でwebサイト制作、システム構築をやられているエンジニアさんです。あと、法律関係に詳しいです。

それにしても、こんなカタチで成果物を出されちゃったら、WordPress関係の仕事の依頼が来たらterakumaさんにお願いしよう、って気になりますよね。飲み会で知り合って話が面白かったから、とか、Twitterで絡んで面白かったから、ってだけで仕事を依頼したり、貰ったりするのはどうなぁ、って僕個人としては思っちゃう派です。友達になるのは全然OKなんですが、仕事となるとやっぱりいい成果を残すために、ブログを見たり、成果物を見たりした上でお願いしたいところです。なので、成果物を公開しない、ブログを書いてない、でも仕事欲しい、って人もたまに見ますが、うーむ…。

下請けの下請けみたいな仕事ばっかりやってて公開できない成果しかないっていうデザイナーにもデザインテロはおすすめです。

…と、話が大分逸れちゃいました。

Remember the WordPressの仕様

Help me, hackers!に僕が投稿した仕様を書いておきます。

例えば、「お店のスタッフの顔が見えるホームページ」というコンセプトに従い、コンテンツの一つとして「ブログ」を設置。

ところが全くそのブログが更新されず、顔が見えるどころか閉店してしまっているのでは、とサイトの訪問者に誤解を招くような結果に・・・。

そのお店の店長は、「インターネットのことは若いもんに任せてるから」と、売り上げるを上げる為に作ったせっかくのホームページが逆効果を生んでいることは露知らず。

なんてことが起きるのを防ぐために、任意の期間ブログが更新されなかったらメールで通知がくる、っていうPluginってちょっと需要あるんじゃないかなぁ、って思いました。

仕様

• 管理画面で通知するメールアドレスを入力できる
• 管理画面で何日更新されなかったら（新規投稿がなかったら）通知するかの期間が選択できる
• 通知されるメールの文章を管理画面から入力できる

うーん、なんて泥臭い機能なんだろう。

Remember the WordPressのデザインプロセス

このPlugin、なかなか厳しい機能ですよね。ブログが更新されていないってことを上司にチクるっていうものですから。

さてさて、じゃあって言うんで鬼の画像を用意して筆文字で「Remember the WordPress」なんて書いたようなものを載せたデザインを用意したら、まぁ、これはこれでわかりやすけど、ちょっと好かれないようなぁ、っていうか僕の好みの問題もあるけれど、ちょっと違うなぁ、って思いました。

こんなじゃなくて、WordpPressが「私のこと忘れないで」って言ってくる感じ。その擬人化させたWordPressはきっと小さな女の子なので（おっと、段々変態妄想へ）、機械っぽいのとは真逆、裏で擬似cronが動いているとかは放っておいて、テクスチャを使ったりしてオーガニックな感じにしたいなぁ、と。

お気づきの方がほとんどだと思いますが、「Remember the WordPress」ってRemember The Milkをパロったネーミングなので（命名はterakumaさん）、牛乳の絵を添えました。メールでお知らせが来るので手紙も添えて、ちょっと悪ノリして牛のペーパーウエイトも。赤っぽい差し色が欲しかったので、手紙の封は赤いWordPressロゴを付けました。

そんなこんなで、出来たのがこれ。

なかなか可愛いのが出来ました。

追記

terakumaさんが公開してくださいました！

Remember the WordPress

ブログにも取り上げていただきました。

デザインテロの被害にあいました

ありがとうございますー！

• heroku
• rememberthewordpress
• static

こんにちは、町田です。

今まではローカルでゴニョゴニョやって、自分のマシン内で立ち上がって完了、ってところまでをゴールしてやってましたが、今回は自分で公開するところがゴールです。こそこそ連載を続けてるKUROIGAMENもやっとここまで進みました。

もう静的ページを作るのに金は払わない

はい、すごいのはここです。もうこれからは静的ページを作るのにお金を払う必要はなくなります。なぜなら、Hreroku（ヘロク）というサービスを使うからです。Herokuを使えば無料で静的ページが作れてしまいます。

Herokuとは？

PaaS（Platform as a Serviceの略、パースまたはパーズ）と呼ばれてるクラウドのジャンルの一つで、アプリケーションを動かす場所を提供するクラウドです（よく聞くSaaSはサービスを提供するクラウド、PaaSはプラットフォームを提供するクラウド）。Google App EngineもPaaSです。

Google App Engineはjava、Pythonで出来たアプリを動かすためのPaaSなのですが、今回使うHerokuはRubyで出来たアプリを動かすためのPaaSです。PaaSと言ってもそのアプリが何の言語で出来てるのかによって、どれを使うのかが変わってきます。

Herokuを使えばRuby製のアプリを無料で公開することができます。今回やるのは静的ページですが、前に紹介したRuby製のCMS LokkaとHerokuの組み合わせを使えば無料で自分のブログを持てちゃいます。Wordpressとさくらの500円サーバでも十分安いと思ってたのに、Lokkaは無料なんて、すごい！このKUROIGAMENもLokkaとHerokuの組み合わせなので無料で運営しちゃってます。

Lokkaの他にもHappy1000Days!もそうだし、僕がやってる会社、合同会社フィヨルドのサービスもOSSとしてgithubに公開しているんですが、全部Rubyで出来てるので、それらもHerokuを使って無料で公開できちゃいます。

無料とは言っても、PaaSは重量課金です。転送量や使う容量、DBの容量が多い場合はお金を請求されます。まぁ、今回作るのは単なる静的ページなので、DBも必要ないし、そこまでPVもないと思うので「無料」と言ってしまいましたが、Herokuを使うのは一応自己責任で。

なんで静的ページなのにわざわざPaaSを使うの？

別に静的ページだったら広告やSEOのためのリンクが出る無料サーバーでいいじゃん、って思う方もたくさんいるかと思います。確かにそうです。ただ、自分の静的ページ置き場がPaaSって格好良くね？ってだけです。あと、広告も出ないし。

それと、Gitばっかり使ってるとFTPを使うのが面倒になってくるんですよね。バージョン管理されてないから怖いし。黒い画面をやってると、そっちの方が安心するんですよ。FTPってミスしそうで怖い。

あとは、これからKUROIGAMENでRubyで出来たアプリを公開するのにHerokuを使うことが多くなってくると思うので、その練習として静的ページをHerokuで公開するってのはちょうどいい課題かなぁ、と思って選んだってところです。

Herokuに登録

まずはHerokuに行ってユーザー登録をします。なんだかダークでアングラ臭のするサイトかもしれませんが、よく見ると色んなところでデザインが凝っててなかなか参考になります。「Sign Up」ボタンをクリック。

入力するのはメールアドレスだけ。Herokuから届いたメールを開くとURLが載ってるのでそれをクリック。移動したページでPasswordを二回入力するだけで登録完了！なんて楽ちん。この手軽さは自分でサービスを作るときも見習いたいですね。

herokuコマンドをインストール

続いて、Herokuを使うにはherokuっていうコマンドを使えるようにherokuコマンドをインストールする必要があります。黒い画面で「heroku XXXXX」って感じでコマンドを打って、ローカルで作ったLokkaやHappy1000Days!や今回の静的ページをHerokuサーバーに送ります。FTPの代わりにHerokuコマンドを黒い画面で使う、って感じです。

herokuコマンドのインストール方法は簡単。HerokuのトップページのCreateのところに書いてありますが、「sudo gem install heroku」っていうコマンドを打つだけ。HerokuはRubyのアプリ置く専用のサーバなので、herokuコマンドもRubyのGemなんですね。では、早速。

$ sudo gem install heroku

はい、出来ました。GemのインストールもHmebrewでやる「brew install XXXX」と同じで依存しているGemも一緒にインストールしてくれます。今回はherokuっていうGemをインストールした訳ですが、それが依存する色々なGemも一緒にインストールされました。

静的ページを動かすためのアプリをgit clone

一旦ここでHerokuの作業は中断。Herokuで公開する静的ページの作成に入ります。

@komagataさんが作ってくれたHerokuで静的ページを公開できるアプリ（と言ってもファイル数の少ないシンプルなものです）を毎度おなじみ、Githubからgit cloneします。今回Herokuにアップする静的ページを公開するアプリの名前を「kuroigamen-sandbox」と名付けました。

ちなみにこの「kuroigamen-sandbox」はSinatraっていうRubyのフレームワークで出来てます。Railsよりもお手軽なフレームワークで、ちょっとしたものを作るのに便利ってことをよくRubyをやってるエンジニアさんから聞きます。そうそう、LokkaもSinatraで出来てます。

ちょっと、cloneする前に。

僕はいつもアプリやサイト開発は「/Users/ユーザー名/Sites」（Finderで見ると「ユーザ/ユーザー名/サイト」とカタカナ表示されてる）のディレクトリで作業をしていますので、これからKUROIGAMENでもそうしていこうと思います。なので、

$ cd Sites/

と、「Sites」ディレクトリに移動。

今回のアプリのページはここです。今回の取ってくるリポジトリは「git@github.com:machida/kuroigamen-sandbox.git」。

$ git clone git@github.com:machida/kuroigamen-sandbox.git XXXXXX

「XXXXXX」に入れた名前がフォルダ名になって、その中にkuroigamen-sandboxの中身が入ります。僕の場合は「machida-sandbox」っていう名前で作りました。

はい、出来ました。

公開する静的ファイルをアプリに入れる

では、cloneしたアプリの中身を見てみましょう。

このpublicフォルダ以下に公開したい静的ファイルを入れます。

こんな感じで「index.html」と、フォルダ「stylesheets」を作って、その中に「style.css」を入れて、

こんな静的ページを作りました。これで公開する準備はOK。

Herokuにリポジトリ置き場を登録

ではでは、またHerokuに戻ります。

先程herokuコマンドをインストールしてherokuコマンドが使えるようになったので、それを使って今回作る「sandbox」を公開する場所を登録します。

ここで一旦、HerokuとGithubは似てるので、両方の似たところと違うところを並べてHerokuを説明してみたいと思います。

• HerokuもGithubもgitのリモートリポジトリを作るサービス。
• ローカルリポジトリをリモートリポジトリであるHerokuまたはGithubにpushすることで、自分のマシンでゴニョゴニョやってたことを外に出すことができる。
• どちらもリモートリポジトリなんだけど、Githubの方はそこにpushすることでソースが公開される。
• 一方、Herokuの方はそこにpushすることでアプリが公開される。つまり、URLを持ったサービスとしてアプリが立ち上がる。

という感じで、外のリポジトリにpushするのは一緒なんですが、目的が違うんですよね。

では、早速Herokuにリモートリポジトリ置き場を作りましょう。

まずは黒い画面でローカルの「machida-sandbox」へ移動します。僕の「machida-sandbox」は「Sites」の中にあるので、

$ Sites/machida-sandbox

で、移動完了。

いよいよherokuコマンドの登場です。トップページ左上のCreateってところにあるコマンド、「heroku create XXXX」と打つだけ。このXXXXには好きな名前をつけることができ、それが公開されるときのURLにもなります。例えば、「heroku create shimuraken」と打ったなら、そのHeroku内のリポジトリに置かれたアプリは、http://shimuraken.heroku.comというURLで公開されます（その後で自分で取得したドメインに切り替えることも可能です）。今回僕は「machida-sandbox」という名前のリポジトリ置き場をHerokuに作ります(※Heroku上では同じ名前のものは作れないので、これを読んでる皆さんは別の名前で登録してください）。

$ heroku create machida-sandbox

すると、

Git remote heroku added

って表示が出ました。これでHeroku上のリモートリポジトリに「git push」が出来るようになった、ということです。

もしかしたら、最初の一回目はメールアドレスとパスワードを聞かれるかもです。ちょっと前のことなので忘れてしまいました…。聞かれたら、入力してください。あと、これでいい？みたいなことも聞かれるかもです。

ブラウザでHerokuのページの右上にあるMy Appsをクリック（もし表示されてなかったらHerokuにログインしてから）。ここにHeroku上の自分のリモートリポジトリの一覧が表示されます。先ほど作った「machida-sandbox」が表示されました。

「machida-sandbox」をHerokuにデプロイ。

さて、作った静的ページをHerokuにアップします。人が見れるところにアップすることをエンジニアはデプロイって呼びます。デプロイ、なんか格好いいですね。「やっとバグが直ったし、テストもOKでした。ではでは、本番にデプロイしまーす。」みたいな感じで使います。

ファイルを一気に追加してみましょう。

$ git add *

強引ですが、これで一気にディレクトリ「machida-sandbox」以下のファイルを追加できます。追加の作業が終わったらコミット。

$ git commit -a -m"added files"

トップページの左上に「deploy」っていうのがありますね。ここにデプロイの方法が書いてあります。書いてある通りにやってみましょう。

$ git push heroku master

これだけ。コミットしてこのコマンドを打つだけでOKなんですよね。FTPより全然楽チンだし、安全。

これを打ったら、

The authenticity of host 'heroku.com (75.101.145.87)' can't be established.
RSA key fingerprint is 8b:48:5e:67:0e:c9:16:47:32:f2:87:0c:1f:c8:60:ad.
Are you sure you want to continue connecting (yes/no)? 

って聞かれるかもです（すいません、ちょっとこの辺は環境によって変わるかもで、そこは未確認）。もし聞かれたら、「ここ信用できるの？ここに繋いじゃっていいの？」って言う感じですね。答えは「yes」ですので、yesと打ってEnterキー。僕の場合、ちょっとその画面のままかなり長時間放ったらかしにしてしまったので、エラーが出てしまいました。もう一回、「$ git push heroku maste」を打ったらうまくいきました。

では、ちゃんと公開されてるか確認してみます。

URLはHerokuのサイトの右上、「My Apps」をクリックして、「machida-sandbox（自分で付けたアプリ名）」をクリック。そこで表示されたページにある、Heroku URLってところに書いてあります。

早速見てみると…

出来たー。

• git
• heroku
• ruby
• static