静的サイトジェネレータ
2016.03.21 (Mon)

随分と前にCMSにもうずっと疑問を持ってますという話というエントリで「Wordpressから早く引っ越したい!」と書いていたのですが、ようやくこの社長ブログを別システムへ引越し完了しました。思い始めて約5年、長かった…。

別システムというか、静的サイトジェネレータ「Hugo」を使って全てを静的ファイルとして生成、それをサーバに置いているだけの状態です。DBもなければPHPのプログラムもありません。セキュリティ的な心配はほぼ皆無で随分気持ちが楽になりました〜。

このブログの他、フィードテイラーとして運用しているサイト

も全て「Hugo」で構築済み。やはり、テキストファイルを手元のPC/Macで更新するだけでサイトの全htmlファイルが生成されるのは、楽なうえに安心です。せっかくなので、編集の様子を動画にしてみました。

 

Hugoを使ったブログ執筆 from feedtailor on Vimeo.

 

こんな感じで手元のMacでブラウザとテキストエディタを使って更新したい内容を書いていきます。テキストファイル保存のショートカットを押すと([command] + S)、即時にブラウザで確認可能。この瞬間、サイトに必要な全ファイル、トップページから500以上のブログエントリ、アーカイブページ等々が全部htmlで自動生成されています。これだけのページ数でも生成時間1秒ちょいです。

20160321_1107.png

あとはこの一式をサーバにアップロードするだけでok。CMSのようなシステムに接続することなく、お気に入りのテキストエディタで原稿を書いて保存し手元で確認、アップロード、以上!…という理想のワークフローができあがりました。

構築を頑張ってくれた @t0shiya に感謝です。

今回ブログを完全静的サイトに移行して感じたメリット/デメリットを整理すると、

メリット

  • セキュリティの心配が(ほぼ)ゼロになった
  • サーバメンテナンスの手間がゼロになった
  • バックアップを取る作業がゼロになった
  • 万が一トラフィック激増した時の心配がゼロになった

デメリット

  • 動的な要素を排除することになった

という感じでしょうか。

デメリットにあげた動的な要素とは、Wordpressではプラグインを使って「一番見られているページ」をサイドバーに掲載していた箇所です。それが無くなりました。あとサイト内検索も Google 先生にお任せする形にしたので、検索結果の表示については妥協しています。…ですが、全体としてはメリットは大です。一番見られてるページの仕組みはjavascriptで実装しようと思えばできるので、時間あればやりたいところ。

快適なブログ執筆環境が手に入ったということで今後、今年のOUTPUT量の増やすという方針に沿って書いていきたいと思います。

という訳で更新系サイトの静的化に興味がお有りの方はお気軽にお声掛け下さい。静的サイトジェネレータを使って安全かつ更新可能なサイトを如何に作るか、情報の御提供はできると思います。あと、来週3/28(月)に 第2回静的Webサイト勉強会 も開催されますので是非お越し下さい。本ブログのことにも言及する予定です。


2016.01.18 (Mon)

勉強会やセミナーを企画するのは何年ぶりでしょうか。

Dollarphotoclub_87816499

会社も11期目に入ったし、新しい動きもしていこうってことで、今回「第1回 静的Webサイト勉強会」を開催させて頂くことにしました。Webサイトの静的化技術について勉強する会です。…ってそのままですね(笑)

会場はWebの世界では有名な株式会社TAMさんにお借りすることができました(ありがとうございます!!) 場所は大阪市の扇町。2016年2月19日(金)の19:00開始予定です。詳しくはイベントサイトの connpass に専用ページを設けておりますのでご覧下さい!

 

Webの「動」から「静」へのトレンド

ここ最近、「もう極力、静的サイトで良いんじゃない?動的な要素は必要最低限、または外出ししようぜ!」という気運が何となく高まりつつある気がしませんか?

S3がWebホスティング機能を提供開始したのは2011年、静的サイトジェネレータをよく見聞きするようになったのが2013年頃、2015年にはサーバーレスアーキテクチャというコンセプトを耳にすることが増えました。

できる限り静的なHTMLファイルだけで完結しよう、そうできるならそうしたい、という思いがWebの世界に広がりつつあると思うのです。開発者界隈だけではなく、デザイナーさんやWebサイト制作界隈の皆さんの間でも同様だと思います。例えば、2013年に発表されたStaticPressというWordPressのプラグインが少し話題になったのは分かり易い例ですね。

Webが「静」的であったらどんなに楽か…という思い。Webサイトの動的要素に悩まされてきた人が皆、思っていることではないでしょうか。そんな悩みや課題を共有し、それを解決しうる仕掛けやツールについて語り合おうという主旨で今回勉強会を開催する事にした次第です。

 

第1回目は、弊社で導入している静的サイトジェネレータ(JekyllHugo)について主にお話しようと思っています。まだ全部ではありませんが、導入したWebサイトでは、更新がとても楽になって、セキュリティリスクの心配やメンテナンスコストは限りなくゼロになってます。勿論、メリットばかりではなくデメリットもあるので、そのへんもちゃんと共有したいなと。

イベントの詳細はconnpassのページにも書いていますので、ご覧頂きまして是非ご参加頂けたら幸いです。参加費は無料です。(懇親会で飲食代 ¥1,000 を頂戴します)

さすがに、まだマイナーなテーマかもなぁという想像もあったので15人程度の小規模開催を検討していたのですが、connpassのページをオープンした直後にほぼ埋まってしまいました…。告知ブログが追いつかなかった感じですが、参加枠を25名まで広げましたので、是非御検討下さい。

あと、静的サイト、うちもやってるよーという方には是非その知見を共有頂きたくライトニングトーク枠も設けております。是非、静的サイトについての知恵を共有して下さい。info+ssg [at] feedtailor.jp にメール頂くか、@oishi に mention 頂ければと思います。

ということで、久しぶりのイベント開催の御案内でした!

 


2016.01.10 (Sun)

少し前に無理してCMSを使わなくて良いんじゃないかというエントリを書きました。要旨は、

  1. 多くのWebサイトはCMS使わずに html+css+js で良いんじゃないでしょうか
  2. ウチでは「更新可能で且つ html 」を jekyll で実現してます
  3. 問い合わせフォームはまだ php の力を借りてます

こんな感じだったんですが、エントリに予想以上にはてブされて反響がありました。特に 1. に共感して貰える声を頂いたのに加えて、git とか jekyll とか普通は使えないよ…というツッコミも結構ありました。

確かにそうなんですよね。全部 html で良いじゃんって極論を支えるツールって、どっちかというと開発者向けで誰もが使えるものじゃありません。まぁでも、技術の世界の常で、難しいことは時を経れば簡単に使えるようになっていくものです。

 

5403093622_60dfa6d3da_z

(photo by Quinn Dombrowski on flickr)

共感の声が多かったからというのもありますが、個人的に改めて、ここ数年の間にWebの世界は「動的」なCMSから「静的」な世界へ原点回帰していくだろうなぁと感じています。ツールの使いにくさは依然としてありますけどね。動的要素はホントに必要な所だけで良いじゃないかと。

同じ課題と理想の共通認識が広がり始めると次第に大きな動きとなるものです。何となく、「Webは複雑になり過ぎた」という認識が2013年あたりからザワザワ〜とだいぶ広がってきている気がするのです。昨年は国内に限らず海外含めて特に顕著だったかも。

そんな雰囲気とツール類の盛り上がりが面白いのと、自分もCMSに苦しめられた当事者でもあることから、今年はこのテーマ(静的サイトジェネレータ:SSG)も追求していこうと思ってます。

 

問い合わせフォームからphpをなくす

ということで、上記 3. の解決にむけてこの連休で実験を行いました。php 等を使わず、ウェブサーバには html / css / js しか置かないけど問い合わせフォームを実現するという実験。

既成品のASP型問い合わせフォームで逃げるという手もありましたが、自由に作れることを優先。AWS の各種サービスを繋ぎあわせて実現してみた次第です。

既にこちらの問い合わせフォームは php を使わないようにしました。html / css / js のみで、フォームの入力から保存、社用メールに届く…という挙動になってます。こんな感じ。

20160110_sketch

以下のエントリなどを参考にしました。先人に感謝。

ザックリとした流れは、

  1. AWS Cognito Identity の Unauth な Role を使って AWS S3 に入力内容を保存
  2. AWS Lambda で S3 保存で発火する function を登録
  3. AWS SES で自社の問い合わせ窓口メールアドレスにメール

という感じで全部AWSにお任せしてます。こうすることで問い合わせフォームから php がいらなくなりました。今後、phpのバージョンやセキュリティ等々を気にする必要は全くありませんし、万が一別のサーバに引っ越す必要が出てきても html / css / js を移動するだけでよくなったと。

問い合わせフォームに限らず、他の html ページ部分もAWSに全部置くと恐らく月額1000円とか月額500円とかのレンタルサーバすらいらない勢いですね。最近はサーバレスとか言われてますが。多分、ウチのサイトの規模なら月額30円ぐらいにまでコストダウンできます。

…というところまでは良いのですが、結局これも冒頭の jekyll や git の話と同じなんですよね。やっぱり技術者じゃないとできない…。シンプルに繋げられるとは言えやっぱり開発経験者じゃないと厳しい感じ。ここが問題だなぁ。

Webページの世界の「動」から「静」への原点回帰には、難しいことを簡単にする、というブレークスルーがまだ必要な気がしますね。