chalow

このブログは [2008-09-25-1] から長らく chalow という静的 HTML ジェネレーターで作っていましたが、この度 Hugo に変更しました。🚀 なぜ変えたのか？ 開始から 20 年以上、ブログ公開から 13 年以上経ち、メンテナンスコストが大きくなってきたからです。このサイトの歴史 も是非・・・！💡 一般的には記事の移行はしないで、ブログを新しく作ることが多いと思います。でも私の性格上「もったいない精神」が発動してしまい、ここまで来てしまいました。😅 今までの仕組み ChangeLog というフォーマットで書かれた 1 つのテキストファイルを chalow で HTML に変換していました。最終的に 48,204 行、2.3MB になりました。 Hugo 移行前のスクリーンショット: 現在の仕組み Markdown で書かれた 1 記事 1 ファイル（合計約 1,400 ファイル）を Hugo で HTML で変換しています。 Hugo のテーマは 15 個くらいから選定して、PaperMod にしました。 メンテナンスされている ダークモードがある 画像少なめでも貧相にならない Archive ページを作ることが出来る toc（Table of contents, 目次）を使える ``` で括ったコードエリアに copy ボタンを付けられる dateFormat を変えられる PaperMod が理想的かと言えばそうでもなくて、消去法で決めました。いろんなテーマを試したり、コードを読んだりしていました。 今回変えなかったこと [2019-01-19-1] から変わらず、インフラは CloudFront+Heroku です。...

ここ一年半くらい、このブログが乗っていたサーバをメンテンスしていませんでした。４月に Ubuntu 14.04 LTS が EOL になることと、サーバの面倒をみることに疲れてしまったので、このブログを CloudFront+Heroku に移しました。 さくらのVPSに引っ越したのは [2013-05-27-2] だったので、５年半くらい使っていたことになります。このブログ自体は静的コンテンツですが、nginx のログを fluentd に流したり、各種メトリクスを kibana や GrowthForecast で可視化したり、ちょっとしたアプリケーションを動かしたり、いろいろ実験や素振りをすることが出来ました。今までありがとう。 さて、引っ越し前後の環境の変化です。 引っ越し前（さくらのVPS） https://vps.sakura.ad.jp/ 仮想サーバのプラン 2G、石狩リージョン、年額 18,770 円 ドメイン さくらのドメイン、年額 1,852 円 OS Ubuntu 14.04 LTS 構成管理 knife-solo デプロイ方法 GitHub の master ブランチに push すると、CircleCI 上で capistrano が自動デプロイ ビルド方法 capistrano でのデプロイ時に chalow が CHANGELOG メモを HTML に変換 配信方法 静的な HTML ファイルを nginx が配信 引っ越し後（CloudFront + Heroku） https://aws.amazon.com/jp/cloudfront/ https://jp.heroku.com/ Dyno Type Hobby、年額 $7 x 12 = $84 ≒ 9,554 円 ドメイン AWS Route53、年額 $12 + ($0....

このブログを読んでいると、その日マスタカがどんなツイートをしていたか気になりますよね？ そういうわけで各記事の最後に『当日のツイート』へのリンクを追加しました。 Twitter『高度な検索』の問題点 そもそも Twitter には高度な検索という機能があり、ユーザ名や日付などを指定して検索することが出来ます。 高度な検索の使い方｜Twitterヘルプセンター こちらがそのページです。 Twitterの高度な検索 しかし、ここでユーザ名と日付を指定しても、うまくその日のツイートを検索することが出来ませんでした。 # 何も検索されない from:masutaka since:2015-12-23 until:2015-12-23 # 22 日と 23 日のツイートがよく分からない感じで混ざってしまう from:masutaka since:2015-12-22 until:2015-12-23 日付を指定してツイートを検索する 調べていたところ、こちらの記事を見つけました。 ツイッターの時間指定検索方法 - さまざまなめりっと こちらの記事にあるように since と until 演算子には時間とタイムゾーンを指定することが出来ました。 これを利用すれば任意の日のツイートを絞り込むことが出来るようです。 # 2015-12-23 のマスタカのツイートを絞り込む from:masutaka since:2015-12-23_00:00:00_JST until:2015-12-23_23:59:59_JST ややクセのある仕様でした。 タイムゾーンを指定しないと、UTC で検索される タイムゾーンを指定する場合、日付と時間の指定も必要 日付とタイムゾーンの組み合わせ（例: since:2015-12-23_JST）ではうまく検索されない 微調整 普通に検索すると、『トップ』に飛んでしまうため『ライブ』へのリンクになるように URL パラメータ “f=tweets” を付けています。 最終的なリンクはこちらになりました。 # 2015-12-23 当日のツイート https://twitter.com/search?f=tweets&vertical=default&q=from%3Amasutaka%20since%3A2015-12-23_00%3A00%3A00_JST%20until%3A2015-12-23_23%3A59%3A59_JST&src=typd おまけ: 公式の検索ウィジェット ウィジェットの設定 - twitter.com 試してみましたが、全部の記事に表示されるのはウザかったので採用しませんでした。

こちらのパクリです。 「この記事に言及しているこのブログ内の記事」一覧を表示するようにしました - たつをの ChangeLog 修正前 修正後 ずっとやろうとしていて、今日やっとやる気になりました。ﾊﾟｰﾙﾂﾗｲﾃﾞｽ chalow スクリプトがまた秘伝のタレ化してしまった…。

多分、[2009-02-21-1] 以来。 いやあ、ずっとデザインは直さなくちゃと思ってたんですよ。しかし、まさかこのGWに直すことになるとは。 今まではtdiary のkaeruテーマを使わせて頂いていました。分からないなりに継ぎ足していったところ、スマホ時代に反したデザインになっていると自覚。味があったといえばありましたが。 そこでGWの初めにたつをさんの記事 を見ながらスマホ対応をしたんですが、元がアレなのでサイドバーを引っ込めるくらいしか出来ず。 GWも終盤の昨日の午後、天からイベントが降ってきたので、一気にリニューアルしてしまいました。うん、12時間くらい。 PagerやPaginationは分かりやすくしたつもり。どうでしょう？ テーマは、みんな大好きBootstrapをベースにいい感じのテーマが集まっている https://bootswatch.com/ のYeti を使わせて頂きました。 時間がかかったのは、ある程度形にするまでと、カテゴリページのPaginationをいい感じにするため、chalowのソース に修正を入れたところ。 loading... chalowのソースをいじるのは今回が初めてではありませんが、Perlは未だに分かりません。。 もう一つは、使うべきcssがよく分からなかったこと。 というのも、初めは各テーマのソースを参考にしていたので、 https://github.com/thomaspark/bootswatch をgit cloneして実装を進めていました。 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/bootswatch/yeti/bootstrap.min.css" media="screen"> <link rel="stylesheet" href="/bootswatch/assets/css/bootswatch.min.css"> いざ調べてみたらこれで良いっぽい。しかしデザインが変わる。。 <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//netdna.bootstrapcdn.com/bootswatch/3.3.4/yeti/bootstrap.min.css" rel="stylesheet"> https://bootswatch.com/ は彼ら自身のデザインをカスタマイズしていたことに、しばらくして気づきました。。 loading... http://validator.w3.org/ にもお世話になりました。 tdiaryのテーマよ、今までありがとう！

[2015-01-13-1] でデプロイ時にchalow が実行されるようになったので、 GitHubへのPushをトリガーにして自動デプロイを実装してみました。 文字で分かりづらいですが、よくある自動デプロイと同じです。(chalow でここまでやっている人はいるのかな？) GitHubのmasterへのマージをトリガーにして、CircleCIが自動デプロイ開始 CircleCIがGitHubの最新のソースを取得(a) テスト実行(chalowを実行するだけ) capistranoでデプロイ開始。masutaka.netにsshでログインする(b) masutaka.netの中でGitHubの最新のソースを取得(c) index.html等、静的コンテンツを配置 chalowを実行して/chalow以下の静的コンテンツを配置 IRC -> tiarra(-> Auto::Im) -> im.kayacという流れで手元のiPhoneに通知 sshの鍵が3つ必要でした (a) CircleCIとGitHub連携時に自動生成される (b) CircleCIのProject settings -> Permissions -> Checkout SSH keysから生成する。(a)もここで確認可能 (c) ローカルでssh-keygenコマンドを実行して生成して、Project settings -> Permissions -> SSH Permissionsに登録 (c)は普段使っているsshの鍵でも動きますが、CircleCIに秘密鍵を渡した くなかったので、新規に作りました。 circle.ymlとその中で使われるシェルスクリプトはこんな感じです。 YAMLだけで書けないのかな。。 8はCircleCIのIRC連携です(Project setting -> Notifications -> Chat Notifications)。 適当なUsernameを入れないとエラーになってしまいました。 iPhoneのim.kayac.comへの通知はこんな感じ。 LimeChatにはこのように通知されます。

[2014-05-03-1] のバージョンアップ。 http://masutaka.net はcapistranoでデプロイしてますが、 http://masutaka.net/chalow はchalow+rsyncを実行する mkchalow[2009-06-14-3] というコマンドでアップロードしてました。 ローカルのChangeLogメモをchalowで変換しrsyncするので、自分の MacBook Airと会社のMac miniの複数環境でブログを書くと、過去記事が 消える可能性が出てきます。 そういうのを気をつけるのが面倒なので、capistranoでのデプロイ時に chalowコマンドも実行するようにしました。 以下はcapistranoの設定ファイルです。melodyはVagrantのVMです。 [2009-06-14-3] に作ったEmacsのmkchalow()もcap-deploy()として 新たに生まれ変わりました。ChangeLogメモを開いた状態でC-cC-cすると デプロイ出来ます。 default-directoryの最後に/(slash)を付けないと、実行ディレクトリ が~/src/github.com/masutakaになる問題にハマりました。 start-process()でencode_current_directory()からカレントディレクト リを求めており 、その中でFunhandled_file_name_directory()を使ってい る ためのようです。 Funhandled_file_name_directory()はelispのfile-name-directory()と等 価です。 UNIX上のEmacsではディレクトリ名の最後には/(slash)を付けたほうが良 いかもしれません。 http://www.gnu.org/software/emacs/manual/html_node/elisp/File-Name-Expansion.html The value is always a string ending with a slash. default-directory ⇒ "/user/lewis/manual/"

http://masutaka.net/ 以下の静的なhtmlはGitHubのprivateリポジトリで 管理しており、変更があったらrsyncでコピーしてました。 あまり変更しないのでそんなに困ってませんでしたが、ちょっとダサいの とCapistrano3を使ってみたかったので、エイヤッと導入しました。 https://github.com/capistrano/capistrano の通りにGemfileに gem ‘capistrano’, ‘~> 3.2.0’ を追加して、以下を実行しました。 $ bundle exec cap install このようなファイルが自動生成されます。 Capfile config ├── deploy │　├── production.rb │　└── staging.rb └── deploy.rb ファイル名を以下のように変更しました。melodyはVagrantのVMです。 Capfile config ├── deploy │　├── prod.rb │　└── melody.rb └── deploy.rb ファイルの内容はこんな感じ Capistrano3からdeploy:setup不要になったので、初回から以下のコマンド でOKです。 # to masutaka.net $ bundle exec cap prod deploy # to vagrant $ bundle exec cap melody deploy /var/www/vhosts/masutaka.net以下にデプロイされます。 current -> /var/www/vhosts/masutaka.net/releases/20140502163850/ logs/ releases/ repo/ revisions....

このブログはほぼ静的コンテンツなので、置き換えるメリットはほぼありません。でもいろいろ遊びたかったので置き換えました！ 置き換え前 さくらのレンタルサーバ [2009-05-17-4] リアルサーバ 他の人と/homeを共有する コントロールパネルからメールアドレスを作ったり、アクセス解析出来る カスタマイズ性はほぼない OSはFreeBSD 7.1-RELEASE-p16 WebサーバはApache/1.3.42 年間5,000円(スタンダードプラン) 置き換え後 さくらのVPS 仮想サーバ ユーザは自分だけ コントロールパネルとかはない カスタマイズしまくり OSはUbuntu12.04 LTSにした [2013-05-19-1] Webサーバはnginx/1.1.19にした 年間16,280円(プランは2G。石狩リージョン) 雑記 結構真面目にサーバを構築しました。参考にしたのはもちろん『入門Chef Solo』[2013-04-22-4] 基本的にVagrantとserverspec で検証しつつレシピを書いたので、本番環境で悩むことは少なかったです。時代は進みましたね。 Webサーバはnginxにしました。Apacheに比べて、設定がシンプルで惚れました。あと、ごく一部で使っているcgi用にfcgiwrapをインストール。 chef-soloで構築してみた疑問や課題はこんな感じ パッケージ全体のupgradeはどのタイミングでやれば良いのか？ 他の人のChef-soloリポジトリを知りたい。Vagrantでも真面目にテスト書いている？とか。 chalowはChef-soloでは管理してません。まあ、Webアプリケーションなので、デプロイ対象とかそっちの話だと思う。今は自作のmkchalowコマンドでアップロードしてます。[2009-06-14-3]

ちょいちょい必要になったので作りました。 Githubのリポジトリ 放置してるなあ。。 順番に説明。 twitter Twitterアカウントへのリンクを作るだけです。Twitter Anywhereは去年 の12/6をもって使えないことになったので、代わりを探してましたが、こ の辺で妥協。 tweet 埋め込みツイートを挿入します。今まで公式の方法 で取得しHTMLをベタ に書いてましたが、これだけで表示出来るようです。 speakerdeck_f Speaker Deckのプレゼンを表示します。 miil Miil の画像を表示します。画像は大きさを指定出来ますが、必ずそのサ イズを取得出来るとは限らない そうです。 省略すると240x240になります。 Instagram Instagram の画像を表示します。 サイズはt(thumbnail), m(medium), l(large)を指定出来ます。 省略するとmになります。 追記(2013-02-06): Instagramを追加しました。