テトラポット技術ブログ「TetLab」

社会人3年目エンジニアのブログ。趣味での開発や仕事で得た知見などを書いて行こうと思います。

Ubuntuをインストールしてからやったまとめ

せっかくブログを作ったのに、ほとんど更新していないので、久しぶりに書きます。

最近は、研究室のPCにUbuntuをインストールして使っていて、たまーに動作が安定しないくて、再インストールから環境構築で、何回も同じような環境構築をしてしまっているので、忘れないように書いておきます。 また、やることが増えたら書き足していくつもりです。

環境

OS: Ubuntu17.04 PC: ThinkPad L560

ディレクトリ名を日本語から英語へ変える

Ubuntuをインストールしたら、ダウンロードとかディスクトップとかのディレクトリ名がなぜか全部日本語になっているので、それだと端末で扱いにくいので英語に変更します。

$ LANG=C xdg-user-dirs-gtk-update

GoogleChromeのインストール

FireFoxも嫌いじゃないけど最近はもっぱらChromeが便利ですね。

公式ページで、debファイルをダウンロード https://www.google.co.jp/chrome/browser/desktop/index.html

libappindicator1というパッケージが必要なので、インストールします。

sudo apt-get install libappindicator1

その後、debファイルをダウンロードしたディレクトリに移動して、dpkgでインストールを行う。

sudo dpkg -i ダウンロードしたインストーラ名.deb

これでエラーが出なければ完了

Atomのインストール

開発用のエディターはAtomがお気に入りなんで、Atomをインストールします。

PPAを入れてリポジトリを追加

sudo add-apt-repository ppa:webupd8team/atom

sudo apt-get update

その後、apt-getでインストール

sudo apt-get install atom

エラーが出なければ完了

DropBoxのインストール

他のPCとのファイルの共有はDropBoxで初期の容量がもっと増えてくれたら完璧。

UbuntuのソフトウェアセンターにDropBoxがあるので、そこでインストールする。

Slackのインストール

研究室でのコミュニケーションツールはSlackです。 他のゼミ生はあまり使ってくれないことが悲しい。

公式ページでdebファイルをダウンロード https://slack.com/downloads/linux

ダウンロードしたファイルをダブルクリックして、ソフトウェアセンター内でインストールする。

Albertのインストール

ランチャーアプリはAlbertを使います。

「webupd8」のPPAリポジトリを追加してインストールします。

$ sudo add-apt-repository ppa:nilarimogard/webupd8
$ sudo apt-get update
$ sudo apt-get install albert

Clipitのインストール

クリップボードマネージャ。 ソフトウェアセンターにあるので、「Clipit」で検索してインストール。

あとがき

あらためてみると、ソフトウェアセンター便利だなぁーと思いますね。 後は、開発環境はあまり書いていないので、開発環境編も後日書きたいですね。

「LINE BOT AWARDS 公式ハッカソン@大阪」に出て来ました

なんだかんだ、全然更新できていないブログですが、これまたハッカソンに出たので、軽くレポート兼備忘録としてブログに書きます。

LINE BOT AWARDSとは?

LINEのchatbot開発促進およびユーザーへの普及を目的に開催するAwardのことです。 詳しくは以下に

botawards.line.me

これの何がすごいって、優勝賞金1000万円なところですね。 そして、部門賞もあって、各賞金50万円。 何と学生賞は100万円です。

これは、学生としては参加せねばならんのですよ。

とは言っても、LINE BOTってどうやって作るの? というところからのスタートなので、今回のハッカソンの目標は2つ

  • BOTの作り方を知ろう!

  • あわよくばなんかAWARDに出せるものを作ろう!

という感じです。

ということで出場しました

f:id:tetrapod117:20170207163722j:plain

場所は関西大学梅田キャンパス。 梅田のど真ん中にあるビルで、下にスタバがあってお洒落です。はい。

最初に、株式会社LINEの社員さんによる「LINE BOT AWARDS」の説明と、エンジニアの方から「LINE BOT」の説明があり、協賛企業のKDDIウェブコミュニケーションズさんの社員さんからTwilioの説明があったり、モーションコントロール株式会社の方からHenryの説明があったりしました。

twilio.kddi-web.com

www.runele.com

その後はアイディアソンです。

アイディアソン

アイディアソンでは、アイスブレイクで、「BOTのイメージを絵で描こう」みたいな事を言われ、僕はキカイダーのパチモンを書きました。

その後は、「LINE BOT AWARDS」の部門賞のライフスタイル部門、エンターティメント部門、ゲーム部門、IoT/Beacon部門 から、それぞれ思いつくアイディアをいくつか出して、その中から、作りたい1つのアイディアを決め、そのアイディアを持ってチームビルドに移ります。

ちなみに、チームビルドはナンパ式で、自分が作りたいものがある人は人を呼んで、ない人はある人についていくという感じです。

ハッカソン

僕は、院生2人と社会人の方1人の4人チームを作りました。 作ったものはこちら。

hacklog.jp

何がしたかったかというと、僕自身、全く大学の時間割とか教室とか覚えれないタイプの人間なので、そういうのを教えてくれるBOTを作ろうぜ→

でも、それだけじゃ面白くないから、可愛い女の子が教えてくれる感じにしようぜ→

それなら、LINEはリアルで良く使うコミュニケーションツールだから、彼女とLINEしてる感の出せるものにしようぜ→

でもまぁ、BOTって言われた言葉にすぐ反応するだけのことが多いから、返事催促したり、既読無視してくる人に近いBOTを作ろうぜ→

じゃあ、予定を教えてくれる彼女風BOTの機嫌をとる恋愛シミュレーションゲームにしようぜ

という感じです(長い)

f:id:tetrapod117:20170211002005j:plain

開発途中のメモ。 なかなか意味が不明ですね……

開発自体は、BOTの作り方????なにそれおいしいの???? の状態でしたので、LINEのエンジニアの方にめちゃくちゃ聞きました。 1からサーバー立てるのは面倒だろうから、ngrok使うといいよとか、リマインダーにはcronで定期実行とか、PHPはあんまりよくないだとか…… ngrok.com こういう話もまとめて、実験でオウム返しBOTを作る記事を時間があれば書きたいですね。

まぁ、LINEのエンジニアの方に実際に教えてもらいながら、LINEBTO作るなんて、絶対にできないですからね。 感謝の言葉しかないです。 ありがとうございました。

発表

Twitterにまとめられているので

僕のチームのはこれ

スネたり

予定教えてくれたりします。

結果

無論、賞は取れず。 まぁ、LINE BOT AWARDSの審査基準にお役立ち度って項目がある中、めんどくさいことを特徴とするBOTを作ればこうなります笑 僕のチーム以外は役に立ちそうなBOTを作ってました。

特に優秀作品賞を取った、「NEWS TATE YOMI」や「てるいいね!(TELine)」はすごかったです。2つとも社会人の方が中心のチームなんですが、学生とのアイディアの詰め方の差や技術力の差を感じ、ただひたすらすげーって思ってました。 もちろん、もう1つの優秀作品の「待ち合わせモブ」もすごかったです。

感想

とりあえず、LINE BOTは作れたので、目標の1つは達成です。 AWARDSに向けては、もっと機能を絞って、かわいい女の子のBOTが時間割とか教室をPushやReplyで教えてくれるBOTでも作ろうかなと思います。(かわいいは譲れない)

あとは、今回のハッカソンを通じ、PHP以外にもRubyとか触れるようにした方がいいなぁと感じたので勉強したいと思います。

特に、ハッカソンのような短期集中のイベントでは、新しい技術や、自分の知らない技術を短期間で詰め込まないといけないので、やっている間は大変ですが、学ぶことはかなり大きいと感じます。

僕も、今回のハッカソンで学んだことを忘れずいろいろ開発していきたいと思います。

NTTComの「WebRTCワークショップ」に行ってきた。

1月21日に、NTTコミュニケーションズさん1Dayインターン「WebRTCワークショップ」に参加してきました。 ワークショップと言っても、午前中に軽くNTTComさんの企業紹介とWebRTCの説明、ハンズオンがあって、午後からはハッカソンでWebRTC技術を使って簡単なプロダクトを作ったのでそれも少し紹介しようと思います。

参加した経緯

去年の11月くらいに行われたハッカソンで、NTTコミュニケーションズさんの提供する「SkyWay」を使ったサービスを開発し、NTTコミュニケーションズ賞をいただきました。 その時の賞品が今回参加した、1Dayインターン「TechWorkShop優先参加権」と「ドローン」でした。 しかし、ドローンはハッカソン当日に用意していなかったみたいで、最初は後日、郵送するみたいな話だったんですが、いろいろあって、人事の方に「インターン来たらその時渡すよ」となったので、ドローンを手に入れるため、そして、前よりもWebRTCとSkyWayについて深く知ろうと思い参加しました。

開催場所の田町にあるグランパークタワー。かなり大きい。NTTコミュニケーションズは東京に4箇所もオフィスがあるらしい... f:id:tetrapod117:20170122205759j:plain

ロゴ f:id:tetrapod117:20170122205743j:plain

NTTコミュニケーションズって長いので、以下NTTComで書きます。

WebRTCとSkyWayとは

Web Real Time Communication 「IPネットワーク(Web)上の時差がほとんどない通信/意思疎通」という意味です。

簡潔に言うと、Web上で電話やビデオ通話チャットなどのリアルタイムコミュニケーションを行えるサービスを実装できるAPIのことです。

特徴 1. 意思疎通(=ビデオ/⾳声通話)と通信(=P2Pデータ通信)の 2つの機能を備える。 2.iOS, Android, Webブラウザなど様々なプラットフォームで利用できる。 3.Webサイトやアプリの中で利⽤でき、SkypeやLINE等の他社アプリのインストールや起動が不要。

細かい話はこういうのを見た方が分かりやすいと思います。

www.slideshare.net

上のスライドでも書いていますが、このWebRTCという技術、ちゃんとやろうとするとめちゃくちゃ難しいみたいです。

jxck.hatenablog.com

そんな、難しいWebRTCの技術を、簡単に扱えるサービスがNTTComさんの提供する「SkyWay」です。 nttcom.github.io

開発したサービス

今回のWebRTCワークショップは「WebRTCの技術を使って、次世代のコミュニケーションアプリを作ろう」というテーマで、条件はWebRTC技術を使うことです。

SkyWayを使えと言われることはなかったですが......

いやまぁ、使わないわけにはいかないですよね......

ということで僕が開発したプロダクトの紹介です!

サービス名「Share Tube」

わかりにくいですが、スクリーンショットはこんな感じ

f:id:tetrapod117:20170122184744j:plain

何をやっているかというと、「SkyWay」のJavaScriptSDKとiOSSDKを用いて、WebとiOSアプリ間でP2P通信を行い、リアルタイムで動画ファイルを共有しています。 その下には、チャットスペースがあって、多少WebとiOS間で動画のラグなどがありますが、チャットを使いリアルタイムで感想を共有することもできます。

解決したい課題で言えば、友達との動画の共有の不便さ。

例えば、ネットで面白い動画を見つけた時、この動画を友達にも観せたいと思ったら

YouTubeなどの動画のURLをコピーLINEに貼って友達に送る、友達はLINEからYouTubeに飛んで動画を観る、LINEで感想を送る

という風に2つのサービス間を行き来しないといけなくて面倒ですよね。(別の方法もありますが...)

それを1つのサービスで実現でき、さらに「この場面のガッキーかわいいよね!」的な、リアルタイムで動画の感想を言い合える!!!!!

超画期的!!!!!

コードをある程度書き直したらGitHubにあげます...

結果

ハッカソンなので、もちろん優秀賞がありました。 学生参加者10人とNTTCom社員さん4名が良いと思ったプロダクトに投票していくシステムで、票の多かった上位2名がFitbitをもらえるのですが、今回は残念ながらFitbitはもらえなかったです。

というか、他の参加者が凄かったです。はい。完敗です。Fitbit取った方おめでとうございます。

でも、最後にSkyWayチームのリーダーの方に「WebRTCで動画を送るアイディアは面白い」って言ってもらえたので嬉しかったです。

今後の課題

今回のワークショップはハッカソン形式でしたが、チームではなく、個人の開発で開発時間は実質4時間ほどでかなり荒削りな感じになってしまいました。しかも、普段はSwiftでのアプリ開発をメインでやっているので、講義の時以外はJavaScriptはほとんど触ったことがないという状況なので、メンターの方に何度も聞きまくって開発しました。メンターの社員さんには感謝の言葉しかないです。

プロダクトの改善点がたくさんあります。ということで僕自身の備忘録的に書いていきます。

  • 動画ファイルを選べるようにする(選べないなんてなかなか致命的)というかYouTubeとかから持ってきたい

  • デザイン

  • チャットに送信された時の動画の時間を入れる

  • 動画止めた場合の処理が入っていない

  • Web版同士ではなぜかチャットができない

などなど とりあえず、時間があったら修正していきます。

感想

1Dayのインターンは、会社紹介で終わると思われて行く意味がないと思う人もいますが、実際の社員さんに技術の話を聞いたり、コードの書き方を聞けたりするので、僕は行ってよかったと思います。

同じエンジニアを目指す学生や、スーパーエンジニアの社員さんと交流することは楽しいというのもありますが、そこで得た知識や経験は一生残るモノだと思ます。

他の学生にも、こういうイベントに行くことは大事ということが伝わってほしいです。

NTTComさんのTechWorkShopはまだまだいろいろあるので、僕もまた行きたいと思います。

www.ntt.com

そういえば、ドローンもちゃんともらえましたよ。 f:id:tetrapod117:20170122205942j:plain

iPhoneが帰ってきたら遊ぼうと思います。

ハッカソンのすすめ

今年の7月くらいから、今月まで4〜5回ほどハッカソンに参加して、そろそろハッカソン初心者からハッカソン中級者くらいレベルアップしてきたんじゃないかなぁと感じてきたので、今回はそんな僕から、ハッカソンって知ってるけど参加したことない人や、ハッカソン?何それおいしいの?という人向けにハッカソンのすすめを書いていこうと思います。

主に学生向けのハッカソンについて書きます

そもそもハッカソンとは?

ハッカソンとは、ハック(Hack)とマラソン(Marathon)を合わせたで造語で、エンジニアが、一定期間集中的に開発やサービスの考案などの共同作業を行い、その技能やアイデアを競う催しのこと。

わかりやすく言うと、チームで、1日とか2日の短期間で、テーマに沿ったプロダクトを考えて作って、発表しよう。みたいな感じのイベントです。

CxHhXsPUkAQlJOU_jpg-large.jpg 雰囲気はこんな感じ(ちなみにこの中に僕がいます。探さないでね)

日本ではここ4年くらい前から少しずつ流行ってきた感じですが、ITの本場シリコンバレーでは10年以上前から流行っていて、facebookの「いいね!」とか「タイムライン」とかはハッカソンから生まれたサービスらしいです。 この辺は、facebookの本に色々載ってるので、興味のある方は是非→フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた) (多分この本だった気がする)

他にも、同じような感じで、アイディアだけを競い合うアイディアソンや、バックエンドの処理速度を競い合うチューニンガソンなどの派生系もあります。

学生向けのハッカソンの多くは、IT企業がエンジニアの採用目的で開催していることが多いです。 もちろん採用目的だけではなく、JPHACKSとかは、若い世代のイノベーターの発掘・支援を目的としていたりします。

参加するメリットは?

優勝すればお金がもらえるよ!!

企業が主催しているハッカソンは優勝すれば賞金が出るものが多いです。優勝賞金10万円とか20万円とか、高いやつは賞金100万円のハッカソンもあります。(チームで分配しますが...) ハッカソンの賞金で生計を立てる学生もいるとかいないとか......

最優秀賞以外には、協賛企業があれば、その協賛企業からの企業賞というものもあります。優勝とか最優秀賞は審査員の総合判断で決められますが、そちらは協賛企業の方の独断と偏見で決まります。

企業賞では、賞金が出ることはあまりないですが、賞品として何かガジェットとかもらえたり、企業の人とご飯に行ける権利などがもらえます。(僕も某ハッカソンで2回企業賞を獲って、ドローンをもらったり(まだ手元にない)、企業の人とご飯に行く権利をもらったり(まだ行ってない)しました)

人脈が増えるよ!!

学生向けハッカソンに出場するのは基本的にエンジニア志望の学生です。大なり小なり同じ目標を持った人が多いので、仲良くしといて損することはないでしょう。 他にも、企業からエンジニアのメンター(開発で困ったことをいろいろ教えてくれる人)や、採用系のイベントなら人事の人も来ているので、IT企業のエンジニアや人事と仲良くなれるかもしれないよ!

自分が開発したプロダクトを持てるよ!!

ハッカソンで開発したものは、ESによくある「過去の制作物」の欄に書けますし、就活の面接で「ハッカソンに出て、こんなものを開発しました!」とか言うと面接官にウケると思います(たぶん。)

チーム開発ができるよ!

ハッカソンは基本的に4〜5人チームで開発をします。これまでボッチで開発してて、チームで開発してみたいなぁって人は、チーム開発の経験を積めるいい機会です。

初心者でも大丈夫?

学生向けのハッカソンの参加者はだいたい半数くらいは初心者なので大丈夫。(JPHACKSとかレベルが高いハッカソンや、選考があるハッカソンは別)

基本的にチームで開発するので、よっぽどのことがない限りチーム全員がハッカソン初心者ということはないです。だいたい、経験者と初心者が混ざったチーム構成になります。

しかし、プログラミングを全くやったことなくて、自分のPCも持ってないって人はわるいこと言わないんでやめといた方がいいです

技術力ないと無理じゃね?

技術力はあった方がいいですが、ぶっちゃけそんなになくてもなんとかなる

ハッカソンと言っても、プロダクトの開発だけではありません。 テーマに関するアイディア出しから始まり→製作するプロダクトを決め→開発→発表とやっていくので、開発以外にもやることはたくさんあります。なので、開発が得意じゃなくても、アイディアたくさん出すとか進捗管理するとか発表用のパワポ作るとか自分で仕事を見つけましょう。できないからと言って何もしないのはやめようね!

僕も初めて参加したハッカソンでは、ゲーム開発のハッカソンのくせにUnity歴3日()の状態だったので、ひたすらアイディア出しまくり、開発中はゲームの素材とかBGM集めや、パワポの資料作ったり、プレゼンをやったりしてました。(チームの皆様役立たずで申し訳なかったです)

楽しい?

超楽しいです! 1,2日でゼロからものをづくりを行う。 いろいろなサービスやプロダクトを考えて開発することが好きな人にはピッタリです。 他にはないスピード感で、短期間で圧倒的成長できますよ! ※体感には個人差があります。

ハッカソンの探し方

基本的に僕は 2017年のハッカソン開催情報まとめ! ↑このページを定期的に見たり dot.connpass - エンジニアをつなぐIT勉強会支援プラットフォームでおもむろに「ハッカソン」とキーワード検索したりしています。

あと、マイナビリクナビの企業ページでもたまに募集してます。

東京ばっかじゃねーか!!

みなさん、上記の方法で調べたら、8割くらい東京で開催じゃねーか!!ふざけんなよ!!こちとら関西民だぞ!と思ったことでしょう。

そんなあなたのために、調べてきましたよ関西で開催されるハッカソン

Drafthack

  • 2017/2月

サイトの更新が全然ないので、マジで開催されるか!?状態です

【優勝賞金1000万】LINE BOT AWARDS 公式ハッカソン@大阪

  • 2017/2月4日
  • 2017/2月5日

多分、僕も参加します。

Hack On Air MBSハッカソン

抽選に当たったら行きます。

最後に

初めてこんな記事を書きましたが、この記事を読んで、OIT生や他の学生が少しでもハッカソンに興味を持ってくれたら嬉しいです。

では、どこかのハッカソンで会いましょう。

Let's Hack!!