個人開発している todayeeというiOSアプリの公式ページを公開しました。
モバイルファーストにしたので PCで見るとメニューが煩かったり、中身がスカスカなのはご愛嬌。以前にもアプリのサイトを HTMLで作ったことがありますが、WordPressで制作したのは初めて。
そこで今回 WordPressによるサイト作りで使用したテーマや、素材、AWSで組み立てたインフラなどの情報を共有して行こうと思います。
- Wordpress
- 素材（写真とアイコン）
- インフラ（AWS）
- 期間と費用
WordPress
何はなくともテーマ
ネットで "wordpress theme" で探すと有料から無料まで様々なものがある。印象としては海外のサイトで $30-50くらい出せば良質なものが手に入る感じ。英語の壁はあるがそもそも WordPress標準の仕組みに沿ったものなので、触っていればなんとかなるかと。国内のテーマは種類があまり無いか、価格が高いイメージ。
探した時の基準は次の通り。
- 今風（フラットデザイン、大きな画像タイトル）
- モバイルファーストなデザイン（レスポンシブルは当たり前として）
- 安価（買い切り、無料であればなおいい）
Wordpressテーマ Illdy
サイトの構成
トップページ（固定ページ）
|--- アプリ１解説ページ（固定ページ）
|--- アプリ２解説ページ（固定ページ）
|--- ：
|--- 新着ページ（投稿）
|--- 新着ページ（投稿）
Illdyで細かくカスタマイズできるのはトップページ。ここは専用の設定画面が用意されていてパラメータの設定はもちろん、文章や画像の設定がここからできる。
他のページは WordPress標準の固定ページ編集を使う。ニュースリリースなどの新着ページは、本来のブログ向け機能である投稿を使う。
トップページ内のコンテンツは複数の "Section" から構成されている。Sectionごとに画面上からパラメータを設定したり、配置順序を決められる。
Sectionによってはその中にさらに "Widget" というコンポーネントがあって、複数並べることができる。例えば、以下は"Projects Sidebar"という Section内の ProjectというWidgetを複数作って並べてある。
標準で用意されているコンポーネントはこんな感じ。
必要なカスタマイズはそこそこできて大きく困ることは無かった。気になったのはやたらと余白が多い印象で、それを無くすのに画像を工夫したりCSSを書いたりしたところがあった（※CSSを入力できる設定がちゃんとあるし、大体の場所でHTMLで書くことができる）。ある程度試行錯誤を繰り返すと、何ができて何ができないかがわかるので、そこまで来たらあとは中身の文章と画像をひたすら書くだけ。
素材（写真とアイコン）
プロ（もしくはプロ並み）の写真が利用できる Unsplash
カバー画像の写真は下記サービスを利用した。このサイトを知ったときは衝撃的で一時期ここの写真利用がマイブームになったほど（？）。今年一番のお気に入り写真サイト。
何が衝撃的かというと、商用利用が無料であるにも関わらず非常に高品質でセンスの良い写真が大量に揃っているところ。ぜひサイトへ行って写真を見て欲しい。
↓ 私が todayee用に集めたコレクションを晒す
クオリティの高い写真を利用するだけで、大したことの無いアプリでも「おッ」と思えるから不思議。
例えばこんな感じ。
アプリはイマイチでも何だか雰囲気が出てる（そうやって見る人に錯覚を起こさ××）。
ライセンスは商用に関わらず無料で利用可。利用にあたっては必ず下記を参照のこと。
あらゆるアイコンが揃う Icons8
（自分の中で）定番の Icons8 を利用。アプリ開発でもよく使わせてもらっている。
昨年日本語ページがオープンした。ただ日本語キーワードでの検索ヒットは限定的なので利用する際は英語で探すのが良い。
今回は無料ライセンスを使用（Icons8へのリンク掲載が必須）。以前は買い切りのプランだったと思うが、昨年あたりから月 $19.9のサブスクリプションモデルになっていた。有償だと上記のようにサイズ制限がない他、様々な特典がある。
アイコンは本当にたくさんある。選ぶのに迷うくらい。フラット系の iOS、Android、Windows10や、色付きアイコンといった Stylesあって、それぞれの用途にあったアイコンだけピックアップできるのが地味に便利。ホームページでは見出しのアイコンにここの素材を使っていて、単色系（Stylesは iOS）を中心にピックアップした。単色系だとあらかじめ右ペインで色を指定しておけば、その色に加工されたアイコンをダウンロードすることができる。地味に便利。
インフラ（AWS）
AWS Lightsail
サーバ（インスタンス）の管理のほか、ネットワーク管理（静的IPも取れる、DNSゾーンも作れる、簡易なFirewall、ロードバランサー ）、ストレージ管理、スナップショット管理など、Lighsail向けに一通りの機能が専用で提供されている。
通常 AWSでシステムを組もうとすると EC2 や Route53, ELB,... など様々なサービスを横断して使いこなす必要があり小さなシステムでは結構面倒。この点 Lightsailはその中だけで全部完結できるようになっているので今回のように１台のホームページサーバを立てるケースでは十分だし使いやすい。もちろんできることは限られるけど。
Ubuntu + Bitnami
このテンプレートを選ぶと Ubuntu + Bitnamiをベースに構築された Wordpress環境が簡単に立ち上がる。この点非常にお手軽で楽できるのだが、デメリットもあって ApacheやMySQLなどのミドルウェアは Bitnamiが独自のディレクトリに展開していて、OS標準のバージョンアップの仕組みが使えない。また Bitnami自体ミドルウェアのアップデートは考えられていないようで、仮にやるとしても自分で上書きするなど結構面倒のようだ。
もしセキュリティ面もキッチリ本格的に運用するとしたら OSだけが入ったテンプレを選び、自分で ApacheやMySQL、そして Wordpressを入れるのが良い。OSのパッケージを使えば、毎日自動的にアップデートを掛けることができる（再起動は自分でやる必要はあり）。
と、偉そうに言っているが自分のところはまだできてない（汗）。後日やりたい。
SSL証明書 - Let's Encrypt
日本語ページも非公式ながらあるので、これが使える。
上記より引用
Let's Encrypt は、認証局（CA）として「SSL/TLSサーバ証明書」を無料で発行するとともに、証明書の発行・インストール・更新のプロセスを自動化することにより、TLS や HTTPS（TLSプロトコルによって提供されるセキュアな接続の上でのHTTP通信）を普及させることを目的としているプロジェクトです。2016年4月12日 に正式サービスが開始されました。メリットは怪しくない CA発行の証明書が無償で使えること。
非営利団体の ISRG (Internet Security Research Group) が運営しており、シスコ（Cisco Systems）、Akamai、電子フロンティア財団（Electronic Frontier Foundation）、モジラ財団（Mozilla Foundation）などの大手企業・団体が、ISRG のスポンサーとして Let's Encrypt を支援しています。
# Let's Encryptではなんと今年からワイルドカード証明書がサポートされるようになった。
# いよいよ大小問わず（ドメイン認証版の）SSL証明書販売のビジネスモデルは終わりに向かいそう。
と、良い事ばっかりのようだが制限もいくつかあって、その中でも一番大きいと思われるのは有効期限が３ヶ月しかないところ（セキュリティリスクの低減上は逆にメリット）。ただし、専用のソフト「Certbot」が用意されていて、これを仕込めば自動的に更新ができる。多くのディストリビューションに対応していてインストールも日本語サイトをみれば難しく無い。
（参考）Let's Encrypt の使い方
この点、SSHが使えて好きにソフトをインストールできる環境でないと Let's Encryptは実質使えないかと。※Lightsailは SSHでrootログインできるので問題ない
他の制限としては対応しているのが「ドメイン認証(DV)証明書」だけという点。「企業認証(OV)証明書」や「EV証明書」には対応していない。小規模利用だとこの辺りは気にすることもないが。
なお Lightsailでもロードバランサーを入れれば AWSが発行する無償の証明書が使える（ただロードバランサー自体の利用料が月 $18かかる）。
WPバックアップ
コンテンツに関してはWordpressのプラグインを入れてサーバ内のバックアップを取っている。
入れたプラグイン：BackWPUp
毎日 3:00にバックアップを仕掛けてある。バックアップにかかる時間は 30-50秒くらい（DBとファイルのバックアップ）。
インスタンスバックアップ
先月までの制作途中では、１日の終わりや区切りの良いところでその都度手動でスナップショットを取っていた。実際、JavaScriptが原因で画面が正常に出なくなった時などに元に戻すことができて重宝した。Lightsailインスタンスのスナップショット
はEC2同様に AWSのLambdaでスクリプトを組めば自動での取得もできるが、自分の場合はそこまでは要らないのでやってない。ワンクリックでスナップショットが取れるのは本当に楽。
二重化はやってない
独自ドメインの取得とDNS
jpドメインは 初回 2,840円、１年更新 3,040円なり。
DNSサーバはムームードメインではなく、LightsailのDNSゾーンを使う。
Lightsailはその中でDNSサーバを使うことができて、専用のゾーンが作れる。AWS の Route53を開く必要はない（これも楽ちん）。
期間と費用
最後にかかった期間と費用（外部へ支払う分）をまとめておく。
期間
１人で３ヶ月くらい（2018年1〜3月 / 朝と夜の隙間時間に少しづつ制作）
初期費用
画像代 0円
アイコン代 0円
ドメイン取得 2,840円（todayee.jp）
証明書代 0円
インフラ構築 0円 （自分で構築）
制作代 0円 （自分で制作）
--------------------------------
2,840円
月費用
サーバ代 $5（約 530円）
年費用
ドメイン更新 3,040円
証明書更新 0円
サーバ代 約 530 x 12ヶ月 = 約 6,360円
---------------------------------------------
約 9,400円
初期費用が３千円弱、ランニングコストは１年間で１万円弱。これらが外部へ支払うコストになる。うちのような零細サイトだとドメイン代が意外に馬鹿にならない。
サーバ代はWordPressのホスティングサービスに任せた方が手間とか考えると安いかも。ただし証明書と独自ドメイン利用が無料でないと高くつく。
自分の場合、AWSの経験があるので構築作業は苦では無かった（むしろ楽しい）。Lightsailの使用感は基本的なところは EC2と同じ。サーバ内の自由度も高いので分かる人はこっちの方が融通が利いて安く上がるかと思う。
あとがき
今の一番の問題は全くアクセスが無いこと。
毎日のユーザ数は１桁台。。。
# いわゆる無人島でお祭りをやっている状態
アクセスを増やす施策は今後行っていくので、もしアクセスが上向くようならそれをネタにブログを書きます。正直言うとこの記事もアクセスやSEOの一助になればと思いつつ書いてます :-P
それではまた
Responses
Leave a Response