iOS技術者がWordpressでアプリ公式ページを制作したら

2018年4月8日日曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

ご無沙汰してます。

個人開発している todayeeというiOSアプリの公式ページを公開しました。


モバイルファーストにしたので PCで見るとメニューが煩かったり、中身がスカスカなのはご愛嬌。以前にもアプリのサイトを HTMLで作ったことがありますが、WordPressで制作したのは初めて。

そこで今回 WordPressによるサイト作りで使用したテーマや、素材、AWSで組み立てたインフラなどの情報を共有して行こうと思います。
  1. Wordpress
  2. 素材(写真とアイコン)
  3. インフラ(AWS)
  4. 期間と費用
個人開発者などでこれからランディングページなどを作る人の参考になれば。



WordPress


何はなくともテーマ


非デザイナが WordPressでホームページを作る際に一番重要だと思うのはテーマの選定。私はホームページデザイナでは無いし、一からCSSやHTMLを書くほどの根性もセンスも無い。そんな訳でまずはテーマを探した。

ネットで "wordpress theme" で探すと有料から無料まで様々なものがある。印象としては海外のサイトで $30-50くらい出せば良質なものが手に入る感じ。英語の壁はあるがそもそも WordPress標準の仕組みに沿ったものなので、触っていればなんとかなるかと。国内のテーマは種類があまり無いか、価格が高いイメージ。

探した時の基準は次の通り。
  • 今風(フラットデザイン、大きな画像タイトル)
  • モバイルファーストなデザイン(レスポンシブルは当たり前として)
  • 安価(買い切り、無料であればなおいい)
色々探して最終的には Illdy というテーマに決めた。無料な上になかなか良いデザイン。




Wordpressテーマ Illdy


colorlib. が提供している WordPressテーマ。大枠のデザインが決まっていて、設定画面でパラメータを調整してページレイアウトを決めていく。


サイトの構成


WordPressで言う固定ページが基本となる。

 トップページ(固定ページ)
   |--- アプリ1解説ページ(固定ページ)
   |--- アプリ2解説ページ(固定ページ)
   |---    :
   |--- 新着ページ(投稿)

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


Wordpressサーバの運用インフラには、AWSのVPSサービスであるLightsailを利用した。数クリックで Wordpressサーバが新規に立ち上がって月 $5から利用可能。SSHでログインしてサーバのカスタマイズもできるという優れもの。地味で人気はなさそうだが個人的にはお気に入り。EC2を使わずに Lightsailを選んだのはランニングコストが安いから(もう一つ付け加えるなら管理が簡単だから)。


Lightsailは他の AWSサービスと少し毛色が変わっていて、管理コンソール(WEB画面)も独自のデザインになっている。

サーバ(インスタンス)の管理のほか、ネットワーク管理(静的IPも取れる、DNSゾーンも作れる、簡易なFirewall、ロードバランサー )、ストレージ管理、スナップショット管理など、Lighsail向けに一通りの機能が専用で提供されている。

通常 AWSでシステムを組もうとすると EC2 や Route53, ELB,... など様々なサービスを横断して使いこなす必要があり小さなシステムでは結構面倒。この点 Lightsailはその中だけで全部完結できるようになっているので今回のように1台のホームページサーバを立てるケースでは十分だし使いやすい。もちろんできることは限られるけど。

Ubuntu + Bitnami


今回は簡易に Lightsailのテンプレートから Wordpressを選んでインスタンス(仮想サーバ)を立ち上げた。

このテンプレートを選ぶと Ubuntu + Bitnamiをベースに構築された Wordpress環境が簡単に立ち上がる。この点非常にお手軽で楽できるのだが、デメリットもあって ApacheやMySQLなどのミドルウェアは Bitnamiが独自のディレクトリに展開していて、OS標準のバージョンアップの仕組みが使えない。また Bitnami自体ミドルウェアのアップデートは考えられていないようで、仮にやるとしても自分で上書きするなど結構面倒のようだ。

もしセキュリティ面もキッチリ本格的に運用するとしたら OSだけが入ったテンプレを選び、自分で ApacheやMySQL、そして Wordpressを入れるのが良い。OSのパッケージを使えば、毎日自動的にアップデートを掛けることができる(再起動は自分でやる必要はあり)。

と、偉そうに言っているが自分のところはまだできてない(汗)。後日やりたい。

SSL証明書 - Let's Encrypt


世の中の流れはデフォルト SSL/TLSになってる(検索サイトもブラウザも)。なのでこのサイトでも最初からSSL/TLS証明書を仕込んだ。一昔前であれば個人用途のページなら格安 SSL証明書を探してインストール、というのが定番だったけれど今は証明書の無償化も進んでいてそこそこ信頼できるものが使える。今回はその一つである Let's Encryptを試しに使ってみた。



日本語ページも非公式ながらあるので、これが使える。




上記より引用
Let's Encrypt は、認証局(CA)として「SSL/TLSサーバ証明書」を無料で発行するとともに、証明書の発行・インストール・更新のプロセスを自動化することにより、TLS や HTTPS(TLSプロトコルによって提供されるセキュアな接続の上でのHTTP通信)を普及させることを目的としているプロジェクトです。2016年4月12日 に正式サービスが開始されました。
非営利団体の ISRG (Internet Security Research Group) が運営しており、シスコ(Cisco Systems)、Akamai、電子フロンティア財団(Electronic Frontier Foundation)、モジラ財団(Mozilla Foundation)などの大手企業・団体が、ISRG のスポンサーとして Let's Encrypt を支援しています。
メリットは怪しくない CA発行の証明書が無償で使えること。
# Let's Encryptではなんと今年からワイルドカード証明書がサポートされるようになった。
# いよいよ大小問わず(ドメイン認証版の)SSL証明書販売のビジネスモデルは終わりに向かいそう。

と、良い事ばっかりのようだが制限もいくつかあって、その中でも一番大きいと思われるのは有効期限が3ヶ月しかないところ(セキュリティリスクの低減上は逆にメリット)。ただし、専用のソフト「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とファイルのバックアップ)。

インスタンスバックアップ


それとは別に Lightsailのスナップショットを手動で取っている。これはコンパネ(WEB画面)を使うとワンクリックでポチるだけ。
インスタンスごとにスナップショットの履歴を一覧してくれるので、EC2より超わかりやすい。

先月までの制作途中では、1日の終わりや区切りの良いところでその都度手動でスナップショットを取っていた。実際、JavaScriptが原因で画面が正常に出なくなった時などに元に戻すことができて重宝した。Lightsailインスタンスのスナップショット
はEC2同様に AWSのLambdaでスクリプトを組めば自動での取得もできるが、自分の場合はそこまでは要らないのでやってない。ワンクリックでスナップショットが取れるのは本当に楽。

二重化はやってない


アクセスはほとんど来ないのでまず落ちることは無い。スナップショットも適当に取っているので、いざとうときはそれで戻す。仮に二重化の必要が出るほどアクセスが来るようなら Lightsailは卒業して EC2 + ELB + RDSとかが良いかと(あるいはいっそのこと WordPressのホスティングサービスへ)。

独自ドメインの取得とDNS


todayee.jp を取得。昔から利用しているムームードメインで取った。
jpドメインは 初回 2,840円、1年更新 3,040円なり。




DNSサーバはムームードメインではなく、LightsailのDNSゾーンを使う。

Lightsailはその中でDNSサーバを使うことができて、専用のゾーンが作れる。AWS の Route53を開く必要はない(これも楽ちん)。


期間と費用


最後にかかった期間と費用(外部へ支払う分)をまとめておく。

期間


1人で3ヶ月くらい(2018年1〜3月 / 朝と夜の隙間時間に少しづつ制作)

初期費用


テーマ代   0円
  画像代    0円
  アイコン代  0円
  ドメイン取得 2,840円(todayee.jp)
  証明書代   0円
  インフラ構築 0円  (自分で構築)
  制作代    0円  (自分で制作)
  --------------------------------
         2,840円

月費用


  サーバ代  $5(約 530円)

年費用


  ドメイン更新  3,040円
  証明書更新   0円
  サーバ代    約 530 x 12ヶ月 = 約 6,360円
  ---------------------------------------------
        約 9,400円


初期費用が3千円弱、ランニングコストは1年間で1万円弱。これらが外部へ支払うコストになる。うちのような零細サイトだとドメイン代が意外に馬鹿にならない。

サーバ代はWordPressのホスティングサービスに任せた方が手間とか考えると安いかも。ただし証明書と独自ドメイン利用が無料でないと高くつく。

自分の場合、AWSの経験があるので構築作業は苦では無かった(むしろ楽しい)。Lightsailの使用感は基本的なところは EC2と同じ。サーバ内の自由度も高いので分かる人はこっちの方が融通が利いて安く上がるかと思う。


あとがき


結構時間が掛かってしまったがとりあえず完成できてホッとしています。

今の一番の問題は全くアクセスが無いこと。
毎日のユーザ数は1桁台。。。
# いわゆる無人島でお祭りをやっている状態

アクセスを増やす施策は今後行っていくので、もしアクセスが上向くようならそれをネタにブログを書きます。正直言うとこの記事もアクセスやSEOの一助になればと思いつつ書いてます :-P


それではまた


人気の投稿(過去 30日間)