Retired Colourman

何度も朝がやってくる

Pug(Jade)でgulpを使って複数のjsonファイルをいい感じに読み込みたい

目的

Pug(Jade)にJSONオブジェクトを渡して楽したいことがあると思う。

{
  "title":"最高のWebページ",
  "description":"最高のWebページです",
  "author":"最高の作者"
}

html(lang="ja")
  head
    title=title
    meta(name='description',content=description)
    meta(name='author',content=author)

pugファイル内でオブジェクトを変数宣言しようとしても複数行に渡る変数宣言はエラーになってしまうので、オブジェクトを書きづらいという問題がある。 なので「jsonでオブジェクトを書いてそれをどうにかしてpug内でincludeしてよしなにやりたい」となるんだけど、jsonファイルをpugの中でincludeして使うことはできないので、それをどうやるのかが割と課題だったりする。 さらに欲を言えばこんなふうにもしたい。

.
│   index.pug
~
│   
├───json
│       index.json
│       en-index.json

ってやって、jsonファイルの中にそれぞれの設定ファイルをしこんでおきたい。

解決

gulp-jadeとgulp-dataを使う。

まあだいぶ無理やりな解決なんだけど、jsonフォルダ内の中身をみて、その中にはjsonファイルしかいれないようにする。それでそのファイル名でdataの中にjsonオブジェクトを格納してjadeコンパイル時に渡すことができるので、たとえばindex.jsonの中身はdata.indexでアクセスできる。それぞれのpugファイルの先頭に例えば

- var option = data.index

みたいに書いておけば、includeするファイルにも対応できるはず。

2016年7月 月報

随分と遅くなりましたが7月の月報を書きます。

7月のイベント

7月中はいろいろなことがありました。詳細を書くのは許されるのか微妙なラインなため、とりあえず省きますが他大学に行ったり小さい勉強会に参加したりしていました。

大学のROBOT PBL

大学のプログラミングの授業でロボットを操作して躍らせるという課題があったのですが、あまりにもその内容がひどかったのでキレていたような気がします。

なにがいいねだよという気分になってきた。講義文を書いて送りつけたらそれなりに意味があったみたいなので良かったんだろうか。

大学の期末試験

いろいろやってました。イマイチ上手く行かなかったし、やっぱ授業中に全力でステ振ってやったほうがよい気もする。

作ったもの

特に無い気がする……

よんだほん

技術書典で買った本を幾つか読みました。

ヤングブラック・ジャック 10 (ヤングチャンピオンコミックス)

ヤングブラック・ジャック 10 (ヤングチャンピオンコミックス)

アイドルマスター ミリオンライブ! 4 オリジナルCD付き特別版 (ゲッサン少年サンデーコミックス)

アイドルマスター ミリオンライブ! 4 オリジナルCD付き特別版 (ゲッサン少年サンデーコミックス)

このあたりも読みました。ゲッサンミリオンはそろそろ終わってしまうらしくて悲しい。

存在の耐えられない軽さ (集英社文庫)

存在の耐えられない軽さ (集英社文庫)

面白かったです。小説という名を被った独白という感じでした。文体が好きだったんですが、疲れているときに読んでいたのもあってゆっくり読んでいた気がする。ちゃんとした感想を覚えていない。

所感

今月はちょっとひどい。来月の月報はまともに付けます。日報もつけ始めたことですし。

Webサイト開発とかについて

使っているもの

Markup language

(Markup Languageというくくりが正しいかどうかはわからない)

Haml

結構前から個人的に使っているという理由でhamlを使っている．特に深い思いいれがないのとruby製だからnodeとかで叩くのがつらいという問題があるので，できれば他のものに変えたい(Jadeあたりを考えている)

SASS,SCSSの類は使っていない．使えれば使いたいが，あまり大きくないので別にいいかなとも思う

開発ツール

gulp(とnpm)

Gulpを使っているのは一番最初に手をつけたビルドツールがgulpであるからである.gulpでwatch系を叩けるようにして，そのあとにnpm run start(npm start)で全部一気に解決できるようにした感じ．

gulp-ruby-haml

github.com

gulpからコマンドを叩いて解決してくれる感じ．便利なんだが，エラーの吐き方がおかしいのでどこが間違っているのか目で探さなきゃいけなかったりしてつらい.

local-webserver

www.npmjs.com

これを使ってる．npm scriptで起動できるようにして便利に使える.

ただ，パス周りをわりと解決してしまうので更新する前に python の SimpleHTTPServer でどういう挙動するか確認する．もっとまともな方法がありそうだとは思っている．

npm-run-all

www.npmjs.com

サーバーとwatchのタスクを並列で走らせて便利ってなってる．

"scripts": {
    "watch:gulp": "gulp watch",
    "watch:server": "ws",
    "start": "npm-run-all -p watch:*"
  },

開発方法

GitHubのレポジトリで開発している．

新しい機能を開発するときは

  1. とりあえずローカルでブランチを切る
  2. 開発を勧める
  3. 全部できたらmasterにマージしてからpush

という流れを踏んでいる．結構小さい修正のリクエストが来ることがあるので，ブランチを切っておくことですぐにmasterに切り替えを行って作業できるようにしておいたほうがよい．あと細かい修正はすぐにmasterで行えるようにしておくこと.

これからの展望

Hamlをやめる

他の使いたい．今はjadeが一番気になっています．

Jade - Template Engine

SASSあたりの導入

CSSの書き方が雑すぎてルールを決めないといけないなという気持ちがあるし，それを期にSASSあたりを導入して幸せになりたい．

もろもろのルール

画像ファイル名とか決めておかないとつらい気持ちになる．GitHubのwikiを活用していい感じに幸せになりたい．

2016年6月 月報

月報

もういつの間にか夏至を過ぎていました……今月の月報です。

6月の出来事

IVRC参加決定

IVRCという大会に参加することになりました。

IVRCには企画書の段階で書類審査があるのですが、それには合格することができたのでよかったです。VRや触覚・視覚に対しての知識がないことが改めて認識できてので上手くやっていきたい。つうかけっこうきつそう。

セキュキャン応募→落選

セキュキャンもやってみるかと応募したのですが、残念ながら選考に落ちてしまいました。まだ来年もチャンスがあるので、来年はもっとしっかりエントリーシートを書こうと思います。

(落選で言葉の使い方あってましたっけ)

技術書典

何か本を出そうかなと思っていたのですか、そんな余裕はなく普通に参加しました。いろいろ特徴的でよかった。またあると嬉しいな。

#技術書典

作ったもの

発表

プログラミング初心者のためのTips

プログラミング初心者のためのTips - sh4869.net

サークルのほうでLT枠があるのでそこで発表しました。個人的に「コレに納得できればある程度のものは作れるようになる」といったラインを目指して項目を作りました。いろいろツッコミとかいれてくれると嬉しいです。

プログラム

hubot-todoist

github.com

TodoistをSlack上で操作できるようにとTodoistのbotを作ったのですがAPIの筋があまりよくなく、途中で萎えてやめてしまいました……

つかってみればわかると思います。

読んだ本とか

すごいHaskellたのしく学ぼう!

すごいHaskellたのしく学ぼう!

すごいHaskellたのしく学ぼう!

今読み進めている感じです。12章あたりからよむスピードが落ちている……

はじめてふれたのですが、面白い言語だなぁと思いました(小学生並みの感想)。QuickSortのプログラムがめっちゃ綺麗で感動したりしていました。

新米姉妹のふたりごはん

新米姉妹のふたりごはん (1) (電撃コミックスNEXT)

新米姉妹のふたりごはん (1) (電撃コミックスNEXT)

よさ。読んでいるとお腹すきますね。

やがて君になる

やがて君になる (1) (電撃コミックスNEXT)

やがて君になる (1) (電撃コミックスNEXT)

話題になっていたので買いました。結構展開とかも面白くて、二巻を早く買いたいなーという感じでやっています。あの主人公の擦れた感じが最高にすき。

所感

空回りしている部分があるような気がしていてちょっとつらいです。もうちょっと丁寧に学習することを意識していかないとそのうち死にそう。

来月も上手くやっていきましょう。

2016年5月 月報

段々と徹夜をすると次の日に暑さで体力をやられる日々になってきましたね。月報を書いていきます。

5月のできごと

5/2 「劇場版 響け！ユーフォニアム」鑑賞

anime-eupho.com

タイムラインにガルパンおじさんが大量発生するなか、友人に誘われたので「劇場版 響け！ユーフォニアム」を見に行きました。

演奏シーンの迫力とEDがとてもよかったです。総集編だったので無理して見る必要はないけれど、見に行って損はしないという感じでした。

5/14 ジンジャエールハッカソン 2.5

gingerhack.connpass.com

勝手にやったりしてました。あんまりちゃんと開発をするという感じではなかったので、2.5回という感じにしました。3回は何かちゃんとテーマを決めて行いたいですね。

5/22 大学の学祭

ロボットサークルに参加していたので、そこでの新入生参加の大会に参加していました。

長い時間かけて作業したのですが、結果はあまり芳しくなかったです…。メンバーの多くに知識があったためか、懲りすぎてしまい、製作期間に見合わない予定を立ててしまったのが大きな敗因かなぁという反省をしています。こんな経験は前にもした気がするのですが、学習していないですね。

5/28 2046

5月28日 新専攻設置記念シンポ「インタラクション2046 〜メディアサイエンスがつくる新たな体験・知能・文化」 | 先端メディアサイエンス学科 ｜ #明治FMS

友人に気付かされて慌てて家を飛び出して参加してきました。いろいろな話が聞けて面白かったです(生産性のない感想)。2046年ごろまでには起きているであろうパラダイムシフトを予測する人からどう迎えるべきかという人までいて、聞いていて純粋に楽しかったです。プレゼンがうまくなりたい。

作ったもの

github.com

大学のサークルにて行われた自己紹介プレゼンイベントで使うために作りました。自分でプレゼンツールを作るというのは一度やってみたかったので、結構楽しかったです。

OSS Contribution

OSS Contributionと言えるほどのものなのか甚だ疑問ではありますが、いくつかプルリクを送ったりしました。

Use git user name for author name by sh4869 · Pull Request #304 · google/stagehand · GitHub

Add dev_compiler by sh4869 · Pull Request #37 · yissachar/awesome-dart · GitHub

Add dartlang-users-jp by sh4869 · Pull Request #38 · bokuweb/slack-list-ja · GitHub

GitHubに存在するいわゆるawsome系のレポジトリは、作者がアンテナを張る力が弱かったり、更新速度が低かったりするとあまり意味を成さなくなってしまう問題があるので、なんとも言えないなぁという印象です。

読んだ本

となりのロボット

となりのロボット

となりのロボット

多分こういう作品を優勝と言うのでしょうね…

最高でした。西UKO先生の作品は前からずっと好きだったのですが、となりのロボットだけは読む機会が持てず読みたいと前々から思っていました。しかし、西UKO先生の本は装丁が丁寧なのもあり実物の本が欲しかったため、なかなか購入できておらず焦がれるような日々を送っていましたが、ようやく購入することができました。最高でした。マジで。これが優勝だ。これ以上感想を書いても語彙が減っていくだけなのでやめておきますが、皆さん買いましょう。Kindle版もあるよ。

所感

大学に関してはこのような感じです。

まあそんなものなのかもしれません。

かなり忙しくて息をつく間のないといった感じの5月でした。自分の限界がわかっていないのでどこで倒れるかを試しているような感覚が自分のなかであってあまりよろしくないなぁとは思っているのですが、どうにもいろいろやっているときが一番落ち着いていられるのもあり、どうにもいろいろな予定を追加している現状です。 最終的に何もかも失敗して終わるという未来だけは避けたいので、うまくやっていく必要はありそうです。来月も頑張ります。