月 の 上

はてなブログのテーマを自動リロードしながら開発できるツールを作った

f:id:amagitakayosi:20170822133701g:plain

Sass/Lessでテーマを書いて、リアルタイムで確認しながら開発できるツールです。

github.com

目次

インストール

動作にはNode.jsが必要です。 未インストールの方はこの辺からインストールしてください。

https://nodejs.org/ja/

ターミナルで以下のコマンドを実行すると、 hbt コマンドがインストールされます。

npm install -g @fand/hatena-blog-theme-boilerplate

使い方

hbt の使い方

0. 開発用ブログを作成する

テーマの開発には、開発用のブログを開設しておくと便利です。
既存のブログをエクスポート/インポートするなどして、サンプル記事を作成しておくと良いでしょう。

1. テーマの雛形を作成する

hbt コマンドでは、新しいテーマの雛形 + 開発環境を作成できます。
以下のコマンドを順に実行すると、 my-theme という名前のテーマが作成されます。

hbt my-theme   # my-themeを作成

以下のコマンドを順番に実行して、ライブラリをインストールしておいてください。

cd my-theme
npm install  # ライブラリをインストール

2. 開発用ブログにCSSが読み込まれるようにする

開発用ブログのデザイン設定画面を開きます。
カスタマイズ > デザインCSS の内容を削除し、 カスタマイズ > フッタ に以下の内容を入力してください。

<link rel="stylesheet" href="http://localhost:3000/index.css"/>
<script async src='http://localhost:3000/browser-sync/browser-sync-client.js'></script>

f:id:amagitakayosi:20170822133952p:plain

変更を保存する を押すのを忘れずに!

3. テーマを開発する

テーマのディレクトリで以下のコマンドを実行すると、Sass/Lessのコンパイル及びライブリロード用のサーバーが起動します。

npm start

サーバーを止めるには Ctrl + C を押してください。

テーマのソースコードlib/ にあります。
hbtはデフォルトではSassを利用するので、 lib/index.scss が作成されます。
Lessを使いたい場合は、 lib/index.scss を削除して lib/index.less を作成し、 npm start を再度実行してください。

ブラウザで開発用ブログを開き、 lib/ 内部のファイルを編集すると、開発用ブログのデザインがリアルタイムで反映されるはずです。

(記事冒頭のGIFアニメ) f:id:amagitakayosi:20170822133701g:plain

4. 完成したテーマを出力

テーマのCSSindex.css に出力されます。
テーマを使いたいブログのデザイン設定画面で、 カスタマイズ > デザインCSSindex.css の内容を貼り付けてください。


macでしか動作確認してないけど多分Windowsでも動くはず……?
なんか困ったことがあればお気軽にコメントください。

Kyoto.js 13開催レポート & 次回予告

こんにちは! Kyoto.js主催の id:amagitakayosi です。
先日開催した Kyoto.js 13 のレポートをお届けします。

kyotojs.connpass.com

今回は京都だけでなく、なんと東京や長野から来たという方もいらっしゃいました(ありがとうございます!!)。
発表内容もユニークなものが揃っています!

当日の様子はTwitterハッシュタグ #kyotojs でご覧になれます。

発表資料

「Live Coding on Atom」amagitakayosi

speakerdeck.com

1人目の発表は僕 id:amagitakayosi です。
最近ハマっているGLSLのライブコーディングや、自作したAtomパッケージの紹介をしました。

「煩悩の数だけRefluxを回そう(仮)」kamiyam

www.slideshare.net

2人目の発表は id:kamiyam さん。
Fluxフレームワークの一種であるRefluxについて、他のフレームワークの違いや、実際に開発した感想を紹介していました。

「type of typing typescript type」hiroqn

scrapbox.io

3人目は id:hiroqn さんです。
TypeScriptでの型の付け方について、良くある書き方や、ハマりどころを紹介してくれました。

「煩悩レスなコンポーネントテストを目指して」bokuweb

speakerdeck.com

4人目の発表は id:bokuweb さんです。
コンポーネントの見た目をテストする Visual Testing のメリットや、 reg-suit の開発に至った経緯などについて語ってくれました。

「Reason」kuy

speakerdeck.com

5人目は id:kuy さんです。
Facebook製のOCaml用ツールチェイン Reason の紹介と、実際に使ってみた感想を話してくれました。

Gyazoのフロントエンドから煩悩を取り払えているのか」pastak

scrapbox.io

最後の発表は id:Pasta-K さん。
画像共有サービス Gyazo のフロントエンドについて、これまでの変遷を語ってくれました。

LT資料

JavaScript information in English」cawa

www.slideshare.net

LT1人目は id:cawa さんです。
英語の情報を効率よく収集するためのTipsやリリースを紹介してくれました。

Atom パッケージ開発のすゝめ」susisu

speakerdeck.com

LT2人目は id:susisu さん。
Markdownのテーブルエディタやカーソル移動といった、普段の操作を便利にするAtomパッケージを開発した話でした。

「はじめようGLSL」amagitakayosi

はじめようGLSL · GitHub

最後のLTは、ふたたび僕 amagitakayosi が行ないました。
ハンズオン形式で、GLSLで何ができのるか実際に体験してもらいました。

まとめ & 次回予告

発表者ならびに参加者のみなさま、本当にありがとうございました!!

毎回なぜか東京からの参加者がいるKyoto.jsですが、次回はなんと東京での開催を企画しています!!!
詳細はまだ未定ですが、開催日時は9月の中頃になる予定。

いずれconnpassやブログで案内するので、今後の更新にご注目ください!!