ホンモノのエンジニアになりたい

ITやビジネス、テクノロジーの話を中心とした雑記ブログです。

【Python/Bottle/CMS】サイト内ブログ的な事がしたい

bottle in the sea

全国100万人のBottlerの皆さま、こんにちわ。

Python&Bottleで作成した簡単なWebサービスに、サイト内ブログを置きたくなったので、その経緯と調べてみたこと、やってみたことを整理するエントリとなります。

 

 

このエントリのダイジェスト

長くなってしまったので先にダイジェストで全体像を。

  • Python+Bottleで運営してるWebアプリにアドセンス広告載せたくなった
  • アプリなのでテキストが少なく審査に落とされ泣いた
  • テキスト載せるためにコラムページを作ろうと決意
  • 静的なHTMLページで作るのは心が躍らないから却下
  • CMSを入れようと思ったけどピンとくるものがない
  • BottleMarkとの出会い。そして別れ。
  • アイディアだけ拝借して自作。

 

自作したコードはまだ整理できてなくて未掲載です。根本のアイディアはBottleMarkというGithubプロジェクトを参考にさせていただきました。気になる方はこのプロジェクトを見てみるのがよろしおます。

bottlemark/app.py at master · yeradis/bottlemark · GitHub

テンプレートと各ページのマークダウンファイルを用意し、リクエストURLに応じて、くっつけてHTMLに変換して返すというシンプルなものです。

 

背景 

一年ほど前にPython+Bottleを使って簡単なWebアプリを開発、公開しました。VPSを借り、OSのセットアップ、アプリのデプロイまで一通りやるべきことをやって、現在元気バリバリ稼働しています。構成はこんな感じ。

 

webアプリの全体像

 

アプリを公開していると、きっと多くの先人が同じことを考えたであろう、「広告入れればサーバ代回収できんじゃね?」という発想が出てきます。VPSサーバ代とドメイン代を合わせて月1,000円弱ですが、どうせなら回収したい。PV数は100~1,000/dayほどなので、大したもんでもないですが、固定費の回収くらいはできるじゃろ。

 

さて、Web広告と言えばアドセンス。私は颯爽とアドセンス閣下に審査を申し入れました。1日ほどで返ってきた結果は、

「価値の低い広告枠: コンテンツが存在しない」

 

価値の低いってどーゆーことっ!うちの子は価値あるからっ!ちゃんとしてるからっ!そんな酷いこと言わなくてもいいじゃないかっ!!!

 

と、ぷんぷん丸していました。けど怒っていても仕方ないので、頭を切り替えてじゃあどーしよっかと考えていかねばなりません。諦めません、勝つまでは。どうも調べてみると、アドセンスはブログなどの文章をメインとするWeb媒体で利用することが暗黙の前提になっているようでした。Webアプリ/サービスの開発者はけっこう苦労・断念しているらしいです。

Webサービスを申請するには? - AdSense ヘルプ

ブログ型でないサイトの審査 - AdSense Help

 

Webアプリってことになると、どうしてもテキスト情報が少なくなってしまいますからね。これは如何ともしがたき。

 

で、考えた。そして、閃いた。

 

「無ければ作ればえーがな。」

 

幸か不幸か、中身の薄い文章をダラダラと書いていくことには幾分かの自信があります。このエントリにしたって「背景」の項目で既にここまで引っ張って文章をブリブリ出力してきているわけです。

私の可愛いアプリちゃんに「コラムページ」を作って、このノリで書いていけば、それっぽくコンテンツが充実していくのではないだろうか。文章を表示する楽しいページが増えていくと、SEO的にも効果がありそうな気がしますね。流入経路が増えることでユーザ数も増える。良い事ばっかりやないか。ナイス閃き。

 

コラム作ろうと思っていたら審査に通っちゃった話

このエントリをダラダラと書いている内にアドセンス審査通ってしまいました。詳細を書きますと、まず上で書いたように初回審査は「価値の低いコンテンツ」という作り手の心を傷つける理由で却下されました。グスン

 

で、このブログ内に書いているんですが、ふと「後からhttpsになってURL変わると、変更申請や作業が面倒くさそう」と気づき、SSL/TLS化の対応をやったんです。 

 

「無価値のコンテンツ」と落とされたんですけど、一か所変更したらまたトライしてみたくなるのが、理国の民(理系)の習性です。あれもこれもと変更を加えると、何が原因で結果が変わったのか分からなくなってしまいますからね。「審査に通過すればそれでいーじゃん」と思われる文国民もいらっしゃるでしょうけど、何事にも仕組みの理解を求めるのが誇り高き理国民です。

 

で、SSL/TLS化対応やって、「通らないことを確認しよう」と申請を出してみたら、通っちゃったという経緯でございます。「無価値なコンテンツ」ってヒドイこと言ってたくせに!

 

正直、何が何やらさっぱり分からないんですが、さっぱり意味が分からないということが分かったので得るモノはあったと思っています(真面目に)。

 

さて、当初の目的はクリアしてしまったと。けど実は合格通知が来たタイミングで既にサイト内ブログの仕組みを8割がた作ってしまっておりました。当初の目的はクリアしたわけですが、そこはやっぱりモノを作る喜びがありますからね。やり切りました。捨てる選択肢はあり得ないですね。

 

目的と要件整理

よっしゃー作るぜー!と突っ走っていく前にちょっと落ち着こう。そもそも具体的な目的と要件は何なんだろうか。

 

目的は文章ベースのページを作って、アドセンス審査に通ること。おまけでSEO対策の2つですね。こう言ったらアレですけど、文章コンテンツはアプリケーションの付随的なものとの位置づけです。やっぱりサイトのメインはアプリなんですよね。アプリをもっと使ってもらうための導線と考えるのが良き。アプリが扱っているテーマについてのコラムを気軽に投稿できるという形ですな。

私のWebサイトはメインがアプリなので、超特化型のWebサイトなわけです。つまり作ろうとしているコラムページは永遠と書き続ける類のものではありません。書こうと思えばいくらでも書けますが、多くても10本くらい記事を書いたら、書くべきことの9割は書けてしまう、そんな性格のものです。これはCMSプロダクト(Wordpressとかああいうやつ)を導入するほどの話ではないような気がします。

 

しかし、先のことは分からないのが世の常であり、記事をいっぱい書いていく必要性が出てくるかもしれない。書きたくなるかもしれない。いきなりアーティスティックな方向に開眼し、自分を表現したくなるかもしれない。このあたりを勘案していくと、本質的に満たさなければならない要件は以下の2つに絞られると考えました。

  • ページを追加する際には本文の文章だけ書いて簡単に投稿できること
  • URLルーティングのようなシステムサイドの作業は最小化すること

 

実現方法を考えていく中で、あれはやりたくないとか、そういうのが出てくるでしょうけど、それは走りながら考えるとしましょう。本質的にこの2つは外せない要素です。 

 

普通に静的ページをおけばよくない?

面倒くさいことをグダグダ考えないで、普通に静的ページとしてHTMLファイルを作ればそれでいいのではないか。確かにこれも有力な選択肢の1つ。100も200もページを作るわけではないので、手動で作って手動で管理するページとしても全く問題は無い。動きを付けるだけならPythonでもJSでも何とかなるし。

 

が、それは楽しくない。

何も新しい学びが無いではないか。

それに美しくない。心がコンマリしない(ときめかない)。

私のポリシー的に却下。

 

 

素直にCMSを入れる?

さて、静的ページを置くだけじゃヤダというわけなので、そうするとCMSを入れるってのが現実的な選択肢になるのではないか。私はずーっとCMSを自分で運用することを敬遠してきました。このブログをはじめるときもWordpressにしよっかな、なぁーんて考えたんですが速攻で却下しました。

 

理由は単純。私はコンピュータセキュリティの専門家を名乗って(もとい、名乗らされて)仕事をしていました。そのときWordpressの良くない話を聞く機会が多くて、「Wordpress=セキュリティ的にヤバいもの」という印象がどうも頭に残ってしまっているんです。実際にヤバいかどうかは人それぞれの判断があるでしょうけど、やっぱり私は怖い。当時からブログは緩く長く続けたいと思っていました。そうなると脆弱性情報をキャッチし続けて、一生面倒見ていかないといけないWordpressってのはブログ本来の文章を綴るための時間を削るし、私は気になったら気になり続けてしまう性格をしてるので、プライベートでアウトプットする場としては、たぶんあんまり向いてないんだろうなぁと思ってました。

 

そんなこんなで、なるべく近づかないように頑張ってきたんですが、いよいよCMSしないといけない感じかなぁ、と思いCMSのプロダクトを調べてみました。

 

まず真っ先に候補に挙がるのは、Wordpressですね。けどやっぱりWordpressは良いイメージが持てない。”ちゃんと”運用していくのは辛いだろうなぁ。やっぱりWordpressは無し。よくよく考えると私が運用しているサイトはPythonで動かしてますから、どうせならPythonで書かれたCMSがいい。さよなら、Wordpress。

 

Pythonで使えるCMSってどんなんがあるんでしょうか。調べてみると、ざっくりこんなのがあるそうです。

 

上の3つはそこそこ情報も多く上がっていて、どれも良いところ/悪いところがある模様。どれにするか・・・

 

Pythonと言ったら、やっぱりワン・ツー・ジャンゴかな、Django CMS。

 

と思ったが、ちょっと待て。わざわざ今までマイクロフレームワークのBottleを駆使してアプリを作ってきたんだぞ。ここでDjango入れる選択肢を取るなら、それこそアプリ全体をDjangoで作り直すくらいの気持ちが必要なのではないか。Bottleを選んで省エネ設計で作ってきたのに、Djangoを入れるってのは、ちょっと違う気がする。というか、本体は軽量のBottleで、おまけのコラム欄はフル装備のDjangoという構造が歪に見えて、すこぶる収まりが悪い。

 

となると、MezzanineかWagtailというやつだな。ちょっと試してみようかしら。Wagtailをインストールしてみました。が、こいつ、インストールするとDjangoが一緒に入ってきやがる。しかも自前でPython3をビルドした場合はsqliteが動かないケースがあるらしく(これはDjangoの制約らしい)、バッチリ該当してる。Pythonの入れ直しが必要のようなんですが、そんな大工事をするつもりはありません。んー、ちょっと違う。(後から気づいたんですが、venvで運用してるので、どうとでもなった気がします)

 

ではMezzanineか。君が私の運命のCMSなんだね、さぁこのガラスのWebアプリを履いてごらん、と思ったけど、この娘もDjango先輩に依存しているらしい。うん、ちょっと違う。チェンジ。

 

そうか、ButterCMS、こいつを使えばよいのだな。なんとこいつはFlaskで使うモノらしい。Flaskと言えばBottleに似てるフレームワークなので、そのまま使えるのではないか。・・・・・・が、調べてみると有償プロダクトでした。だいぶ違う。しかもSaaS型なんですって。面白そうなんだけどなぁ

 

うーん、ビビっと来るCMSが無い。やっぱり静的にページを増やすのが良いんだろうか。コンマリしないなぁ。(心がときめかないなぁ)

 

閃きっ!圧倒的、、、閃きっ!

はてなブログのAPI使えば、何も自分でコンテンツの管理をする必要ないんじゃないの?

 

ん?んんん?だよね、そうだよね。

はてなでもGoogleBloggerでも何でもいいですが、まずAPI持ってるブログサービスのアカウントを作る。記事を書いて非公開で置いておく。私のサーバからAPIを叩いてコンテンツをダウンロードして表示する。

 

これ、、、できるな。結構簡単にできるぞ。

 

いや、待て待て、流石に叱られるか。スーパーグレートグッドアイディアだけど、はてなやGoogleに怒られるのは本望ではない。ちなみに私が見たところ、はてなの利用規約には違反していないように思われます。それに私は、はてなの有償会員。つまり、大事なお客様。ちょっとくらいの我儘を言っても許されそうな気もする。

 

が、倫理的に却下。そういうのは好みじゃない。 

 

迷いの果ての選択

Githubにこんなプロジェクトがありました。

bottlemarkというイカした名前のプロジェクトです。Readme.mdを一部意訳します。

 

-------------意訳ここから---------------

シンプルなPythonのCMS?BottleとMarkdown2で作れるんだぜ。

DBも必要ないから超シンプル。

Markdownでコンテンツ書いて、フォルダに置くだけだぜ。

おっと、ファイル名は「filename.md」のような形にしてくれよ。

ファイルの最初の三行はこの形で書かないと動かないぜ。

Title: The Title of the page
Date: The date using the format yyyy-MM-dd
Author: The author name

こいつはマークダウンをHTMLに変換するときに使うんだ。ブラウザ表示されるわけじゃないから安心してくれだぜ。

BottleMarkはBottleのテンプレを使ってるんだ。こんな感じのテンプレを用意しておくと、上の三行の情報とそれ以外のコンテンツデータが埋め込まれるんだぜ。

<!DOCTYPE html>
<html>
  %include head title=title
  <body>
      
      <div class="container-narrow">

        %include header.tpl
        
        <h1>{{!title}}</h1>
        <h4>{{!author}}</h4>
        <h6>{{!date}}</h6>
        <hr/>
        
        {{!content}}
      
        %include footer.tpl
      </div>
    
    
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

-------------意訳ここまで---------------

 

なるへそ。Bottleを使ってテンプレにマークダウンを差し込むからBottleMarkか。スカした名前を付けよる。カッコイイじゃないか。採用っ!!!

 

しかし、そのままだと動作しなかった上に微妙な修正がいくつか必要そうだったので、アイディアだけ拝借する形で自分で作りました。

 

ざっくり言うと、レイアウトを作りこんだLayout.tplを作っておいて、個々の記事はマークダウンで作って(.mdのファイルを)置いておく。

domain.com/contents/article1にアクセスがきたら、マークダウンファイル(.md)の中からarticle1.mdを探して、そのファイルの中身をLayout.tplに埋め込んでページを返す。こんな仕組み。

bottlemarkの仕組み

BottleMarkでは、マークダウンの先頭三行にタイトルと日付と著者の情報を持っています。私は著者の情報を削除して、metaタグのdescriptionを定義するようにしました。

 

ソースは別の機会に整理して公開しようと思います。BottleMarkはとてもシンプルなので、Bottle使ったことある方なら内容はすぐ理解できると思います。

 

おわり