2017-12-04

自分Slackのススメ #kosen10s

この記事は#kosen10s Advent Calendar 2017 4日目の記事です。

昨日は id:denari01 の kosen10s.net をしっかり作りたかった(進捗ダメです) - Narcist's way でした。めっちゃ良いサイトが出来るのを期待しています。私も拾ってきたCSS雑に当てて直すの辞めたいですね。

まえがき

こんにちは。毎年 kosen10s Advent Calendarの説明欄が「kosen10sのメンバー」ではなく「kosen10sの関係者」となっている理由の半分ぐらいを占めていると噂の id:whywaita です。今年もお邪魔します。

さて、kosen10sと言えば「kosen10s Slack」ですね。昨日の記事で公開された新しい(工事中な) kosen10s.netでも「タイトル」「背景画像」以外の情報としてはSlackへの誘導リンクだけなので、おそらく活動の中心にSlackが据えられているのでしょう。 kosen10s Slackには記事執筆時点で68人*1もの人が参加しており、多くの高専2010年入学生を捉えていることが分かります。

沢山人が居るSlackは会話が弾みやすくとても楽しいですが、敢えて逆の「1人Slack」をこの記事ではご提案します。

*1:Slackinより

2017-11-08

Dentoo.LT #18 参加してきた #dentoolt

3ヶ月に1度な感じで参加してきた。

atnd.org

2017-09-27

GIGAZINEのアニメまとめ記事をパースするコマンドgiganiを作った

github.com

GIGAZINEが毎クールごとに出している新作アニメ一覧ページ(ex: http://gigazine.net/news/20170917-anime-2017autumn/ )をパースするコマンドを作りました。

動機

毎クールごとにそのクールのアニメ総括メモを書いていて、ついでにgistに録画するリストを毎回手作業で作っていたのですが、これが面倒になったので自動的にパースするようにしました。

以下のようなstructを提供しています。

type Anime struct {
    Name        string
    URL         string
    StartDate   string
    BloadCaster string
}

https://github.com/whywaita/gigani/blob/f272572a6bf98fc2d432eb6727f475b5357bb426/main.go#L8-L13

現状だとMarkdownの表を出力するようになっていますが、他に出力したいものがあれば適当に弄ってください。出力例はこんな感じです。

気づき

HTML パース

HTMLパーサといえばRubyのNokogiriやPythonのBeautiful Soupなんかが有名ですが、軽く見たところ一条件の要素をささっと取るのは楽なものの、今回のGIGAZINEのサイトを見ていると

そもそも正しいタグ構造になっていない
法則性はあるものの放送局や特番の関係で微妙にズレていることがある

などなど結構お粗末で、上記のライブラリ群だと上手く動かなさそうだったので、Golangでシュッと書くことにしました。

現状のGolang標準パッケージにあるトークナイザーは x/net/html があります。が、これもいまいち使いづらく、特に

<h2><a href="http://whywaita.hateblo.jp/">なぜにぶろぐ</a></h2>

のようなHTMLがあった場合に「なぜにぶろぐ」という文字列を取得することが出来ないように感じたので、大体フルスクラッチかなと思っていたところ以下のページを見つけました。

stackoverflow.com

HTML系パッケージではなくxmlパッケージを使うことで良い感じにパース出来るのでは、という記載があったので参考に書いてみました。

type htmlTitle struct {
    H2 Value `xml:"h2"`
    A  Value `xml:"a"`
}

type Value struct {
    Content string `xml:",innerxml"`
}

func trimTitle(sentence string) (title string, err error) {
    s := strings.TrimPrefix(sentence, `</p><hr><p class="preface"></p>`)
    h := htmlTitle{}

    err = xml.NewDecoder(strings.NewReader(s)).Decode(&h)
    title = h.A.Content

    return title, nil
}

https://github.com/whywaita/gigani/blob/f272572a6bf98fc2d432eb6727f475b5357bb426/parse.go

このように書くと安全に値が取得出来るようになって最高です。

終わりに

まだもう少しバグはありますがとりあえず動いているので満足しています。何かアレな部分があればご連絡ください。

良いアニメライフを。

私はこれを作っていたらアニメ録画出来ていなかったので急いで決めます。

2017-09-27

スカイアーチネットワークス杯第8回ICTトラブルシューティングコンテストの運営委員をしました #ictsc

標題の通りです。

8/26,27 に開催されたICTトラブルシューティングコンテストの運営をやってきました。

icttoracon.net

ポエム

本会は我が所属である電気通信大学で行われました。これを開催するまでには随分と長い交渉があり、様々な関係各所に多大なご協力を頂きました。本当にありがとうございました。

さて、様々なポエムを書こうかと思い立ち、深夜テンションで2000文字ほど書いたところまでは覚えているのですが、今日朝起きたときにほぼ全部消しました。なんかこれを共有しても意味ないのでは？という気持ちになったからです。

それなら何を書くんだという気持ちになった結果として一行目の感謝の言葉があります。この大会は数年前に一度「電気通信大学での開催は不可能である」という決断を下されているのを覆して開催されました。私が東奔西走して開催まで頑張ったのは勿論、やはり大学職員/教員の皆様のご協力はとても大きく、開催にこぎつけたのは様々な方のおかげです。

終わりに

終わりの後には次の始まりがあるものです。という訳で次回は第9回 ICTトラブルシューティングコンテスト、プラチナスポンサーとしてさくらインターネット杯が行われます。

次も何らかの形で関わるかもしれません。皆様どうぞよろしくお願いします。

2017-07-21

2017年版フロントエンド入門しようとした（してません）

medium.com

皆さんがどうかは知りませんが、しがないエンジニアであるところの私は2017年に生きているので、そろそろフロントエンド業界の皆様が纏めたであろう甘い汁をすすろうかと思います。

実行環境

何はともあれ実行環境を入れなければ始まりません。Nodejsなるものを入れます。

最新版はv8.1.4のようなのでこれを入れました。Nodejsのリリースサイクルとして、偶数は安定版(LTS)、奇数は開発版というものが使われてきたようなので、v8.1.4でも問題ないでしょう。ですが、前述したNodejsのサイトを見るとv6.11.1が安定版と記載されています。

偶数奇数パターンはなくなったように見えますが、現状は「なくなるかもしれない」というフワッとした状況のようです。よく分かりませんね。

私はクライアントマシンの環境構築にはanyenvを使っているので、これを利用してndenvをインストールしました。

$ anyenv install ndenv
$ exec $SHELL -l

パッケージマネージャ

NodejsもRubyやPythonと同じようにモジュールパッケージ機構を持ちます。Node Package Managerでそのままnpmです。同名のパッケージマネージメントコマンド npm が長く使われてきたのですが、近年高速に動作するnpm(パッケージマネージサイトのほうです)クライアントとしてFacebookがyarnを公開しました。npmコマンドとほぼ同等の機能が使える上に高速であるということなので、今回はこちらを使います。

前述の通りndenvを利用しているので、一緒にyarnもインストールするプラグインをインストールしました。

github.com

ndenv install をする前にこのプラグインを導入しておくと便利です。

$ ndenv install v8.1.4

モジュール群のPATH

yarnコマンドを使ってモジュールをインストールすると、そのディレクトリにnode_modulesというディレクトリが生成され、そのディレクトリにモジュール群の本体がインストールされます。

プロジェクト毎に利用したいモジュールのバージョンを変更したいなど、様々な要件があると思うので、この辺はよしなに実行します。が、一々相対パスで実行するのは面倒ですね。

という訳で私は以下のような設定を.zshrcに書きました。

export PATH=$PATH:./node_modules/.bin

こう書くと各コマンド群がそのまま使えて便利です。

ちなみに、yarn global addとすると、端末のグローバル領域（プロジェクトに依らず、システム全体で共有されているモジュール置き場）にインストールされます。私はグローバル領域にはインストールしていませんが、もしそこにモジュールなどをインストールしているのであれば、以下のように書くべきでしょう。

export PATH=./node_modules/.bin:$PATH

PATHは上から探索するので、先に書いた方が優先されます。上記のように書くことで、各プロジェクト用の node_modulesを先に探索するようになります。便利ですね。

タスクランナー

タスクランナーというと耳覚えがない気がしますが、プログラムの更新を検知し、自動でwebサーバを再起動してくれるやつです。

古くはgulpやgruntとかいうのがありましたが、最近はwebpackを使うのがイケているようです。

正確にはタスクランナーの役割をするのはwebpack-dev-serverというモジュールがやるのですが、デプロイの際にwebpackを利用する関係から、configを統一できるwebpack（とwebpack-dev-server）が便利に使われています。

先ほどインストールした yarn を使ってインストールします。 --dev を付けると自動的に開発環境用の依存関係(devDependencies)に入れてくれます。便利ですね。

$ yarn add --dev webpack webpack-dev-server

設定は webpack.config.js というファイルに書きます。ここでもJavaScriptファイルを書くのかと閉口してしまう気がしますが、これから沢山書くので気にせず書きましょう。

$ cat webpack.config.js
module.exports = {
  entry: {
    javascript: "./src/app.js",
  },
  output: {
    path: __dirname + "/build",
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
}

sourceディレクトリや出力先ディレクトリなどはよしなに設定してください。loaderに何か書いてありますがこれは後述します。

そしてよしなに設定を書いた後に

$ webpack-dev-server

とコマンドを打つと実行されます。これを実行したまま、別のウィンドウなどでソースコードを編集し保存すると自動で変更を検知してくれて大変便利です。

他にも、webpack-dev-serverでリロードしたら自動でブラウザをリロードしてくれるだとか、確認をすぐに行えるようになる設定やらモジュールやらもあるようです。

Lintツール

言語仕様の全てが完璧に頭に入っているなら不要ですが、私はそうではないのでLintツールを導入します。

JSLintという完全にそれっぽい物がありますがフェイクで、JSHintとかいう名前衝突避けしましたみたいな名前の物もフェイクで、現在の正解はESLintのようです。

$ yarn add --dev eslint

JavaScript他は言語仕様として書き方が決まっていないらしいので(よく調べてないので決まっていたらごめんなさい)、色んな団体が自分のLintルールを公開しています。よく分からないのですが、Airbnbが公開している物が良いとされているようなので、こちらを使いましょう。

$ yarn add --dev eslint-config-airbnb

このように書くと適用されるそうです。

$ cat .eslintrc
{
  "extends": "airbnb"
}

ちなみにこのパッケージ名にもなっているESはECMA Scriptの略だそうです。よく分かりませんが新しそうな風格を見せているので使っておきましょう。

トランスパイラ

長くなってきましたがようやく最後です。

ESLintを使って新しい標準に準拠したコードを書く訳ですが、残念ながら世の中のブラウザは新しい標準を完全に動かせている訳ではないらしいです。というわけで、同じ機能を実現する古い標準を満たしたコード（動作は同じものです）に変換する必要がある訳です。悲しいですね。

というわけで登場するのがトランスパイラという概念です。Babelというものを使います。

本来はbabelコマンドを使ってファイルを変換するのですが、これを一々手作業でやるのは面倒なのでwebpackさんに登場してもらいます。先ほど掲載したwebpack.config.jsには以下のような記載がありました。

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],

これは*.jsというファイルに対してはbabel-loaderというものを使うような設定です。

babelに関しては実際に使うところまで行かなかったので細かいところは省略します。

終わりに

というわけで入門しようとしてみました。登場人物が多すぎるし、ここまでやってやっと実装環境が完成です。

よく聞くReactとかVueとかAngularとかはこの後に登場する概念です。しんどいですね。

ちなみにこのように入門したかったのですが、導入しようと思っていた案件毎消滅してしまいました。悲しいですね。

というわけで実践まではいきませんでしたがとりあえずやった事のメモとしておきます。完全に使っている訳ではないので、もし何か間違いなどありましたらご指摘ください。

それでは2018年のフロント業界が成熟した頃にまた会いましょう。

2017-07-18

2017年春季アニメ総括メモ

もう2017年も半分を過ぎましたがいかがお過ごしでしょうか。

3ヶ月に1度、総括メモを見ていきましょう。

前回:

whywaita.hateblo.jp

結果

名前	局	放送時間	結果
銀の墓守り(ガーディアン)	MX	4/1(土) 21:00	1話も見てない
進撃の巨人 Season 2	MX	4/1(土) 22:00	1期も見てない
グランブルーファンタジージ・アニメーション	MX	4/1(土) 24:00	切った
デュエル・マスターズ	テレビ東京	4/2(日) 8:30	切った
アリスと蔵六	MX	4/2(日) 22:30	途中まで見てたはず
つぐもも	MX	4/2(日) 24:30	完走
僧侶と交わる色欲の夜に…	MX	4/2(日) 25:00	完走
笑ゥせぇるすまんNEW	MX	4/3(月) 23:00	途中まで見てたはず
フレームアームズ・ガール	MX	4/3(月) 25:05	切った
アイドルタイムプリパラ	テレビ東京	4/4(火) 17:55	1話も見てない
アイドルマスターシンデレラガールズ劇場	MX	4/4(火) 21:55	完走
ロクでなし魔術講師と禁忌教典(アカシックレコード)	MX	4/4(火) 24:30	完走
王室教師ハイネ	テレビ東京	4/4(火) 26:05	1話も見てない
BORUTO-ボルト- NARUTO NEXT GENERATIONS	テレビ東京	4/5(水) 17:55	切った
ラブ米(ラブコメ)-WE LOVE RICE-	MX	4/5(水) 22:45	完走
サクラダリセット	MX	4/5(水) 23:30	途中まで見てたはず
武装少女マキャヴェリズム	MX	4/5(水) 1:35	完走
サクラクエスト	MX	4/5(水) 24:00	切りかけている
月がきれい	MX	4/6(木) 24:00	1話も見てない
クロックワーク・プラネット	TBS	4/6(木) 25:58	1話も見てない
恋愛暴君	テレビ東京	4/6(木) 26:35	完走
ひなこのーと	MX	4/7(金) 25:00	完走
ツインエンジェルBREAK	MX	4/7(金) 22:00	1期も見てない
正解するカド KADO: The Right Answer	MX	4/7(金) 22:30	完走
神撃のバハムート VIRGIN SOUL	TBS	4/7(金) 25:55	切った
ベルセルク第2期	TBS	4/7(金) 26:25	1期も見てない
Re:CREATERS	MX	4/8(土) 23:30	途中まで見てたはず
エロマンガ先生	MX	4/8(土) 24:30	完走
ID-0	MX	4/9(日) 23:00	切った
有頂天家族2	MX	4/9(日) 22:00	1期も見てない
ゼロから始める魔法の書	MX	4/10(月) 24:30	完走
覆面系ノイズ	MX	4/11(火) 23:00	途中まで見てたはず
終末なにしてますか？忙しいですか？救ってもらっていいですか？	MX	4/12(水) 25:05	途中まで見てたはず
冴えない彼女の育てかた♭	フジテレビ	4/13(木) 24:55	完走
ソード・オラトリア	MX	4/14(金) 24:30	1話も見てない
アトムザ・ビギニング	NHK総合	4/15(土) 23:00	切った