読者です 読者をやめる 読者になる 読者になる

「はじめる React Native」メイキング

事後報告になってしまい申し訳ないのですが、先週のコミックマーケット90で個人サークル「pentapod」として、このような本を頒布していました。

pentapod.github.io

おかげさまで売れ行きは順調で、Twitter等でも感想を見かけることがありとても励みになりました。有り難い限りです。 ところで、この本は組版Vivliostyleを利用したCSS組版を採用しており、 組版について言及したツイートも頂きました。

せっかくなので、「はじめる React Native」を入稿するまでに行った手順を紹介しようと思います。

f:id:spring_raining:20160822013749j:plain

執筆

CSS組版を使うにあたり、どのような形で原稿を書くかは少し考えるところでした。 CSSでレイアウトを作成するため、当然最終形はhtmlになるのですが、生でhtmlを書くのは面倒ですし、 かといってMarkdownからhtmlを生成する方法ではレイアウトを考える時点で柔軟性が足りない可能性がありました。 そこで、今回はPug(Jade)を使ってhtmlを生成することとしました。

f:id:spring_raining:20160822010252p:plain

Pugについては公式ページを見れば一目瞭然なのですが、これはインデントで入れ子を表現する形のhtmlテンプレートエンジンです。Pugにはフィルタ機能があり、これを使うことでテンプレート内でMarkdownを使うことも可能です。これであれば、執筆時にあまり手間を掛けずに思い通りにhtmlタグを作ることができます。

f:id:spring_raining:20160822010758p:plain

このような感じでmarkedcodeといったフィルタを作成し、その中に文章やコードを書いていきました。PugのビルドにはGulpを使ったビルドスクリプトを用意して、htmlを生成しました。

レイアウト

執筆と平行して、ページのレイアウトの試行錯誤も行っていました。 レイアウト前は単にCSSを組む作業だと思っていたのですが、この工程が存外に時間がかかり難航しました。 これはVivliostyleがまだ策定中のCSS仕様を先取りで実装していてインターネット上に情報が少なく、Vivliostyleで使うことのできるCSSの情報を得るためには、W3Cを資料を読むしかないという状況が多くあったためです。(CSSEPUBの勉強にはなりましたが…)

実際にレイアウトを行う際にはこちらのVivliostyleサンプルページが非常に参考になり、特に「CSSシークレット」はCSSソースコードのかなりの部分を流用しています。

実際のCSSStylusで書いており、レイアウト作成中はVivliosytle.jsでプレビューを行って、最終的にはChromeの印刷機能を使って完成品となるpdfを生成しました。ここで、後述するテンプレートにピッタリ合わせるためにCSSでページサイズを182mm 257mmに、余白を3mmに設定しています。

入稿

印刷はグラフィックに依頼しました。オフセットB5フルカラー(表紙:片面カラー/マットコート/135kg 本文:52ページ/上質/90kg) を100冊印刷して89,460円です。学割が効けばここから1割引してくれます。

www.graphic.jp

グラフィックでは入稿用のテンプレートが用意されており、入稿を行う時はIllustratorを使って手作業でpdfのページをテンプレートに貼り付けていきました。この時、フォントのアウトライン化に漏れがあり、再入稿を行ったため早期入稿を逃してしまいました…結局テキスト全選択→アウトライン化→保存をバッチ処理にして行ったのですが最初からこうすれば良かったですね。

技術系同人誌を作ろう

普通こういった情報はブログやQiitaなどで公開することが一般的ですが、僕は一冊の本としてまとめた形で公開するのも一つの手段だと思っています。体系的にまとまった情報は、インターネット上では貴重なものです。ぜひ世界中で他にはない同人誌作りにチャレンジしてみてください。

文章以外のファイルを公開しています。完成形となるCSSソースコードは実家のPCに置いてしまいコミットできていませんが、来月くらいに修正します。

github.com

「はじめる React Native」は電子版でも販売しています! 書籍版も取り置き承ります🙏ご興味あればどうぞ🙏

pentapod.booth.pm

Arduinoから取得した情報をMackerelで見る

ゴールデンウィーク暇すぎて,以前衝動買いしたArduinoで何か作れないかと思い立ち, 部屋の温湿度を見られるようにしようということになりました.

TL;DR

github.com

Arduino→PC

使用した部品は以下の通りです.見た限りDHT11以外はArduinoをはじめようキットに含まれているようなので,そっちを買うのが手っ取り早いです. (なお,僕はこのキット日本橋にて9000円で買ったのですが,同等品がAmazonにて4000円以下で売られていることをTwitterで教えられめっちゃ不機嫌になったのでAmazonで買うことをおすすめします)

  • Arduino Leonardo
  • USBケーブル
  • 温湿度センサ DHT11
  • カーボン抵抗 10kΩ
  • ブレッドボード
  • ジャンプワイヤ 4本くらい

Arduinoと部品を以下のような感じで繋いでいきます.

f:id:spring_raining:20160504212213p:plain

https://www.arduino.ccからAuduinoのIDEをインストールしたら,「スケッチ>ライブラリをインクルード>ライブラリを管理」から,「DHT sensor library」を検索してインストールします.

ライブラリをインストールしたら,早速Arduinoで実行してみます. GitHubに上げているwatcher.inoIDEにコピペしてみてください.

ArduinoをUSBで接続したあと「ツール>シリアルポート」を確認し,接続したあとに現れた項目を選択します.また「ツール>マイコンボード」でArduino Leonardoを選択します.そして「スケッチ>マイコンボードに書き込む」を実行すると,Arduinoにプログラムが書き込まれます.

f:id:spring_raining:20160504230122p:plain
書き込みに失敗すると下の欄に真っ赤な文字でヴァッとエラーが出力される

書き込みが終わったら正しく動作しているか確認してみましょう.「ツール>シリアルモニタ」を開くと,Arduinoから送信されるシリアル通信を表示できます.(ボーレートは9600bpsとしておきます)

f:id:spring_raining:20160504214816p:plain

PC→Mackerel

Arduino側が完成したら,常時起動してArduinoからの信号をMackerelに送信するPCを用意します*1.今回は自室の片隅で動いている録画サーバーにぶっ込むこととします.ちょうどこのサーバーでは既にMackerelを導入していたので好都合でした.

PC側で実行するスクリプトは,シリアル通信を受信して標準出力を行うだけなので,各自お好きな言語で書いたらいいと思います.今回はJavaScriptで書きました.作成するスクリプトの出力は,以下のページの仕様に従うようにします.

mackerel.io

具体的には,プログラムを実行すると,{出力項目の名前}\t{出力項目の値}\t{UNIX時間}という行を表示したい項目(温度,湿度など)の行数だけ出力するようにします.

また,環境変数MACKEREL_AGENT_PLUGIN_METAに1が設定された状態で実行すると,1行目に# mackerel-agent-pluginを, 2行目からは設定情報を含むJSON形式のテキストを出力するようにします.

$ node main.js
odango.humidity.my_room 19.00   1462368181053
odango.temperature.my_room  22.95   1462368181053

$ env MACKEREL_AGENT_PLUGIN_META=1 node main.js
# mackerel-agent-plugin
{
  "graphs":{
    "odango.temperature":{
      "label":"Temperature",
      "unit":"float",
      "metrics":[
        {"name":"my_room","label":"My Room"}
       ]
    },
    "odango.humidity":{
      "label":"Humidity",
      "unit":"percentage",
      "metrics":[
        {"name":"my_room","label":"My Room"}
      ]
    }
  }
}

もし僕の書いたコードをそのまま使うのであれば,GitHubからコードをcloneしたあとmetrics.sample.jsondefs.sample.jsonをそれぞれ metrics.jsondefs.jsonという名前でコピーし,適宜JSONの内容を書き換えて下さい.

スクリプトが完成したら,Mackerelの設定ファイル(/etc/mackerel-agent/mackerel-agent.conf)に以下の内容を追記します.

[plugin.metrics.arduino]
command = "node /path/to/script/main.js" # 作成したスクリプトを実行するコマンド

忘れずにArduinoを接続したら,mackerel-agentを再起動してmackerel.ioを見てみましょう.1分ごとにグラフが伸びていくはずです.

f:id:spring_raining:20160504225248p:plain
17:30頃だけ湿度が上がっているのは,温湿度計に息をハーッってやったせいです

所感

電子工作ができなくても,ArduinoとMackerelどちらもシンプルな仕組み&ネット上に情報がたくさんあるので,拍子抜けするくらい簡単に終わります.興味のある方はぜひ.

ただ,Mackerelの無料アカウントでは1日しか情報を表示できないのが残念.せめて7日だけでも…

Arduinoをはじめよう 第3版 (Make:PROJECTS)

Arduinoをはじめよう 第3版 (Make:PROJECTS)

*1:「常時起動しているPC」のハードルが高いようなら,Raspberry Piを使うのもいいでしょう

マレーシア行ったけど最高だった

2月末から4週間語学留学のため、マレーシアのクアラルンプール(KL)で過ごしていました。 ところが、マレーシアは観光地としても最高であることが判明しつつあります。

f:id:spring_raining:20160321224445j:plain

料理

マレーシアの多民族文化によりバラエティ豊かな料理が(格安で)食べられます。

手っ取り早く食べたければ、ショッピングモールのフードコートに行くことによりマレー、中国、インド、タイ、韓国、日本(妙に高い)料理にありつけるでしょう。

f:id:spring_raining:20160321224226j:plain
220円でうまいうまい

f:id:spring_raining:20160321215530j:plain
ブリヤニロティチャナイ

ビールが飲みたくなればチャイナタウンへ、 アラブからの観光客も多いため、KLには中東料理店も多くあります。

f:id:spring_raining:20160321214855j:plain
地味に値段の張るアロー通りの屋台

f:id:spring_raining:20160321215109j:plain
マトンケバブ

当然南国のフルーツもよりどりみどりです。 小さな果物ナイフを用意して、マンゴー、ドラゴンフルーツ、マンゴスチンロンガン、サワーソップを食べましょう

f:id:spring_raining:20160321220122j:plain
安定のマンゴー様

f:id:spring_raining:20160321220222j:plain
サワーソップは柔らかくなるまで待て

マンゴスチンはいいぞ。

観光スポット

マレーシアはイスラム教が国教で定められており、入場可能なモスクが多くあります。

とはいえムスリム一辺倒ではなく、すぐ近くにカラフルな寺院や白い教会があったりする。

f:id:spring_raining:20160321220741j:plain
イスラム美術館に隣接する国立モスク

f:id:spring_raining:20160321221148j:plain
ヒンドゥー寺院の砂絵がすごいと話題に

中心部はよく交通機関が整っていて、観光スポットは初乗り30円の電車と地下鉄、 モノレール、無料のGOKLバスでほぼ巡れます。会話をする際もほぼ全員が英語を話せるので、英語が理解できる人は何の問題もないはずです。 *1

また外は暑いので、至る所にあるショッピングモールで涼みながら観光しましょう。

f:id:spring_raining:20160321223734j:plain
写真は春節です

クアラルンプールに飽きたら他の地方へ遠出しましょう。 マレーシアにはエアアジアという神が存在し、国内至る所へ激安で飛ぶことができます。 バスに乗ってKLIA2へ行き、様々な島へ飛びましょう。

ところでマレーシア第2の観光都市はペナン島らしいですが、あまのじゃくなのでランカウイ島に行きました。

f:id:spring_raining:20160321221453j:plain

島は最高。レンタカーを借りられたらなお良かったですね。

治安

これほど多民族の国にもかかわらず治安は良く、1ヶ月過ごしても危険を感じたりスリに遭うことはありませんでした。 まれにいる呼び込みも一言断ればあっさり帰ってくれて、むしろ日本のほうがしつこそう。*2

f:id:spring_raining:20160321221941j:plain

ただ、今はテロの可能性が高いせいで、ショッピングモールなどではときおり軍が警備をしています。 日本のようなノーガード戦法とは違うことを実感するでしょう。

インターネットは偉大

マレーシアは良い国ですが、もしインターネットが無ければマレーシアに行くことはなかったでしょう。

道に迷ってもGoogleマップを開けばいいし、飯の場所に困った時もTripAdvisorで検索すれば解決します。 GrabやUberを使えばタクシーもすぐ呼び出せます(使う機会は無かったですが)。最高な時代だと思いませんか?

そんなわけで、マレーシアに行くときは忘れずSIMフリー端末を用意しましょう。 ついでに写真をTwitterにアップしまくりフォロワーに自慢しましょう。

マレーシアへ行こう

*1:僕は理解できないのでタクシーで疲弊した

*2:個人の感想です

7E0

一年の計はなんとやら、というわけで、今後の目標のようなものを考えています。

使ってもらえるアプリケーション制作

最近までは、Girafの開発をしていました。出来上がったものは確かに多機能でしたが、使いやすさという面では独りよがりなものになってしましました。今後はGirafに限らず、誰でも使いやすいようなアプリケーションを作っていくのを目標にします。

また、これからはプロモーション的な事にも力を入れたいですね。せっかく作ったのに誰にも使ってもらえないほど悲しいものはありません。というか、使ってください!!!

英語

英語、僕は読む方は出来ないことはないのですが、聞いたり話したりに関しては本当にだめで、何とかしたいと思っていました。

丁度アルバイトでお金が貯えられつつあったので、2月下旬から1ヶ月語学学校に留学に行くことにし、今はもろもろの手続きを行っているところです。予算を鑑みて、行き先はマレーシアにしました。

とはいえ、気分はほぼ旅行という感じなのでまるで身につかなそう。今もマレーシアについて調べていますが、ナシレマ、バクテー、ラクサとどれも暴力的に美味しそうな食べ物ばかりで、英語ではなく飯情報ばかり身についています。

コミケにサークル参加

ここ数年はコミケに行くことが恒例となっているのですが、最近は一度自分で装丁した本を作ってみたいと思っていました。今度の夏コミに向けて申し込む予定です。

肝心のネタはいくつか考えているので、その中で一番実現可能なものが完成品になりそうです。が、果たして完成するのか。

卒業

ところで、上の目標って大学に復学したときのことを全く考えてないような…卒論…院試…ウッ頭が… 大学生活不安しかない。目標は前期のうちに取りこぼした単位を全て取り切ることです。

絶対に1年で卒業する。多分… きっと……

f:id:spring_raining:20160113224642j:plain

AnsibleでChinachuを高速構築

この記事は OUCC Advent Calendar 2015 の17日目の記事ですが遅刻してますすみませんすみません( ˃﹏˂ഃ )

昨日は @Riku_Hirasaka さんの ベトコンは大人しく貴様のヒサツ・ワザの披露を待っていてはくれんのだ (?)でした。

そうだ、Chinachu、乗り換えよう。

コンピューターに出来ないことは少ないです。 ウェブを見たり、プログラミングをしたり、曲を作ったりもできますし、当然アニメを録画することだってできます。僕も自作のサーバーに Foltia ANIME LOCKER と呼ばれるソフトウェアを導入し、愛用しています。

録画サーバーについては、去年のアドベントカレンダーにも記事にしています。

spring-raining.hatenablog.com

・・・

あれから2年半後、我が録画サーバーにある異変が起こっていました。

ごちうさ*1が録画されない

なぜこのような事が起こるのかは未だ分かっていませんが、とにかくごちうさが始まる土曜日の夜以降の録画が始まらないという現象が起こってしまうようです。

ひとまず番組の始まる直前にサーバーを再起動することで症状が治まっていますが、この現象により尊いごちうさのストリームを3羽も取り逃がしてしまいました。

この時僕は決意しました。

そうだ、Chinachu、乗り換えよう。

#

しかし、稼働している録画サーバーのシステムを取り替えるのはそう単純にはいきません。なぜなら、深夜アニメはほぼ毎日放送されており、のんびりとインストール作業や動作テストを行っているとその日のアニメに間に合わない可能性があるからです。また、もう一つ乗り換え先のサーバーを用意する手もありますが、それではお金がかかりすぎてしまいます。

幸い間もなくやってくる年始は番組改編期となり数日の猶予があるので、正月休みを利用して一気にサーバーの構築を済ませてしまうことにしました。

ただ、それでもあまり時間に余裕は無いので、今は年始に向けておせちを作っています。

#

そのおせちの一つが、以下のリポジトリです。*2

github.com

これは、Ansibleと呼ばれる構成管理ツールを利用しており、playbookファイルを用意して実行することで、そのファイルで記述された通りに自動でサーバーのセットアップを行ってくれたりします。Ansibleを用いることで、年始のサーバーのセットアップを自動で行い、サーバー稼働までの時間を短縮するというわけです。

また、Vagrantで仮想サーバーを作成し、録画サーバーのセットアップのリハーサルを行えるようにもしてます。

odangoでは、最近発表されたOttoを利用して、デプロイまで一括で管理することも目論んでいましたが、現状ではデプロイ先にAWSしか指定できないようなので見送っています。

Dockerもサーバー管理が非常に便利になるツールですが、頻繁にサーバーにsshする予定ですし、コンテナ化も用途的にあまり向いてないと思い使用しないことにしました。Dockerfileつらい。

#

odangoは以下の記事を大いに参考にして作成しています。ありがとうございます。

クリスマスに安心して一日中アニメを見るために録画鯖を作る技術

正直この記事以上のことはほとんど行っていないのですが、以下のようなplaybookも追加したりしています。

まだいろいろと修正が入りそうですが、ともかくこれで安心して新年を迎えることが出来そうです。

皆さんよいお年を!

*1:http://www.gochiusa.com/

*2:odangoの名前の由来は、ゆゆ式1話ゆずこのセリフ「お団子美味しかったよー」から