2016年05月04日
どうも、blogでは文章を書くうなすけです。ところで、kosen10’s LT #4 in OSAKAに参加してきました。
当日発表資料
感想
ルーターの話だとかlogの読み方だとか児童教育の話とかセクマイの話とかの中にぶっこんでごめんなさいという感じの発表をしてきました。ごめんなさい。ごめんなさいっていうか、やっていきましょう。
なんとこれまで皆勤賞らしいので、このまま流れに乗って行きたい所存です。
次回開催を弊社で、というのは密かに狙っているので、各位よろしくお願いします。
まじめに
どうやらkosen10'sのグループの中では僕は結構意識が低空飛行で、すごい発表の後でも「おお、俺もいっちょやったるか」とはあまりならず、上のような発表ばかりになる傾向があります。
それでもこれまでの計4回に継続して参加して来れたのは、やはりkosen10'sのメンバーに会いたいという気持ちと、みんなの気持ち、テンション、やる気に乗せられているところが大きいのかもしれません。非常にありがたいです。
そういう意味で、僕がこの集まりに対して貢献できることといえば、今は開催場所のあてがある、ということくらいしかないので、「なんとしても」という位の気持ちで次回開催を弊社でできるように交渉していきたいのです。
次回がいつになるかはまだ決定していませんが、その時はよろしくお願いします。その時こそなにかいい話をしたいと思います。
2016年05月03日
高専カンファレンス lol
前回の高専カンファレンス100 in 東京に続いて、関西地方で大規模な高専カンファレンスをするとのことで、これは行くしかないだろう、ちょうどゴールデンウィークもあるし。ということで、いい感じに弊社にインターンシップでいらっしゃっていた実行委員のやましーさんから飛行機がいいと聞いて飛行機で行くことにしました。
発表申し込み
実際のところ、発表する、できることなんて何も思いつかず、「参加して皆の発表聞きに行くだけかな〜」と考えていました。(やましーさんからめちゃくちゃ「うなすけさん発表しないんですか」と詰められている)
そしたら、僕のスポンサーのとある方からこういうtweetがありました。
そんなわけで、カップル専用アプリについての発表と、実際に触ってもらえるようブース発表も申し込んだところ、ブースの方は選考を通過しました。
まさか、と思いました。
当日
発表
研究の話とか、教育の話がある一方、地名の由来、コンクリート、はたまたライブドメイン取得などアツい発表がたくさんありました。ひとつひとつを取り上げて感想を述べることはしませんが、僕はここで発表しなくてよかった……と思います。
ブース
想像以上に引かれてヘコむ。
やったことといえば、カップル専用アプリの中で有名と思われるものを選択し、まとめた資料を展示。また、それらアプリをインストールした端末を2台設置して自由に触ってもらうということです。
感想の大半が「LINEじゃん」だったので、そうだね〜〜〜〜〜〜〜〜〜そうだよね〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜という気持ちで、言うなれば罰ゲームでした。なんならブース発表者用の名札も貰っていなかったので疎外感でした。みんなカップル専用アプリにもっと興味を持っていいと思います。
懇親会
スポンサーでいらっしゃっていたGitHubの方2人のうち、1人は見るからに外国の方でした。あまり話しかけられてもいない様子で1人で座っておられたので、勇気を出して話しかけたところなんと日本語が話せる方でびっくりでした。その方はテクニカルサポートをしていて、リモートで働いているとのことでした。やはり問い合わせもメールベースにできるとサポートの方もリモート業務ができていいですね。弊社ではどうしても電話による問い合わせの必要があるのでできないのですが。
で、GitHubの方2人のうち、もう一方はなんとdiceさんで、「やべえRebuild.fmのあのdiceさんが目の前にいるやべぇ」みたいになりました。
diceさんもGitHubパーカーを着ていたのですが、GitHub「の」パーカーはあまり気に入ってないらしく、TMIXかユニクロで迷ったところ、生地がわからないのでユニクロにしたとのことでした。ということでショールームを紹介させていただいたところ、いらしてもらえるとのことで、ヤッターという感じです。よかったですね。
よくなかったこと
ちょっと批判ぽくなって申し訳ないのですが、よくなかったと僕が感じたことを1つだけ挙げさせていただきます。
サブスクリーンなのですが、1つ1つのツイートを色の円の中に入れてぽわぽわさせるという仕組み、大変綺麗で、さぞ実装には苦労したことかと思います。しかし……しかし、中央前から3列目に座っていた僕でさえ、ツイートの中身を読むことはできませんでした。そういう意味で、運営側の自己満足になってしまったかな……と感じます。
ツイートは読みやすいように普通に上から下へ流して、その背景にツイート数に応じてぽわぽわを増やしていく、とかにしても良かったかな、と思います。
2016-05-04 追記
とのことです。なるほどなるほど。
感想
今回のカンファは、スポンサーを積極的に募集したこともあるのか、チロルチョコだったり、GitHubステッカーやlolのステッカー、Tシャツなど、さまざまな仕掛けが用意されており、高専カンファレンスの新たな形を示すことができたのではないかなと個人的に思います。
次は茨城ですね！!
2016年04月24日
60% keyboard
どうにも僕はテンキーもカーソルキーもファンクションキーもない、いわゆる60% layout keyboardというものが好きで、これまでにはTEX Yodaなんかを買っています。
その時からMassdropのMechanical keyboards communityを購読しているのですが、よさ気なキーボードを見つけたので買いました。
KC60 Mechanical Keyboard
KC60 Mechanical Keyboard - Massdrop
Programmable layersと銘打ってるだけのことはあり、キー配列はもちろんのこと、layerを複数作成することができます。(たぶん10 layersまで)
そのうえ、キーの組み合わせでマウスカーソルの移動も可能なほど、カスタマイズは幅広くできます。
how to customize
上記2サイトが参考になります。僕はubuntuでファームウェアの書き込みを行いました。その際、scriptはsudoで実行しないと書き込みができませんでした。
2016-05-03 追記
2016年03月13日
つくりかた記事リスト
あまりにもはしょりすぎていた
あとは、あなたが好きなようにslimを書き、scssを書き、ページを作っていくだけです。
と前回書きましたが、あまりにもはしょりすぎている感じがあるので、どういう風に僕がn0h0.comを書いていったかを説明します。
以下、前回の続きとしてslimとscssで書いていきます。
画像を置く
middlemanでは、source/images以下に置いた画像を、
= image_tag "source/images以下のpath"
で参照することができます。例えばsource/images/n0h0.pngというファイルは、
と書くことで、
<img src="/images/n0h0.png" />
になります。
真ん中に置く
次に、この画像を画面の上下左右中央に配置したいと思います。
さて、block要素に対して、次のようなstyleを適用すると、その要素は親要素の上下左右から中央に配置されます。
.element {
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
※このとき、親要素にはposition: relative;があたっているとよい
参照
ところで、<img>要素はinline-block要素なので、このように書いてやります。
.element {
display: block;
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
n0h0.comでは、<img>に対して直接このstyleをあてています。これは、ページ内(body以下)には<img>しか存在しないのでいいかなと思ってのことです。ですが、出来る限りclassを付与して、そのclassに対してstyleをあてるべきでしょう。
画像を回す
さて、のほ君のアイコンを回したくなりましたね？そこで、CSSアニメーションを使います。
参照
画像の要素に対して、次のようなプロパティを指定します。
.element {
display: block;
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
// ここから下が追加したプロパティ
animation: spin 10s linear infinite;
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
これで永遠に回り続けるのほ君が完成しました。
CSSフレームワークを使う
さて、ここまではCSSを全ていちから書いてきましたが、場合によってはCSSフレームワークを使うと便利な場合があります。定番のところでは、bootstrapを使ってレスポンシブなwebページを作成したりでしょうか。
有名どころのCSSフレームワークを以下に挙げます。
bootstrapのインストール
例として、おそらく一番有名である？bootstrapのインストール方法について解説します。
<head>のどこかにこの行を追加すれば完了です。(これはslimの書き方ではないことに注意してください)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
CSSフレームワークの使い方については、今回は触れません。
次回予告
次回こそ、ドメインを取ることと、サーバーを借りてssh接続するところまでやりたいと思います。
2016年03月05日
STEERS ローンチいたしました
2016年3月3日、Web上でTシャツを販売して利益を得ることができるサービス、STEERSがローンチしました。めでたいですね。
unasuke.com のスポンサーになってほしい！！！
さて、unasuke.comはドメインの維持費もありますし、VPS上に構築しているのでサーバー費用もかかります。
とはいえ、広告は僕が嫌いなので置きません(amazonのアソシエイトくらいは置いてます)。ですが何かしら見返りは欲しいとは思います。すこし。
なので、STEERSでこんなTシャツを作りました。
I am sponsor of the … | オリジナルTシャツ販売 STEERS（ステアーズ）
詳細は上のリンクを読んで欲しいのですが、このTシャツを買って、僕を支援していただいた方の名前を、https://unasuke.com/sponsor (まだない)に掲載します。 あとめっちゃ感謝します。
現状STEERSでは自分のTシャツを買ってくれた人がわからないので、Tシャツを買ってくれたら、そのTシャツと買ったあなたが一緒に写っている写真を僕に何らかの方法で送ってください。
特に読んで役に立つような記事を書いているわけではないのですが、応援していただける物好きな方はどうぞよろしくお願いします。
買ってくれたらすごい勢いで静的サイトのつくりかたの記事の続きとか書きます。デザインも改善します。スマホ対応が秒です。
ご注意
STEERSのシステム上、5枚の注文が集まらなければ実際に支払いが行われることはありません。「どうせ5人も買わないだろうから予約しよう」的なチキンレースも可能です。
また、販売期間が大体7日間ですが、その後、5人の予約が入れば発注されます。
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」
- 「新卒採用は社会貢献」
- 「笑顔！！！！！！！！！」
- 「若さの勢いが大事」
- 「俺のおたく棒舐めんなよ！！！！！！最悪！！！！！！！」
- 「おたく汁が染みこんだおたく棒舐めた俺を尊敬してほしい」
- 「完全に日本酒」
成果