2018-12-20

KOSENハッカソン feat.LINE に出てみた

はじめに

この記事は、Prolab Advent Calendar 2018の20日目の記事として書かれています。 adventar.org

本題

つい先週の12/15,16日にKOSENハッカソン feat.LINEに参加してきました。今回は僕のハッカソン中の2日間を振り返って記事にしていきたいと思います。

0日目

ということで、前日の話です。
ハッカソン前日の14日は学校が終わったその足で東京まで行くというちょっと忙しい一日でした。テーマが"IoT×生活"でLINEさんが協賛(というかタイトルに入ってる)とのことだったので、
授業で使っていたRaspberry PiとFaboのセンサーセット、部活にLINEハンズオンで来てくださったN0bisukeさん(LINE API Expertsのすごい人)から貸してもらったLINE Clovaをもって行きました。
なんだかんだ順調に見えた旅路も宿について早々問題が発生ます。
(写真がなかったので一緒に行った2人のうちの1人の宮野くんのツイートを貼ります)

【悲報】男3人で予約した宿、ダブルベッド2つの部屋をご用意してくる pic.twitter.com/ellh5Jboxp
— 宮野 (@miyacorata) 2018年12月14日

何かのミスだったのでしょう。
僕はハッカソンの間、2年生のけーぶるくんと一緒に寝ることになりました。

1日目

いよいよハッカソン初日です。
会場に入ってまず目に入ったのがこれです。

LINE さん力入ってました。(Clova持ってこなくても良かったな…)
初日のスケジュールはこんな感じでした。

時間	内容
9:30	開鍵
10:00	オープニング、アイスブレイク、主催挨拶
10:30	テクニカルサポートインプット
11:00	アイデア発想→チームビルディング
13:00	アイデアソン＆ランチ
14:30	作るもの宣言
15:00	ハッキングスタート
20:00	中間発表&懇親会
21:00	1日目終了

アイスブレイク

この時点でちょっとアイディアソンっぽい感じが出てきて、軽くアイディアを考えました。

テクニカルサポートインプット

LINEの色々なAPIの機能の説明があり、自分の考えたアイディアにLINEのAPIをどう使うか考えながら聞きました。この時点で僕はClovaに手書きレポートなど手書きで文章を書いているときに、熟語の書き方を声で聞くとLINEbotから漢字が送られてくるサービスを考えていました。

チームビルディング

自分のアイディアを一緒に実装する仲間を探したり、自分が実装したいアイディアを持った人を探したりしてチームを組みました。僕は自分のアイディアに興味を持ってくれた3人(宮野くんを含む)と4人チームを組み、そのままそのチームで昼食を取りながらアイディアを深めるました。

作るもの宣言

ここででピンチが訪れます。
作るもの宣言では、自分たちのアイディアをスケッチブック1ページにまとめてこれから実装する機能などを説明します。
僕達のチームも自信ありげに漢字サジェストサービスの説明をしたのですが、その説明を聞いたLINEのメンターさんやN0bisukeさんからそのサービスの実装が現実的ではないと指摘されてしまいます。というのも、LINE Clovaに音声認識をさせるには定型文(「{日付}の天気を教えて」など)を作成して、変化する部分の単語({日付}の部分)のリストを作成しておかなくてはならず、単語リストのサイズも最大2000単語(多くなると設定の適応に時間がかかるようになる)で膨大な熟語をすべてカバーできなかったのです。そこからしばらく(多分30分から1時間)、打開策を検討したものの良い案が出なかったので、急きょ宮野くんの「駅の改札の情報を教えてくれるbot」というアイディアを深めて実装することになりました。

f:id:Fukusan:20181220022116p:image:w150 — 完成品(駅名とか駅の写真とかは適当だけど)

このアイディアは久留米などちょっと地方の駅で改札がIC限定になったときに切符を使おうとして列を詰まらせてしまう人がいたという宮野くんの実体験から生まれたものです。

実装開始

僕はbotの返答に使う画像を生成する(といっても画像に文字を載せるだけ)サーバーの実装に取り掛かりました。(割と単純なとこでつまずいたりして大変だった)
最初のアイディアで粘りすぎたのもありこの日の会場での進捗は実装全体の30~40%くらいという感じでした。

懇親会

初日の最後にはLINE本社で懇親会がありました。ほとんどピザを食べられなかったけど、他の高専の人と色々話ができました。

夜も実装祭り

宿に戻ると実装の続きをしました。チームメンバーと通話を繋いで話し合ったり無駄話をしたりしながら少し進捗を生やしました。
3時30分くらいまで掛かったので正直辛かったです。(同じチームの宮野くんはともかく、けーぶるくんは寝にくかっただろうと思う、申し訳ない)
~~というか夜の実装の話は時間的に二日目ではないか?~~寝るまでが今日

2日目

最終日になりました。
会場に着くとすでにそこそこ人が集まっており、流れで実装を始めました。

時間	内容
9:30	開場
10:00	オープニング、ハッキングタイム
12:00	ランチ
14:00	作業終了・各作品プレゼン
15:00	タッチ＆トライ
15:30	表彰など
16:00	終了

ラストスパート

実装を10時ぐらいから始めて、14時の発表までの間にできる限り進めました。
13時過ぎあたりで一応動作するものができたのでそこからはプレゼンの流れを確認していきました。

プレゼン

急いで作ったスライドでプレゼンをしました。(喋りが苦手な僕はあまり喋っていません、もっと喋ればよかった)
プレゼン中にbotのともだち追加QRコードを出しておいたらプレゼン終了までにサーバーにリクエストが飛んできていてちょっと嬉しかったりしました。

表彰

最終的には僕達のチームはどの賞もとることができませんでしたが、けーぶるくんのチームがオーディエンス賞(参加者の投票で決まる賞)を取っていました。
けーぶるくん本人曰く、本人はあまり実装していないそうですが、受賞チームのメンバーならば受賞者です。

帰宅

家に帰ると月曜提出のレポートが待っていました。これもかなり辛かったです。
こんな感じで僕のKOSENハッカソン feat.LINE は終わりました。

感想

忙しい2日間でしたが楽しい週末でした。
結局ハッカソンでClovaを使わなかったので何かClovaを使うものを作ってみたいです。

まとめ

アイディア段階で実装可能かをちゃんチェックしておきましょう。
簡単なところでミスってることがあるのでバグを探すときは気をつけよう。
LINEのAPIはかなり充実しているので一度使ってみると面白いと思う。
レポートは計画的にこなしましょう。

2017-12-12

Webpack使ってみた

はじめに

この記事は、Prolab Advent Calendar 2017の12日目の記事として書かれています。

adventar.org

それから、今回の記事の内容に間違いなどが在りましたら、(出来るなら優しく)教えてもらえると幸いです。

本題

Webpackとは？

主にJavaScriptを１つのファイルにまとめるやつ。(個人的見解)

ただし、その他にもSassをcssに変換したりAltJSをトランスパイルしたりなど

様々な機能がある。

Webpack使うと何がいいの？

JavaScriptのファイルが1つにまとめられるのでページが表示されるまでにサーバーとの間で行われる通信の回数が少なくなる。
npmで落としたライブラリーやフレームワークを利用できる。
コーディング中の手間が減る。(webpack-dev-server)

使い方

今回はnpmで落としたライブラリーを利用する、複数ファイルに分けたコードを

1つのファイルにまとめるところまでを説明してみます。

※Node.jsの環境が整っていることを前提に書きます。

ファイル構成(npm init 後)

自分で作っているのはsrc以下とindex.html、webpack.config.jsです。

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── bundle.js
│   └── index.html
├── src
│   ├── main.js
│   └── modules
│       └── sub.js
└── webpack.config.js

まずはnpm init

ターミナル
```
$ npm init
```
聞かれる質問にはとりあえず適当に答える。

(-yというオプションをつければ全部エンターを押した場合の挙動になる)
Webpackをインストールする

ターミナル
```
$ npm install webpack -D -save
```
-D -save とは
package.jsonにwebpackを開発用のモジュールとしてインストールしたことを記録する。という意味
Webpackの設定をする
JavaScript(webpack.config.js)
```
const path = require('path');
module.exports = {
	entry: './src/main.js',
	output:{
		filename: 'bundle.js',
		path: path.join(__dirname, '/public')
	},
	devtool: 'inline-source-map'
};
```
entryにはWebpackが解析を始める最初のファイル(./src/main.js)、
output.filenameには出力するファイル名(bundle.js)、
output.pathには出力先のディレクトリを指定する。
devtool: 'inline-sorce-map'は出力したファイルのソースマップを出力する設定(デバッグの時便利)
使うライブラリーを読み込んでおく

ターミナル
```
$ npm install jquery -save
```
今回はとりあえずjQueryを読み込んでみる。
main.js,sub.jsを記述する

JavaScript(main.js)
```
const $ = require('jquery');
const Sub = require('./modules/sub.js');
$('#output').text(Sub.add(1, 2));
```
JavaScript(sub.js)
```
module.exports = {
	add: (a, b)=> a + b
};
```
main.jsではjquery、sub.jsを読み込み利用している。
sub.jsでは足し算をする関数addを定義している。
Webpackでmain.js,sub.js,jqueryをまとめたbundle.jsを作る

ターミナル
```
$ ./node_modules/.bin/webpack
```
Pathを通したりしてないのでちょっと力ずく
(package.jsonのscriptsにコマンドを書いておけば短いコマンドでよくなるのでとりあえずこれでいいことにする(あんまりよくない))

このコマンドを打つと、./publicにbundle.jsが作られる。
htmlでbundle.jsを読み込むと#outputのタグに3と表示される。

お疲れ様でした。

おまけ

npmでwebpack-dev-serverというモジュールをインストールして

ターミナル

$ npm install webpack-dev-server -D -save

以下のようにwebpack.config.jsを変更すると

const path = require('path');
module.exports = {
	entry: './src/main.js',
	output:{
		filename: 'bundle.js',
		path: path.join(__dirname, '/public')
	},
	devtool: 'inline-source-map',
	devServer : {
		port : 3000,
		contentBase: path.join(__dirname, 'public'),
	},
};

ターミナルで

$ ./node_modules/.bin/webpack-dev-server --inline --hot

というコマンドを打つことで開発用のサーバーが起動して

localhost:3000でhtmlを開くことが出来ます。

また、この状態ではファイルを保存するたびにwebpackでの処理が必要な箇所にのみ実行され、ブラウザがリロードされます。

(保存した後色々コマンドを打ったりブラウザをリロードしたりする手間が省けて便利)

まとめ

ダラダラ書いていたら0時に遅刻してしまいました(謝罪)。

あまりうまい説明ではないですが、Webpackをこれから使ってみようと思う人の

手助けになれば幸いです。

さて、明日(今日)のアドカレ担当はdenchu4491くんです。

どんな記事を書いてくれるか楽しみですね。

2016-12-22

Web Audio API使ってみた

はじめに

この記事は、prolab Advent Calendar 2016の12月21日の記事として書かれています(遅刻です)。 www.adventar.org

自己紹介

こんにちは、Fukusanです。プロラボでJavaScriptを書いたり、某ちゃんさんにタスクを投げられたりしています。

今回作ってみたもの

今回は、音声ファイルをドロップすると再生する静的HTMLを(深夜テンションで)書きました。
※PCで開いてください、モバイルフレンドリーではないです(ごめんなさい)

音声ファイルをresultの領域にドロップすると再生します。(音が出るので注意)
ファイルをドロップしてから再生されるまで時間がかかる場合があります

See the Pen rWRBxw by 福さん (@Fukusan) on CodePen.

ほんのちょっとWeb Audio APIについて解説

今回、僕が使った機能について簡単に説明します。ちゃんと理解できているか怪しいので間違いを見つけた方は教えていただけると嬉しいです。

AudioContext

音声の再生を管理するクラス、AudioContext.destinationに接続することでWeb audio APIで音を鳴らす事ができます。

AnalyserNode

AudioContext.createAnalyser()の返り値で、音声の時間と周波数を解析することができます。

AudioBufferSourceNode

AudioContext.createBufferSource()の返り値で、AudioBufferオブジェクトに書き込まれた音声データを再生することができます。

今回作ったものについて

画面への表示についてはcanvasにただ描画しているだけなので省略します。また、音声ファイルの読み込みについても今回は省略します。

音声データのデコードについて

ArrayBufferとして読み込んだファイルのデータを

//audioCtxにはthis.audioContextが入っている
this.audioCtx.decodeAudioData(data,callback)

でデコードします。callbackには、デコードの結果が引数に渡されます。今回は、デコードの結果をAudioBufferSourceNode.bufferに代入しています。

AudioNodeの接続の関係

AudioNode(AnalyserNode,AudioBufferSourceNodeなど)は

//AudioNodeの部分には
//AnalyserNode,AudioBufferSourceNodeなどが入る
AudioNode.connect(AudioNode);

と書くことによって接続することができます。今回作ったものでは、 AudioBufferSourceNode→AnalyserNode→AudioContext.destination という風に接続しています。 AudioBufferSourceNodeで再生した音をAnalyserNodeでスペクトル情報を取得して画面表示しさらに、音をAudioContext.destinationに渡して鳴らしています。

スペクトル情報の取得について

音のスペクトル情報はAnalyserNodeのgetByteFrequencyDataメソッドで取得できます。

//this.analyserにはAnalyserNodeが入っている
var spectrums = new Uint8Array(this.analyser.frequencyBinCount);//結果を入れるためのspectrums(Uint8Array)を準備
this.analyser.getByteFrequencyData(spectrums);//spectrumsにスペクトル情報(0～255)を入れる

spectrumsの長さはAnalyserNodeのfftSizeというプロパティの値(デフォルトは2048)により変化しますが、その長さは、AnalyserNode.frequencyBinCountから取得することができます。このようにして取得したスペクトル情報を使って描画しています。

まとめ

僕はWeb Audio APIを初めて使ってみて、機能がとても充実していることに驚きました。特にスペクトル情報の取得が簡単に行えることはとても便利です。ぜひ、一度興味がある方はWeb Audio APIを使ってみてください！ただ、僕は説明が下手なので上記の内容だけで理解できる人は少ないと思います。もし、興味があるという人は、自分で調べていただくともっとわかりやすいサイトが出てくると思います(このブログの意味…)

こんな感じで終わりたいと思います。

prolab Advent Calendar 2016、明日はゲ・ドリンク大先生の記事です。

2015-12-19

jQuery使ってみた

jQuery

始めに

皆さんいかがお過ごしでしょうか。
Fukusan(「福さん」でもある)です。
今回、部活のアドベントカレンダーに参加するという形で
生まれて初めて、ブログなるものを書いております。
www.adventar.org

さっそく本題

今回の内容は題名の通り「jQuery」です(今更)。
jQueryについて、ざっくり説明すると、JavaScriptのライブラリーで、
これを使うことによりJavaScriptをより扱いやすくすることが出来ます。
今回は、jQueryの書き方などについて自分の分かる範囲で書いていきたいと思います。

jQueryの読み込み

jQueryを使うには、まずjQueryライブラリーを読み込む必要があります。
読み込み型には、主に次の2つがあります。

Web上からソースを読み込む
ダウンロードしてローカルから読み込む

まず、1の方法から

読み込みたいHTMLソースに以下のように書き込むだけ

例(jQuery1.9.1を読み込む)
※JavaScriptを読み込む(書き込む)前に書き込んでください

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

次に、2の方法

まず、jQueryの公式サイト
http://jquery.com/download/(公式サイト)
から、jQueryライブラリーをダウンロードします。
バージョンはjQuery1.x系と、jQuery2.x系がありますが、jQuery2.x系は、IE6,7,8をサポートしていません。
なので、理由がないのなら、jQuery1.x系でいいと思います。
次に、HTMLに読み込みます。
以下のようなソースを読み込みたいHTML に書き込みましょう。
※JavaScriptを読み込む(書き込む)前に書き込んでください

<script type="text/javascript" src="格納場所/jquery.min.js"></script>

jQueryの書き方

基本形

まずは、jQueryの基本形です。

$(function(){
  // 内容
});

これは、「内容」をhtmlを読み込んでから処理を実行する
という意味です。

「要素」を選択する

要素を選ぶ部分を「セレクタ」と言います、jQueryのセレクタの書き方はcssのセレクタと似ています。
ここでは、基本的なセレクタを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});
/*このプログラムで言う$('#element')の部分のこと*/

idセレクタ

$(function(){
  /*id="element"の要素を選択する*/
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});

classセレクタ

$(function(){
  /*class="element"の要素を選択する*/
  $('.element').click(function(){
    $(this).text("クリックされたよ～");
  });
});

要素セレクタ

$(function(){
  /*p要素を選択する*/
  $('p').click(function(){
    $(this).text("クリックされたよ～");
  });
});

子孫セレクタ

$(function(){
  /*div内のp要素を選択する*/
  $('div p').click(function(){
    $(this).text("クリックされたよ～");
  });
});

実行するタイミングを書く

実行するタイミングを決める部分を「イベント」と言います。
ここでは、基本的なマウス操作関係のイベントを紹介します。

$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});
/*このプログラムで言う.click()の部分のこと*/

クリックイベント

$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});

マウスオーバーイベント

$(function(){
  $('#element').mouseover(function(){
    $(this).text("マウスカーソル乗ったよ～");
  });
});

マウスアウトイベント

$(function(){
  $('#element').mouseout(function(){
    $(this).text("マウスカーソル降りたよ～");
  });
});

実行する処理を書く

jQueryでは、要素のcssを書き換えたり、要素を動かしたり、要素を追加したりなど、様々な処理をする事ができます。
ここでは、その中からいくつかを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});
/*このプログラムで言う.text()の部分のこと*/

cssを変更する(ここでは、背景色を変更しています)

$(function(){ 
  $('#element').click(function(){
    $(this).css("background-color","#fff");
  });

要素を動かす(ここでは、要素を500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化させています)

$(function(){ 
  $('#element').click(function(){
    $(this).animate({
      left: 50, opacity: 1
    },500);
  });

要素を追加する(ここでは、id="#element"の要素の後に新しいdiv要素を作っています)

$(function(){ 
  $('#element').click(function(){
    $(this).after('<div>test</div>');
  });
});

最後に

簡単な説明でしたが、jQueryについて、少しでも興味を持っていただけたら幸いです。
この記事に書いた内容は、jQueryの書き方のほんの一部です。
もし、興味を持っていただけたのなら、ぜひ自分で調べて、書いて、学んでください。
ここに書いていない、新しいjQueryの書き方に出会うことができると思います。

はじめに

本題

0日目

1日目

アイスブレイク

テクニカルサポートインプット

チームビルディング

作るもの宣言

実装開始

懇親会

夜も実装祭り

2日目

ラストスパート

プレゼン

表彰

帰宅

感想

まとめ

はじめに

本題

Webpackとは？

Webpack使うと何がいいの？

使い方

まずはnpm init

Webpackをインストールする

Webpackの設定をする

使うライブラリーを読み込んでおく

main.js,sub.jsを記述する

Webpackでmain.js,sub.js,jqueryをまとめたbundle.jsを作る

おまけ

まとめ

はじめに

自己紹介

今回作ってみたもの

ほんのちょっとWeb Audio APIについて解説

AudioContext

AnalyserNode

AudioBufferSourceNode

今回作ったものについて

音声データのデコードについて

AudioNodeの接続の関係

スペクトル情報の取得について

まとめ

始めに

さっそく本題

jQueryの読み込み

まず、1の方法から

次に、2の方法

jQueryの書き方

基本形

「要素」を選択する

実行するタイミングを書く

実行する処理を書く

最後に