コメントTweetご無沙汰してます。todayeeというiOSアプリの公式ページを公開しました。PCで見るとメニューが煩かったり、中身がスカスカなのはご愛嬌。HTMLで作ったことがありますが、WordPressで制作したのは初めて。WordPressによるサイト作りで使用したテーマや、素材、AWSで組み立てたインフラなどの情報を共有して行こうと思います。個人開発者などでこれからランディングページなどを作る人の参考になれば。WordPressでホームページを作る際に一番重要だと思うのはテーマの選定。私はホームページデザイナでは無いし、一からCSSやHTMLを書くほどの根性もセンスも無い。そんな訳でまずはテーマを探した。探すと有料から無料まで様々なものがある。$30-50くらい出せば良質なものが手に入る感じ。WordPress標準の仕組みに沿ったものなので、触っていればなんとかなるかと。国内のテーマは種類があまり無いか、価格が高いイメージ。探した時の基準は次の通り。無料な上になかなか良いデザイン。WordPressテーマ。大枠のデザインが決まっていて、設定画面でパラメータを調整してページレイアウトを決めていく。サイトの構成WordPressで言う固定ページが基本となる。新着ページ(投稿)Illdyで細かくカスタマイズできるのはトップページ。ここは専用の設定画面が用意されていてパラメータの設定はもちろん、文章や画像の設定がここからできる。WordPress標準の固定ページ編集を使う。ニュースリリースなどの新着ページは、本来のブログ向け機能である投稿を使う。Sectionごとに画面上からパラメータを設定したり、配置順序を決められる。いうコンポーネントがあって、複数並べることができる。ProjectというWidgetを複数作って並べてある。標準で用意されているコンポーネントはこんな感じ。これをカスタマイズして行く。必要なカスタマイズはそこそこできて大きく困ることは無かった。気になったのはやたらと余白が多い印象で、それを無くすのに画像を工夫したりCSSを書いたりしたところがあった(※CSSを入力できる設定がちゃんとあるし、大体の場所でHTMLで書くことができる)。ある程度試行錯誤を繰り返すと、何ができて何ができないかがわかるので、そこまで来たらあとは中身の文章と画像をひたすら書くだけ。Unsplashカバー画像の写真は下記サービスを利用した。このサイトを知ったときは衝撃的で一時期ここの写真利用がマイブームになったほど(?)。今年一番のお気に入り写真サイト。Unsplash何が衝撃的かというと、商用利用が無料であるにも関わらず非常に高品質でセンスの良い写真が大量に揃っているところ。サイトへ行って写真を見て欲しい。todayeeで利用クオリティの高い写真を利用するだけで、大したことの無いアプリでも「おッ」と思えるから不思議。アプリはイマイチでも何だか雰囲気が出てる(そうやって見る人に錯覚を起こさ××)。ライセンスは商用に関わらず無料で利用可。利用にあたっては必ず下記を参照のこと。アプリ開発でもよく使わせてもらっている。Icons8昨年日本語ページがオープンした。日本語キーワードでの検索ヒットは限定的なので利用する際は英語で探すのが良い。今回は無料ライセンスを使用(Icons8へのリンク掲載が必須)。$19.9のサブスクリプションモデルになっていた。有償だと上記のようにサイズ制限がない他、様々な特典がある。アイコンは本当にたくさんある。Stylesあって、それぞれの用途にあったアイコンだけピックアップできるのが地味に便利。iOS)を中心にピックアップした。単色系だとあらかじめ右ペインで色を指定しておけば、その色に加工されたアイコンをダウンロードすることができる。LightsailWordpressサーバの運用インフラには、AWSのVPSサービスであるLightsailを利用した。SSHでログインしてサーバのカスタマイズもできるという優れもの。地味で人気はなさそうだが個人的にはお気に入り。Lightsailを選んだのはランニングコストが安いから(もう一つ付け加えるなら管理が簡単だから)。AWSサービスと少し毛色が変わっていて、管理コンソール(WEB画面)も独自のデザインになっている。)、ストレージ管理、スナップショット管理など、Lighsail向けに一通りの機能が専用で提供されている。様々なサービスを横断して使いこなす必要があり小さなシステムでは結構面倒。Lightsailはその中だけで全部完結できるようになっているので今回のように1台のホームページサーバを立てるケースでは十分だし使いやすい。できることは限られるけど。Wordpressを選んでインスタンス(仮想サーバ)を立ち上げた。Wordpress環境が簡単に立ち上がる。Bitnamiが独自のディレクトリに展開していて、OS標準のバージョンアップの仕組みが使えない。Bitnami自体ミドルウェアのアップデートは考えられていないようで、仮にやるとしても自分で上書きするなど結構面倒のようだ。Wordpressを入れるのが良い。OSのパッケージを使えば、毎日自動的にアップデートを掛けることができる(再起動は自分でやる必要はあり)。偉そうに言っているが自分のところはまだできてない(汗)。SSL/TLSになってる(検索サイトもブラウザも)。このサイトでも最初からSSL/TLS証明書を仕込んだ。SSL証明書を探してインストール、というのが定番だったけれど今は証明書の無償化も進んでいてそこそこ信頼できるものが使える。Encryptを試しに使ってみた。(letsencrypt.org)日本語ページも非公式ながらあるので、これが使える。HTTPS(TLSプロトコルによって提供されるセキュアな接続の上でのHTTP通信)を普及させることを目的としているプロジェクトです。正式サービスが開始されました。CA発行の証明書が無償で使えること。Encryptではなんと今年からワイルドカード証明書がサポートされるようになった。大小問わず(ドメイン認証版の)SSL証明書販売のビジネスモデルは終わりに向かいそう。良い事ばっかりのようだが制限もいくつかあって、その中でも一番大きいと思われるのは有効期限が3ヶ月しかないところ(セキュリティリスクの低減上は逆にメリット)。専用のソフト「Certbot」が用意されていて、これを仕込めば自動的に更新ができる。多くのディストリビューションに対応していてインストールも日本語サイトをみれば難しく無い。Encryptは実質使えないかと。SSHでrootログインできるので問題ない他の制限としては対応しているのが「ドメイン認証(DV)証明書」だけという点。「企業認証(OV)証明書」や「EV証明書」には対応していない。小規模利用だとこの辺りは気にすることもないが。WPバックアップコンテンツに関してはWordpressのプラグインを入れてサーバ内のバックアップを取っている。3:00にバックアップを仕掛けてある。30-50秒くらい(DBとファイルのバックアップ)。Lightsailのスナップショットを手動で取っている。これはコンパネ(WEB画面)を使うとワンクリックでポチるだけ。インスタンスごとにスナップショットの履歴を一覧してくれるので、EC2より超わかりやすい。先月までの制作途中では、1日の終わりや区切りの良いところでその都度手動でスナップショットを取っていた。実際、JavaScriptが原因で画面が正常に出なくなった時などに元に戻すことができて重宝した。AWSのLambdaでスクリプトを組めば自動での取得もできるが、自分の場合はそこまでは要らないのでやってない。ワンクリックでスナップショットが取れるのは本当に楽。二重化はやってないアクセスはほとんど来ないのでまず落ちることは無い。スナップショットも適当に取っているので、いざとうときはそれで戻す。WordPressのホスティングサービスへ)。昔から利用しているムームードメインで取った。ムームードメインDNSサーバはムームードメインではなく、LightsailのDNSゾーンを使う。Lightsailはその中でDNSサーバを使うことができて、専用のゾーンが作れる。Route53を開く必要はない(これも楽ちん)。最後にかかった期間と費用(外部へ支払う分)をまとめておく。初期費用が3千円弱、ランニングコストは1年間で1万円弱。これらが外部へ支払うコストになる。うちのような零細サイトだとドメイン代が意外に馬鹿にならない。サーバ代はWordPressのホスティングサービスに任せた方が手間とか考えると安いかも。証明書と独自ドメイン利用が無料でないと高くつく。自分の場合、AWSの経験があるので構築作業は苦では無かった(むしろ楽しい)。サーバ内の自由度も高いので分かる人はこっちの方が融通が利いて安く上がるかと思う。あとがき結構時間が掛かってしまったがとりあえず完成できてホッとしています。今の一番の問題は全くアクセスが無いこと。毎日のユーザ数は1桁台。いわゆる無人島でお祭りをやっている状態アクセスを増やす施策は今後行っていくので、もしアクセスが上向くようならそれをネタにブログを書きます。大幅にバージョンアップした。・スクウェア加工そのほかかなり手を入れて使い勝手を改善している。フォトレタッチライブラリを組み込んだ。このライブラリは高機能な上に使い勝手も優れていてなかなか良い。フィルタも豊富で触っていると結構楽しい。Adobe社のサービスからダウンロードして追加することもできる。みたところほとんどが無償で入手できる。IDを取得するとどの端末でも共通の設定に合わせることができるようだ。SDK組み込みはドキュメントの通りにすれば難しくはない。プロダクションリリースする前にはAdobe社の審査を通す必要がある(英語)。申請に必要な情報は多くないがいくつかの指定があるスクリーンショットは必須。今回は審査が通過するまで1回のNGを含めて4日かかった。言われたとおりにスクリーンショットを提出したら無事に通った。今回提出した最終的なスクリーンショットは次の通り。申請時に用意するスクリーンショットのポイントはこんな感じ。Connected"が表示されている箇所(フォトレタッチのツールバーにアイコンがあったのでそれが映るようにしてみた)なおこのアプリでは、フォトレタッチを初回に使う時にメッセージを出しておいた(キャンセルすると使えない)。...(後でややこしくならないように)。修正写真の扱いこのアプリでは修正後の写真をカメラロールへ保存せず、独自に管理している。他のアプリだといちいち保存するのを聞いてくるし、カメラロールを汚す(?)のが嫌だった。自前で管理するので、オリジナルに戻せるし表示を相互に切り替えられるようになった。修正は重ねて行えるし、捨てることもできる。詳細画面を開くと同時にキーボードが立ち上がってコメント入力ができるようになる。左右に写真をめくってもキーボードは出たまま。連続してコメントを付けていけるのが特徴の一つ。実用性を重視してストレス無くサクサク入力できることを目指した。この点、中途半端にビューアを充実させるよりは投稿アプリとしての働きを重視してみた。以前は別の設定画面で指定した項目を送信毎に変更できるようにした。640ピクセルで渡して」「メールにはスクウェア加工して」といったことが気軽に行える。※シェア機能でエバーノート以外にも加工した写真を送れる。(これも物ぐさな自分がいちいち設定画面に行くのを嫌ってそうした)ダイアログはすべてライブラリ「vikmeup/SCLAlertView-Swift」を使っている。CocoaPods提供のバージョンでは幅のカスタマイズが無くて少々手間取った(ソースコードの最新版では存在)。1回のエバーノートへの最大送信枚数は100枚。シェア機能は15枚まで。todayeeシリーズは全9種類のエバーノート投稿専用のアプリ。用途に合わせた様ざなまアプリを提供している。特徴はすべてのアプリからの投稿が1日1つのノートにまとまること。複数のデバイスにも対応。iPad、というのもOK。オフライン投稿もOK。最終的に自動で投稿時刻順に並べられるから投稿はいつでもOK。個別に9つ買うよりも40%以上お得な全部入りコンプリートパックもあり。AppStoreちなみに今回初めてバンドルにカスタムアイコンを付けられることを知り、試しに付けてみた(上記がそう)。-写真をまとめてエバーノートへ送りたい、コメントを付けて保存したい、という方は是非お試しください。Voice」をリリースしました。ビデオを撮影してエバーノートへテキストを投稿できるアプリです。起動後すぐに撮影を開始できます。撮影後はプレビューが見られます。あとはバックグラウンドでエバーノートへ送信されます。撮影したビデオにコメント(1行テキスト)を付けることができます。エバーノートへ投稿した動画には自動的にサムネイル画像が付きます。送信前にプレビュー画面でスワイプするとサムネイルにしたい場面を選ぶこともできます。機種ごとの主なものに対応しています。iPhone6sの例です。