2016年02月29日
福井技術者のつどいも5回目
いつのまにやらもう5回目の開催となりました。東京に就職してからは、数回の開催を遠くから眺めているだけの存在でした。
今回はちょっと個人的な成果もあったので、久々に参加してみようかと思い、足を伸ばしてみた感じです。
思うこと
特に今回は、なのか、僕が久々に参加したからそう感じるだけで前からなのかはわからないですが、参加者に学生が少ないと感じました。
こういう催しは参加者が情報技術に関心のある人に偏りがち、という問題があるにせよ、福井県には情報技術関連の学科がないわけではありません。
もちろん福井大学には情報メディア工学科があります。会場のjig.jpさんがある鯖江市には福井高専があります。
高専生は、この時期は進級のこと、就職活動のことがあるとはいえ、基本的には何もない時期ですし、福井大学生は春休みの真っ最中です。
友人のつてで前日に興味のある人は来てみてねと誘ってみましたが音沙汰はなく、物理学科の友人が来てくれたのみでした。
(とはいえ、前日に言うのも悪いですが)
まあ、福井大学にはまだ繋がりがあるだけいいですが、問題は福井高専です。
後輩の猫神くんも卒業し、のほ君が最上級生になる今年。僕は、それより下の後輩に対する繋がりが全く無いのです。
IT研の様子もわからないし、頼る宛は先生方、ということになるのでしょうか。
とにかく、合う合わないがあるにせよ、一度は来てほしい、一度は発表してほしい。と思ってしまうのは主催を経験している僕のわがままでしょうか。
配信
今回、僕は個人機材を持ち込んで配信させていただきました。
配信しての感想ですが、カメラの置き場所をもうちょっと前にしたら一番後ろの通路を塞がずに済んだのかなと感じました。それがどれくらい障害だったかはわからないですけれども。
あと欲を言うなら、マイクの入力を拾いたいです。
まとめ
第6回があるとして、その時は福井大学生、福井高専生の参加者が増えていることを願います。
2016年02月28日
はじめに
これからの一連の記事は、2016年2月27日に行われた福井技術者の集い その5での僕の発表した内容を、加筆ならびに修正し、よりわかりやすくまとめ直したものとなります。
つくりかた記事リスト
静的Webサイトとは
これから作成する静的Webサイトとは、twitterやfacebookなどのような、アクセスに応じて配信するファイルが変化するようなものではなく、このブログのように、決まったhtml、css、JavaScriptのファイルを返す単純なWebサイトのことを指します。
静的Webサイトを作る道具
さて、静的Webサイトをつくるのに必要な道具は、極論を言ってしまえばテキストエディタ以外に必要ありません。
しかし、htmlの手書きは、閉じタグを忘れたりすることもあります。cssの手書きは、デザインによってはベンダープレフィックス(webブラウザによって異なるスタイルの書き分け)などを全て書き並べる必要が出てくることもあるでしょう。
デザインのうえでの共通部分(ヘッダーやフッターなど)も、全てコピーアンドペーストするのでしょうか？
そこで、静的Webサイトを作ってくれるツールを使って、作っていきます。
静的Webサイトジェネレーター
静的Webサイトを作ってくれるツールのことを、「静的Webサイトジェネレーター」と呼びます。
Top Open-Source Static Site Generators - StaticGenに主要な静的Webサイトジェネレーターが載っていますが、とにかく量が多いです。
一体どれを選べばよいのでしょう。
今回は、このブログでも使っているmiddlemanを使用します。
採用の理由としては、
などです。
同じくRubyで書かれている静的Webサイトジェネレーターにjekyllがあります。こちらはGitHub pagesという簡単に静的Webサイトを作成できるGitHub上のサービスで採用されているツールです。
middlemanで静的Webサイトをつくる
Rubyの環境構築
middlemanはRubyで書かれているので、PCにRubyの実行環境がない場合は、環境を整えてやる必要があります。
Rubyの開発環境構築は、OSごとに書くとそれだけで記事が一つ出来上がるので、ここでは解説サイトへのリンクを掲載するのみに留めます。
middlemanをインストールする
middlemanのインストールには、gemというツールを使います。gemは、Rubyに標準で組み込まれているライブラリをインストールするコマンドです。
以下のコマンドを実行することで、gemを使用したmiddlemanのインストールが行われます。
インストールはこれで終わりです。
middlemanの初期化
さて、middlemanでは、各種ファイルの置き場所が決まっています。それらの準備をmiddlemanにしてもらうために、以下のコマンドを実行します。(例えば今回作るWebサイトの名前を、hogesiteとします。)
$ middleman init hogesite
このコマンドの実行により、今いるディレクトリにhogesiteというディレクトリができ、その中にsourceなどの幾つかのディレクトリができているはずです。
さて、これからはこのhogesiteディレクトリで作業をしていくので、ターミナル上でもcdしておきましょう。
$ cd hogesite
$ pwd
/home/user/src/hogesite #pathはどうでもよくて、大事なのはカレントディレクトリがhogesiteであるということです
gitなどのバージョン管理システムを使用している場合、この段階で一旦コミット等状態の保存をしておくと良いでしょう。
middlemanの設定
middlemanは標準ではhtmlテンプレートエンジン(htmlを生成するためのファイルの形式)にerbを使用します。しかし、erbはほとんどhtmlのようなものです。また、cssも素のcssを書く必要があります。
htmlテンプレートエンジンにはslimを、altCSSにはscssを使います。これも、僕の個人的な趣味による選択です。
さて、slimとscssを使いたいのですが、そのためにはmiddlemanをインストールした時のように、外部ライブラリのインストールが必要となります。いちいちgem installしても良いのですが、それだとこのプロジェクトにはどの外部ライブラリが必要なのか？という情報がわからなくなってしまいます。
そこで、bundlerを使用します。Bundlerは、あるプロジェクトの依存関係の記述、またライブラリ間の依存関係の解決を行ってくれる、これもRubyのライブラリです。
以下のコマンドを実行して、bundlerに依存関係を指定するためのファイル、Gemfileを生成します。
$ gem install bundler #すでに入っている場合もあります
$ bundle init #コマンドの名前がbundlerでないことに注意してください
すると、次のようなGemfileが出来上がっていると思います。
# A sample Gemfile
source "https://rubygems.org"
# gem "rails"
これをひとまず以下のように書き換えます。
source "https://rubygems.org"
gem "middleman"
gem "middleman-livereload"
gem "slim"
gem "sass"
(middleman-livereloadはあると便利、という理由で追加しました)
そして、以下のコマンドを実行します。
これによって、bundlerがGemfileから必要な外部ライブラリを読み取り、ライブラリの間で依存関係を解決してインストールを行い、実際にインストールされたライブラリの情報をGemfile.lockに書き込みます。
そしたら、次のような設定をconfig.rbに記述します。先頭でも末尾でも構いません。
set :slim, { format: :html, pretty: :false }
set :sass, { style: :expanded, syntax: :scss }
この設定の意味は、slimの場合はここ、sassの場合はここ(英語)を参照してください。
ページを作っていく
さて、実際にページを作っていきたいのですが、その前にmiddlemanが最初に生成したerbをslimに変換してしまいます。
以下のコマンドを実行して、erb2slimというgemをインストールします。(Gemfileに記述する必要はありません。なぜなら、erbをslimに変換するためだけに使うからです。)
初期状態ではindex.html.erbとlayouts/layout.erbがerbファイルとして存在するはずなので、以下のコマンドで変換してしまいます。(-dオプションでerbファイルを削除しています)
$ erb2slim index.html.erb index.html.slim -d
$ erb2slim layouts/layout.erb layouts/layout.slim -d
あとは、あなたが好きなようにslimを書き、scssを書き、ページを作っていくだけです。
slimの記法は、日本語による解説がここにあります。
scssの記法は、英語による解説がここにあります。(SassとSCSSを切り替えて表示することができます)
参考までに、僕がmiddlemanを使って作成した静的Webページのコードを以下に掲載します。
確認しつつ書いていく
さて、素晴らしいwebページを書いている途中に、「これって、ブラウザではどんなふうに見えるのだろう？」と思うことはあるはずです。そんな時は、以下のコマンドを実行してみてください。
$ bundle exec middleman server
このコマンドを実行し、ブラウザでhttp://localhost:4567にアクセスすると、実際にどのようなページになるのかをブラウザで確認することができます。(Ctrl+Cで終了します)
また、middleman-livereloadをインストールした場合は、config.rbのどこかに次の設定を書いておけば、bundle exec middleman serverを実行中にファイルを編集すると、自動的にブラウザが再読込してくれて便利です。
configure :development do
activate :livereload
end
htmlに書き出す
作業も終わり、公開できるものが出来上がったとします。そしたら、次のコマンドを実行します。
$ bundle exec middleman build
このコマンドにより、html、css、JavaScriptが生成されます。このフォルダ以下のファイル群をサーバーに置いて、アクセスできるようにすれば静的Webサイトの出来上がりです。それはまた以降の記事で解説していきます。
公式ドキュメント
middlemanの公式ドキュメント(日本語)は以下のURLにあります。わからないことができたら都度見に行くと良いでしょう。
Middleman: インストール
次回予告
次回は、ドメインを取ることと、サーバーを借りてssh接続するところまでやりたいと思います。
2016年01月24日
このブログはオープンソースです。
特に主張などはしていませんが、このブログはunasuke/blogにて生成に関する部分や画像など、全てのコードを公開しています。
middlemanとh2oとVPSによるブログ構築にも書いたように、middlemanを使ってhtmlなどの生成をしています。
まだまだデザインの面でもいろいろしたいことはあり、外見が未完成ではあります。
Pull Requestが飛んできた。
というわけで、こういうPull Requestが飛んできました。
ライセンスが決まってなかった。
その場でPull Requestをmergeしてもよかったといえばよかったのですが、生憎とこのブログにはライセンスを定めていませんでした。その状態で他人からのPull Requestを取り込んでしまうのはあまりに危険と言える(？)でしょう。
というわけで、このブログはMIT LICENSEの元で公開することになりました。 Add license(MIT) · unasuke/blog@d418f1b
merge it
無事しました。
このブログはプルリク募集中！
ではないです。
この記事にあるように、バグ修正とかは大歓迎ですが、見た目が大きく変わる変更や、新規記事の追加(！)はしてほしくないので……募集はしていません。
まあでもなんかあったらプルリクお待ちしております。
2016年01月19日
2016年初サバゲ
インターネット界隈の人たちで交流サバゲをする - 良いあそなすちゃん に、参加しました。
追加装備
今回の参加にあたって、BDUなどを買いました。全部挙げると、ブーツ、BDU上下、スカーフ、ベルトですね。計16000円ほどでした。
ゲームルール
フラッグ戦、殲滅戦、人狼、昭和VS平成、サドンデスをやりました。
人狼
ゲーム開始前に1人1枚トランプをめくり、10以上なら狼、それ以外は村人とし、ゲーム終了時点で村人が生き残っていれば村人の勝ち、村人が全滅したら狼の勝ちというルールのゲームを行いました。
あまり銃弾の打ち合いはなく、銃声が聞こえると「えっなにこわいこわいこわいこわいこわいどっちどっち」とオロオロする感じで進んでいきました。後ろから撃たれました。
昭和VS平成
文字通り、昭和生まれさんチームと平成生まれさんチームに分かれて殲滅戦です。ただし、各チームに2人スパイがいて、ゲーム開始から2分後にスパイがコソコソと活動しだすというルールがありました。平成生まれさんチームは1敗2分けで、「財力だ」とか「経験の差」と悔しがりました。昭和つよい。
感想
もっと良い装備がほしいという物欲が刺激される非常に良くない最高の催しでした。
2015年12月27日
発端
やりたかったこと
当日
とりあえず集合した後、おにやんまに行って美味しいうどんを食べました。ちくわ天最高。
道すがら、近くに温泉があることが判明し、高まっていました。
道中で酒を大量に買い込み、会話がハイコンテクストであること、本名に「ゆ」が含まれるのが2人いた事から、ゆゆ式を見ないとダメという話になりつつ(伏線)やままハウスに到着しました。
なぜかやままハウスについた途端、言の葉の庭をNetflixで視聴し始めた結果、「金麦とチョコレートが食べたい」という気持ちになりました。金麦もチョコレートも買ってこなかったので、買いに行くことにしました。
買いに行く前に、ありたそさんが昨日クラブから直接大学、それからハッカソン参加ということで風呂に入りたいということになり、まず温泉に行きました。
温泉に行き、おもむろに僕らはサイゼリヤに行きました。なぜでしょう。全く覚えてません。
サイゼリヤでは、サイゼ飲みを極める！ コスパ最強イタリアンバルとしての『サイゼリヤ』初級～中級～上級編 ｜ ガジェット通信を参考にしながらとにかく頭の悪い会話をしました。
そして帰りに金麦、チョコレートを買い、僕、やままさんがゆゆ式を見たことがないのでゆゆ式を借りようとしたら、DVDの1巻、2巻がなく、代わりに僕が見たことがないアイドルマスターシンデレラガールズのアニメを1期分借りて帰りました。
上映会の幕開け
赤城みりあちゃんが登場した瞬間泣き出した人がいたり。
ニュージェネがバックで踊るシーンで僕以外全員泣き出したり。
新卒採用の話になったり。
飛び出した発言
- 「渋谷凛は全てをわかっている」
- 「渋谷凛は最高」
- 「母性」
- 「俺も初めてのdeployは緊張した」
- 「アイドルマスターシンデレラガールズはマネジメント」
- 「竹内P」
- 「だって黒沢ともよじゃん……」(泣いてる)
- 「杏はわかっていてデリゲートした」
- 「一番成長したのは竹内P」
- 「新卒採用は社会貢献」
- 「笑顔！！！！！！！！！」
- 「若さの勢いが大事」
- 「俺のおたく棒舐めんなよ！！！！！！最悪！！！！！！！」
- 「おたく汁が染みこんだおたく棒舐めた俺を尊敬してほしい」
- 「完全に日本酒」
成果
2015年12月23日
高専カンファレンス 100 in 東京
2015年12月19日、20日の2日間、電気通信大学で開催された高専カンファレンス 100 in 東京の運営に、副実行委員長として参加しました。
実行委員長であるところのなっちゃんの夢これをご覧になられた方はわかるかと思いますが、LINEで捕まった人間です。
会場ではウェイ系でしたが、ブログはしっとり系でいきます。
何してたどんな人か
- 副実行委員長業
- アイスブレイク担当
- 社会人
- カンファ参加7回目
- 運営スタッフ2回目
当日までの準備で言えば、ミーティングの議事録はもっぱら僕が担当していました。また、スタッフ間のコミュニケーションにはSlackを使用したのですが、そのSlackの準備をしました。公式wikiの更新も、ある時期までは僕が行っていました。副実行委員長らしい仕事といえばそれくらいです。
アイスブレイク担当としては、どのような企画を行うかの決定、タイムテーブル作成、当日説明用スライド作成、台本作成、部屋割り作成、当日の司会を行いました。
当日行ったアイスブレイク以外の仕事は、1日目はクロージングトーク、2日目は複数トラック発表の補佐、基調講演・LTの司会と銅鑼です。
つらつらと思い出
夢これの発表中にあったあのLINEのやり取りは、6月10日でした。そこから6ヶ月かけて様々な準備をしてきました。まずは、とりあえず目標としていた新春カンファレンスの実行委員長のひとり、RooandQooさんにアタックして新春カンファレンスの記録を頂きました。そのあとでスタッフを集め始めたりと、いろいろ動き始めました。
キックオフミーティングは8月11日に行われました。それから6回のミーティングをして、当日を迎えたわけです。
言い出しっぺのなっちゃんは強い信念というか、目標というか、思想を持っていました。おびなたさんに話してもらいたいというのもそうですし、アイスブレイクで打ち解けてもらいたいというのもそうです。僕はそのような思想を持ちあわせていない代わりに、その意見が実現可能であるか、困難であれば何から解決していくか、などの相談役として方向修正をするという役目でした。ごく初期は。スタッフが増えていくにつれ、そういった僕の役目は消失していきました。
例えば今回は電気通信大学で開催しましたが、手っ取り早く広い場所を借りる(回線も用意する)ならある企業のスペースを使わせてもらったほうがいいのではないかと思っていました。また2日間開催も当初は反対していました。
そこで「いや、電通大でやりたい」「2日間開催したい」という委員長の強い意志には何度も感心というか、尊敬というか、力を感じました。そしてそれは間違っていなかったと思います。
共有Dropboxのファイル更新通知のたびに上がってくる素晴らしいデザインを見るたび、カンファが形になっていくように感じられ、焦り、緊張、期待が大きくなっていくのを感じました。
アイスブレイクについて
僕がメインとなって担当したアイスブレイクの話をしていこうと思います。
アイスブレイクは、様々な事情(後述)により、本格的に動き始めたのは11月25日頃です。この時点で開催1ヶ月を切っています。絶対に真似しないでください。
実行委員長が「200人参加申請なかったらカンファ行かない」という旨の発言を前日にしていました。この時期(11月終盤)の参加者登録は確か150人程度で、僕はまさか200人もいかないだろうと思いつつも、アイスブレイクで許容できる人数の上限を200人としました。
結果的に参加申し込みは200を超え、1日目の参加者も141人と、まさかこうなるとは、という感じでした。
その後、アイスブレイク班(なっちゃん、僕、くりむぞんさん)のみでミーティングを重ね、最終的にアイスブレイクの全体が決定したのは12月9日(開催10日前)、当日使用する全ての物品の用意が完了したのは12月19日(開催当日)でした。絶対に真似しないでください。
目標としたこと
僕がアイスブレイクで目標としたのは、「なるべく多くの人と、がいいけど、最低1人、できれば2人の人と打ち解けてもらうことを目指す」ということです。
大きな開催となり、全国津々浦々から人が集まります。高専カンファレンス100の懇親を支える技術 - Labo Memoにある全国高専マップには、日本の北から南まで付箋が貼られています。
となると、twitterでフォローしてるけど会ったことがない人、twitterで見たことはあるけど会話はしたことがない人、初対面の人、などなど、コミュニケーションを行うのに壁を超えなければいけない人がたくさん居ます。
その壁を取り除き、顔とアカウント名を一致させたり、新たなフォロワーを増やしたりする、打ち解け合いのお手伝いをしたかったのです。
そして必ずやりたかったことは、「ものをつくる」ことです。その場で初めて会う人とも、「共にひとつのものを作り上げる」という体験を共有できれば、きっと壁はなくなるでしょう。それに、話をして「はい、終わり」では、あまりにも寂しすぎます。
そのためにどうするべきかというのは、短い時間ながらも様々な案を出しあい、これはどうか、これで本当に会話が広がるのか、と何度も検討を重ねました。そもそも200人全員で何かをするのは無理があるのはわかりきったことですが、それを4つの部屋に分けるとして、その部屋の中ではどうするのか。50人で何かをするのか。その50人も分けるのか。分けた後、最後に合わさるのか。様々なパターンが存在しました。その中のどれを選択すれば、参加者間の壁は無くなるのか。かつ、時間、空間、予算の釣り合いが取れるのはどこか。
それらのアイデアと、制約の中で生まれたアイスブレイクが、当日みなさんの体験したものとなります。
結果
僕の担当した202教室では、参加者同士の話し声、笑い声が絶えないよい雰囲気、望んでいた雰囲気を作り出すことができました。
前述の通り、アイスブレイクの物品の用意が完了したのが当日早朝だったということもあり、各部屋の司会、補佐それぞれには事前にスライドと台本を読んでもらうという、リハーサル全く無しのぶっつけ本番で挑んでもらうことになってしまいました。その結果として、最強人間を作ることができなかった部屋もありました。
冒頭でSNSを禁止したこともあり、アイスブレイク中の感想はあまりtwitterからは拾うことができませんでした。それでもアイスブレイク終了後、「楽しかった」というツイートがいくつかあり、とても嬉しかったです。
スタッフルームに帰ってきた後も、他のスタッフから良かったという言葉を聞くたびに、くずおれるかと思いました。
司会業ですが、僕は完全に経験で殴ったようなもので、他の部屋の様子がまったく予想できませんでしたが、感想ツイートからはうまくいったようです。ありがとうございました。
アイスブレイクの成果物(伝説巻物、最強人間)は、懇親会の会場に掲示しました。懇親会の最中は僕は完全にテンションがおかしくなってしまい、それらを掲示したことへの反応を伺うのをすっかり忘れていました。どうだったでしょうか。他の部屋、チームの伝説や最強は、思いもよらないものがいくつもあって、とても面白かったです。
裏話
アイスブレイクについて
ところで、このカンファのスタッフは17名とwikiには書いてあります。しかし、こまめにwikiをチェックしていた方がいれば覚えていらっしゃるかもしれませんが、実はもう1人スタッフがいた時期があります。mktakuya君です。
当初はmktakuya君がアイスブレイクの企画担当でしたが、どうしても当日に来ることができなくなってしまい、やむなくアイスブレイクの担当を僕へと移すことになりました。これがアイスブレイクの準備開始が遅れた原因です。
彼がアイスブレイクの担当であれば、また違った高専カンファになっていたことでしょう。
アイスブレイクの部屋割り
200.times do
puts "#{%w(101 102 201 202).sample} #{%w(A B C D).sample} #{%w(1 2 3 4).sample}"
end
値はそのまま採用したわけではなく、各部屋、各グループの人数が均等になるよう調整しました。
コミュニケーションツールについて
スタッフ間のコミュニケーションツールとして採用したのはSlackですが、初期にはidobataも検討していました。Slackを採用した理由、idobataを採用しなかった理由は特に覚えていないので、どちらを使ってもコミュニケーションには支障がなかったと思います。
ミーティングについて
アイスブレイク担当者のみで行った小規模なミーティングを除く、全てのミーティングは計7回行われましたが、その全てがピクシブ株式会社で行われました。ピクシブ株式会社様、ありがとうございます。
スタッフパーカーについて
スタッフパーカーは、TMIXで発注しました。とは言え、これについてはスポンサードしていただいたわけではなく、希望者各自が自腹で購入するという形式になっています。
テーマについて
今回のテーマは「Dreaming」ですが、案の中に「new daybreak」というものがありました。僕はこれが好きです。(言葉の響きが好きなだけで、テーマにしたかったわけではないです)
開催前日について
湯河原温泉「おんやど恵」の足湯フログラミングは開発合宿の新しいスタンダードになる - スパイスな人生
開催前日の18日まで、TMIXの開発合宿に参加していました。合宿中、僕がアイスブレイクの準備を行っている横であそなすさんがサブスクリーンをもりもり開発していくという、ある意味高専カンファレンス合宿とも言える時間が存在しました。
会議室が24時間使えるというのは本当にありがたかったです。
18日は宿泊用の荷物を持って移動を繰り返し、泊める約束をした肉好き君を迎えに行ったりして、前日の時点で脚がつらかったですが、1日目で崩壊しました。
歩数
ご確認ください。
2日目はとにかく脚がつらかったです。体調で言うなら、1日目のアイスブレイクでやらかしたのか、ずっと喉が痛くて、1日目の帰りに龍角散のど飴を買ってずっと舐め続けるという緊急対応をしました。2日目には90%くらい回復していました。
まとめ
とにかく、高専カンファレンス100 in 東京は終わりました。皆さんには楽しんでいただけたようで、こちらも嬉しいです。
参加者の皆様、お忙しい中お越しいただき、ありがとうございます。発表者の皆様、素敵で、面白い発表をありがとうございます。
スタッフの皆さん。個人の都合もあることでしょうが、そのような貴重な時間を、高専カンファの成功のために費やしていただき、ありがとうございます。素敵なデザインも、快適な回線も、打ち解け会えたアイスブレイクも、楽しい様々な発表も、目移りする複数トラック発表も、横で盛り上げるサブスクリーンも、しっかりしたtwitterアカウントの運用も、当日用意する様々な物品も、それら全てをまとめ上げ、高専カンファレンスを成功へと導いてくれたリーダーシップも、心から感謝しています。
「最初から3桁のナンバリングにしていてよかった」という意見がありますが、「最初に4桁のナンバリングにしておけばよかった」と嘆く日がいつか来るかもしれませんね。
2015年12月15日
初RubyKaigi
地域RubyKaigiも参加した覚えがなくって、これが初めてのRubykaigiでした。
発表の内容とかはtogeterなど見ればわかると思いますし、それぞれについて感想を書くのも疲れたので、印象に残っていることを書きます。
matzと迷子になる
1日目、道がわからないままに新橋駅から歩いていると、偶然matzをお見かけしたので、声をかけて道をご存知か尋ねたら知らないとこのことでした。2人でgoogle mapを見ながら歩いて、道を間違えて引き返したりしました。天候の話くらいしかできませんでした。
hsbtさんに直談判する
1日目にruby 2.3.0-preview2がリリースされましたが、それ関連で、あることが気になり始めました。
経緯
僕はrbenv-default-gemsを使っているのですが、これ、default-gemsの置き場が.rbenv/直下なんですね。で、何が困るかというと、rbenvの更新のたびにuntracked fileの表示が出てうざったいのです。じゃあ.gitignoreに追記すればいいじゃないかという事も考えました。しかし、rbenvのいちプラグインにすぎないrbenv-default-gems(それでも作者は同一人物ですが)のファイルの都合を、rbenvが見るのは違うと思います。なので、default-gemsの置き場を.rbenv/plugins/rbenv-default-gems/にして、rbenv-default-gemsの.gitignoreにdefault-gemsを追加する、というのが筋の通った実装だと考えました。
さてそんなPull Requestでも書こうかと思っていると、なんとすでにその前段階とも言えるPull Requestが存在しました。
Allow overriding default-gems location by cdlm · Pull Request #4 · rbenv/rbenv-default-gems
しかし、rbenv-default-gemsは最後のcommitが2013年4月で、このissueAbandoned? · Issue #13 · rbenv/rbenv-default-gemsにも全く反応がありません。停滞しています。
なので、ruby-buildにcommitしておられるhsbtさんにそのへんどうなってるのか直談判しに行きました。後で気づいたのですが、僕はてっきりrbenv organization が爆誕 - HsbtDiary(2015-11-26)を読んでhsbtさんがメンテナになったと思い込んでいたのが、よく読んでみるとメンテナはmislavさんでした。
それでもhsbtさんは僕の話を聞いてくださり、mslavさんに伝えておくとの好意的な回答をしていただけました。hsbtさんありがとうございます。
スタートアップの若者です。
koicさんとなかよくなる
koicさんは弊社と何かと関わりの深い(参考spice life様と合同勉強会を開催しました - 株式会社永和システムマネジメント アジャイル事業部)永和システムマネジメントさんの方なのですが、何かと予定が合わず今までお会いすることができませんでした。お会いできて良かったです。rubykaraokeではお世話になりました。
感想
- Rubyだいすき
- Railsだいすき
- プロジェクトの停滞きらい
- 御社ステッカーすき
- LTとか発表いっぱいしていきたい
とにかく界隈に知り合いがほとんどいなくて、気持ちがつらいというのがあります。僕は「きっと何者にもなれないお前たち」の「お前たち」のほうなので、とにかく人前に出て行かないと知ってもらえる機会なんてないんですね。
というけでせっせと手を動かしてなんか作って顔を出していきたい気持ちが高まっています。よろしくお願いします。
そして、発表者の方々、スタッフの方々、楽しい時間をありがとうございました。
追記
hsbtさんに直談判した件、こんな感じです。これに加えて自分でもPull Requestを送りたいと思います。
2015年11月24日
それは今年の5月のこと
smartnews社でのパーティーで、今年の抱負として「rubygemを2つ作ります」と宣言したのを、僕以外に覚えている人がいるでしょうか。
まあそれでも人は宣言したことはやるので、まとまった休みに重い腰を上げて人生初rubygemの制作に取り掛かりました。
その当時からgemにするならあれとあれ、というのは決まっていたのに、半年も先延ばしにするとは……
rubygemの作り方
$ gem install bundler
$ bundle gem gem_name
これで雛形は出来上がりです。あとはやっていきましょう。
rubygems.orgにアカウント作ってもcredentialを落とすところはないし、あちこちに書いてあるAPIへのリンクやドキュメントもないのでそこは少し手間取りました。書いてあるそのままを実行すればよかったです。
ceifpar
unasuke/ceifpar
これはRubyとrmagickでjpegのexif削除、サイズ変更ツールを作った話をgemにしたものです。
コマンドライン上でのみの操作だったものをメソッドに切り出し、テストを書いてgemの形に仕上げました。もともとがgemでなかったものをgemにしたので、commit logを見ればgemの作り方がなんとなーくわかるんじゃないかなと思います。そんなところまでわざわざ見る人はいないでしょうが。
ruboty-shibuyarin
unasuke/ruboty-shibuyarin
これはRubotyプラグインを作成したもので、まだ未完成(セリフの追加が終わっていない)ですが呼びかけに対しての応答はできるのでとりあえず出してしまえ、という感じのものです。テストの書き方がわからない。
テスト
それぞれでtest frameworkが違います。ceifparはminitestで、ruboty-shibuyarinはrspecです。まだまだどちらが書きやすいとかはなく、どっちにしてもどう書けばいいかでうんうん悩みながら書いています。
ceifparの方は画像を加工するので、testデータとして画像を持っておくべきかどうか考えましたが、画像の加工に関してはrmagick(imagemagick)を使用しており、どちらかと言うと責務はこちらにあるものではない、と判断しました。なので、ceifparの方のテストはjpeg判断と比率正規化のもののみとなりました。
rubotyの方はいろいろな方のリポジトリを見ましたが、どうにも呼び出しがわからず、今後の課題とします。
gemを作ってみて
終わらせると「こんなものか」と拍子抜けしますが、やってみる前は右も左もわからない状態でした。
こんな規模のgem、作れたところで自慢にも何にもならないのでしょうが、初心者からすると偉大な一歩に思えるものです。仕事でRails触り始めてもう1年が経とうとしている人が初心者を名乗るのもおかしいですが。
でも僕にとっては大きな一歩だと思っています。よっしゃやったるでという感じ。
とりあえず宣言したことをやり遂げたので満足です。あとセリフ追加します。
2015年11月23日
まずはdeploy方法
さてmiddlemanでbuildした記事は、どこかにdeployしないと公開されません。github pagesでもいいですし、herokuでも、Amazon S3でもいいでしょう。
ただ、僕はさくらのVPS上でh2oを動かしているので、それにそったdeployをする必要があります。
middleman-deploy
どのような方法でdeployするにしても、middleman-contrib/middleman-deployを使うことになると思います。これは便利です。
rsyncを用いてdeployしようと思い、このような設定をconfig.rbに書きました。
activate :deploy do |deploy|
deploy.method = :rsync
deploy.host = "blog.unasuke.com"
deploy.path = "/var/www"
deploy.user = ENV["MIDDLEMAN_USER"]
deploy.port = ENV["MIDDLEMAN_PORT"]
deploy.flags = '-rltgoDvzO --no-p --del'
deploy.build_before = true
end
deploy.userとdeploy.portが環境変数になっているのは、一応このblogのリポジトリは公開になっていて、この設定も誰でも見られるようになっている状態で、sshが繋がるポートを明記するのが危険だからです。
この状態で、
$ bundle exec middleman deploy
を実行すると、buildされ、deployされます。
自動化
さて、これをいちいち手でやるのは面倒です。なので、CIサービスを使って自動化してやります。今回はCircleCIを選びました。理由は使い慣れているからです。
とはいっても、masterにmergeされたら自動でdeployくらいの設定なら、こんなにも書かなくてよく、多分、ただdeploymentの項目だけ書けばいいと思います。
machine:
timezone: Asia/Tokyo
ruby:
version: 2.2.3
dependencies:
pre:
- gem install bundler -v 1.10.6
override:
- bundle install --jobs=4
test:
override:
- bundle exec middleman build
deployment:
publish:
branch: master
commands:
- bundle exec middleman deploy
ただ、よくわからないのは、この場合testとして何を実行すればいいのか、ということです。今はbundle exec middleman buildが成功することをテストのpassと見なしていますが、Circle CIではこの前段階にcompileとしてmiddleman buildが行われてしまうので、2重にmiddleman buildが走ってしまい、時間の無駄です。(さらに、deploy.build_before = trueなので、計3回のbuildが走り時間の無駄)
まとめ
2015年11月08日
What’s “つよい”
See the Pen verbose style sheet by Yusuke Nakamura (@unasuke) on CodePen.
例えば上のようなCSSは、bootstrapも使っていない、Sassも使っていないので、次のように書き直せると思う。めんどいのでSlimも使う。
See the Pen better style sheet by Yusuke Nakamura (@unasuke) on CodePen.
さて、これも.boxの中のclassにも.boxが先頭についていて冗長、共通化できそうなものを切り出してこう書くとしたら。
See the Pen more better style sheet by Yusuke Nakamura (@unasuke) on CodePen.
さて3段階にわたってCSSを綺麗にしたつもりだが、まだまだ改善できるところがあるかもしれない。「つよいCSS」というのは、破綻しにくく、変更に強く、とにかくつよいCSSのことだ。
CSSをもりもり書いたここ数週間
ここ数週間は、ひたすらCSSを(Sassを)もりもり書いていて、とにかく上に書いたようなことを意識しながら作業していた。途中で以下の本を買ってもらって読んだ。
作業の途中で読んだので、CSSの書き方がページによって変わってしまった(後でなんとかした)。とはいえまだ読みきれてはいないし、書き方を意識したとはいえど、まだまだな点も多い。
classの名前も悩む。どこからどこまでを1つのclassでまとめるべきか判断がつきにくい。複数のページで共通化できるのはどの要素だろうか。これはこのページ限定のスタイルだろうか。paddingであるべきかmarginであるべきか。そもそもこれはbootstrapで用意されているから書く必要はなかった。思い通りの値にならないと思ったらあっちのスタイルが適用されていた。こっちのグレーとそっちのグレーは違う色だった……
Photoshopとエディタとブラウザを何度も行ったり来たり、見比べたり、カラーコードをコピペしたり。とにかく大変だった。でも見やすくなったと思うし、キレイになった。
CSSの設計
BEMやSMACSSなどのCSSの設計についての指針はある。だが、専属のフロントエンドエンジニアがいない現状では導入は難しい。bootstrapを使っておおまかにレイアウトし、それなりにページごとに分けたSassで無難な名前のclassでスタイルを書いている。何人もがCSSを書いているので、書き方に差異もある。最近書いていくぶんには破綻もあまりないけど、消しきれていない昔のCSSのために打ち消すスタイルもあったりなかったり。
CSS
CSS難しい。いっぱい書けばできるようになるんだろうか。