FUNHACKS2017に参加してきました!

明けましておめでとうございます。 新年一発目の記事はハッカソンレポになります。

1/14(土)・1/15(日)にはこだてみらい館*1で開催されたFUNHACKS2017*2に参加してきました。

1日目

10時30分に集合でした。 開催場所のはこだて未来館は去年できたばかりの施設で、 行ったことがなかったので早めに会場に向かったところ、自分たちのグループが一番乗りでした。

f:id:n_atmark:20170120211155j:plain f:id:n_atmark:20170120211147j:plain f:id:n_atmark:20170120205256j:plain f:id:n_atmark:20170120205225j:plain

未来館できたばかりということもあって、すごく綺麗でした。 テラス席も勉強したり作業するのに良さそうです。

f:id:n_atmark:20170120205209j:plain

今回、同じバイトのメンバーでチームを組んで出場しました。 チームに佐藤が3人いたので、チーム名は「佐藤+α」でした(笑)

今回のお題

f:id:n_atmark:20170120212803j:plain 今回は、「ライフスタイル」をハックせよという課題でした。

僕たちのチームは当日、個人参加の方一人を交えて開発だったので、特にチームでアイデアを決めていませんでした。 アイデア最終決定まで時間があったので、日常生活を便利にする何かを考えてみました。

(ただ、アイデアソンをしてないので、出てきたアイデア数は少なかったです。やっぱり時間がなくてもアイデアソンはしたほうがよかったかもしれません。)

お昼ご飯

f:id:n_atmark:20170120205158j:plain

キラリス函館1階にある、パン・エスポワールさんでパンを買ってきました。おいしかったです。

開発

お昼ご飯を食べてから開発に入りました。 f:id:n_atmark:20170120212759j:plain 今回は

役割 担当
プロジェクトリーダー 自分
iOS開発 自分, S.Sさん, Y.Iさん
Webフロント開発 R.Dさん,T.Sさん
iOS UIデザイン 自分
Web UIデザイン R.Dさん

という担当で開発を進めました。

また、開発に関してチームでルール決めを行いました


  • 残りタスク、完了タスクは目に見える形で残す。(GitHub Projectなどを使用)

  • 複数人触る部分に関してはコードの記述に注意を払う。

  • 一つの問題に1時間以上かかっているなら、共有した上で代替案を探す。

  • 基本的にコア部分は1日目で終わらせる。


f:id:n_atmark:20170120205410j:plain

最近ハッカソンでの二刀流(PC2台使い)が定着してきてるような...

f:id:n_atmark:20170120205136j:plain

メルカリ水とKLabのエナドリいただきました!

1日目終了

f:id:n_atmark:20170120205241j:plain

1日目の進捗を共有しました。(ここまでは比較的順調に進んでいたのですが...)

夜ご飯

f:id:n_atmark:20170120220018j:plain 辛味噌ラーメンを食べました。 ラーメンやっまおかや〜

徹夜

f:id:n_atmark:20170120205314j:plain ハッカソンの醍醐味と言えば...

徹夜ですよね。

この辺りで重大な問題が起きてしまい、朝5時くらいまでは頑張ったのですが... 泣く泣くプロダクトの完成にはこじつけませんでした。(そのことは後ほど)

2日目

1日目の深夜に重大な問題が発生してしまい、代替案をひたすら検証していました。

発表

f:id:n_atmark:20170120212748j:plain f:id:n_atmark:20170120212752j:plain

今回、GitBookという、Gitで本棚管理ができるというプロダクトを考えました。 本の名前やバーコードから、Amazonの商品ページを検索し、アプリ内に保存。

アプリ内のDBをjsonにまとめてGitHubにpush。htmlやcssなどのファイルも合わせてcommitし、 GitHub Pagesで公開できる。

というアイデアだったのですが、 Swift用のGitラッパーライブラリであるSwiftGit2が使用できず、泣く泣く断念しました。

懇親会

f:id:n_atmark:20170120205423j:plain

お寿司やオードブルがふるまわれました!ですが、気づけば話すのに夢中でほとんど食べてませんでした!笑

集合写真

f:id:n_atmark:20170120205344j:plain

これもハッカソンの醍醐味ですよね。お疲れさまでした!

今回作った物

完成までは至らなかったのですが、制作物について載せようと思います。

今回初めてUIデザイナーを担当させてもらいました。 Adobe XDというUXデザインツールを使用して作成しました。

Adobe XDには、あらかじめiOSテンプレートが準備されているので、普段デザインを担当していない自分でも簡単に使うことができました。 f:id:n_atmark:20170120222007p:plain f:id:n_atmark:20170120222008p:plain

リポジトリ github.com

DevPost devpost.com

FUNHACKS次もあれば、また参加したいと思います〜!

以上、FUNHACKS2017レポでした!

*1:科学をベースとした先端コンテンツや彩なワークショップの体験を通してオドロクチカラを育み、街を元気にする活動を生み出す施設。 HP: http://hakodate-miraiproject.jp/

*2:函館の大学生、高専生を対象としたCIVICTECHハッカソン。 HP: https://careerselect.jp/funhacks2017/

MashupAwards 2016 2ndStageに参加してきました!

下書きに入れたまま放置してた...

12/3(土)に渋谷TOKYO CULTURE CULTUREで開催されたMashupAwards 2nd Stageに参加してきました!

10月にMashupAwards2016函館予選に参加したのですが、その時の優勝チームにエンジニアとして加えていただけることになり、今回準決勝に参加させていただきました。

函館予選のときの記事はこちら natmark.hateblo.jp

会場はこんな感じでした。 f:id:n_atmark:20170120202515j:plain f:id:n_atmark:20170120202610j:plain f:id:n_atmark:20170120202619j:plain

バーカウンターもあって、お酒も飲み放題でした〜 f:id:n_atmark:20170120202622j:plain

3部に分かれていて、56作品の発表がありました。

面白いプロダクトや、技術的にすごいプロダクトが数多くあり、すごく興奮しました。

ちょっとトラブルもありましたが、自分たちも無事発表できました。 f:id:n_atmark:20170120203052j:plain f:id:n_atmark:20170120203058j:plain

次世代型缶蹴りというプロダクトを発表してきました。 自分は、iOSアプリの回収とWebページの作成などを担当させてもらいました。 https://ma2016-kickthecan.github.io/

最後は集合写真をパシャ。 f:id:n_atmark:20170120203106j:plain

MA2016最高!!来年も参加したいので、すごいプロダクトを作るぞ〜!

iOS開発歴4年目の僕がXamarinへの移行を考えてみた

この記事は FUN Advent Calendar 2016 11日目の記事です。

10日目@neglect_yp先輩書かないのかな...

10日目(12日目)の@neglect_yp先輩の記事 gen-ius.hatenablog.com

$whoami

  • 佐藤 敦也 / Atsuya Sato
  • 学部2年 知能システムコース
  • iOSエンジニア2年目 / 開発歴4年目
  • 最近はディープラーニングとか勉強してます

詳しくはこちらポートフォリオサイトに。

本文に入る前にお詫び

もともとiOSのコアな内容にするつもりが、12/3に参加したMashup Awards 2016準決勝レポートを書くことに変えてしまいました。

、さらに変わって別のことを書くことにしました...。

ころころ変わってすみません、、。 MashupAwardsレポートに関しては、昨日12/10に参加したHakodate Hack Night Vol.7でLTネタに使ってしまい、同じことを書いてもよかったのですが、昨日同じイベントに参加された方にとって既出となってしまうので、変更しました。

ただ、せっかくなので昨日のLTの内容は別記事で書かせていただいたので、興味あればこちらの記事も見ていただけると幸いです。 natmark.hateblo.jp

記事の内容

普段、スマートフォンアプリの開発企業でiOSエンジニアとしてアルバイトさせていただいてるのですが、最近はUnityを使うことのほうが多くなってきました。

もともと日本ではiPhoneユーザが圧倒数いて、スマートフォン自体の性能もほとんどのAndroid端末はiPhoneに劣っていました。ただ、最近Androidの性能がどんどん良くなってきており、もはや「国内用のアプリだからiPhoneの対応だけでいいや〜〜」なんて言ってられなくなりました。

そこで、Androidの開発を勉強しようと思った次第なのですが、今からAndroid StudioJavaをガリガリ書く気にもなかなかなれないのです。(そもそもAndroid端末持ってないし)

Android用に、フレームワークやらJavaやら覚えるくらいならクロスプラットフォームに移行してやる!!と思ったのが今回の記事のきっかけになります。

Xamarinとは

C#を用いてiOSAndroidのアプリケーションを開発するためのライブラリおよび開発環境です。 XamarinはMicrosoftよりVisual Studioの一部として提供されていますが、Mac版の開発環境も存在しており、Mac上でC#を用いてiOSAndroidアプリを開発することも可能です。

http://codezine.jp/article/detail/9619より引用

C#を使ってクロスプラットフォームでの開発が実現できるものです。

そもそもなぜXamarinなのか

ちょまどさん可愛い

Xamarin.Formsによってクロスプラットフォームはもちろん、 Xamarin.iOS、Xamarin.Androidが用意されており、クロスプラットフォームを要求されない場合は、それぞれの開発系に従って開発できる。

すごい( ゚▽゚ っ)З

まずはXamarinでiOS開発

クロスプラットフォームを早速やってみてもいいのですが、Xamarin.iOSが気になりました。 もしXcode以上に良くできていればXamarinに完全移行もありうる...???

Xamarin インストール

https://store.xamarin.com/こちらからインストールできます。

f:id:n_atmark:20161211193020p:plain

アイコンがおしゃれですね。

My First Xamarin ( ゚▽゚ っ)З

さっそくXamarin Studioを立ち上げてみました

f:id:n_atmark:20161211193147p:plain

ちょっとごちゃごちゃしてますね。立ち上げて何すればいいのか、初めての僕にはさっぱりだったので、もう少し起動画面シンプルでもいいのに...

プロジェクトの新規作成

左上のNew Solutionsがプロジェクトの新規作成のようですので、押してみます。

f:id:n_atmark:20161211193504p:plain

プロジェクトのテンプレート選択画面のようですね。iOSのテンプレートはXcodeと同じ感じ。 Single View Appを選択してみる。

f:id:n_atmark:20161211193638p:plain

アプリケーションの詳細設定画面です。 このあたりもXcodeと同じ感じ。AppNameに入力した名前とかDevicesで選択した端末が右側に出てくるようです。面白い。

この後、Solution Name等の設定がありますが割愛。

ソースエディタ

f:id:n_atmark:20161211194124p:plain

MonoDevelopが標準搭載されているようです。Unityで使っているので、特にエディタに関する知識はいらなそうですね。他のエディタで開くこともできるみたいです。

Storyboard

StoryboardもXamarinから弄れるようです。

f:id:n_atmark:20161211194402p:plain

ただ、ここでStoryboardの扱いがXcodeと結構異なるので苦戦しました、、。

まずAutolayoutですが、XcodeがAutolayoutメニューからConstraintを設定するのに対して、XamarinではUIコンポーネントを2回クリックすることで表示される、矢印を使って設定するようです。 f:id:n_atmark:20161211194641p:plain

f:id:n_atmark:20161211194651p:plain

結構苦戦しました。

Outlet接続とEvent割り当て

f:id:n_atmark:20161211194734p:plain

配置してみて、Xcodeで次にやることはOutlet接続なので、エディタを2画面にして、Controlキーを押しながら...

f:id:n_atmark:20161211194832p:plain

っていう方法もXamarinでは使用できません。

その代わり、

f:id:n_atmark:20161211195000p:plain

UIコンポーネントが持つPropertyの中の、Identity項目にNameという欄があり、名前を入力すると、、。

f:id:n_atmark:20161211195118p:plain

.designer.csというファイルに自動的にOutlet接続されるようです。

f:id:n_atmark:20161211195156p:plain

実際にViewController.csにmyButtonを入力してみると、しっかり紐付けされているようです。 これは便利かも。

また、EventもXcodeではControlキーを押しながら...という操作をするのですが、Xamarinでは、 PropertyのControlEventに関数名を入れると...

f:id:n_atmark:20161211195448p:plain

UIコンポーネントの配置されているViewControllerクラスが記述されているファイル上にカーソルが自動的に移動して、イベントハンドラを追加できるようです。 f:id:n_atmark:20161211195505p:plain

(これ、便利だけどソースコードが長くなってきたら、挿入位置選択するの大変そうだなぁ...)

ラベルとボタンだけの簡単なアプリ

f:id:n_atmark:20161211195818g:plain

ざまりん( ゚▽゚ っ)Зざまりん( ゚▽゚ っ)З

まとめ

ここまで作るのにかかった時間は1時間かからないくらいです。ちょっと苦戦しましたがそんなに学習難易度は高くないような気がしました。

気になったのは、Xcodeに比べると動作が全体的に重たいです...。

Xcodeより便利だなぁと感じる機能ももちろんありましたが、ちょっと癖があるのと、やっぱりiOSXcodeで開発しようと思いました。

今回試してみてXamarinに少し慣れることができたので、次回はクロスプラットフォーム開発可能なXamarin.Foramsを試してみたいなーと思います。


Fun Advent Calendar 2016

明日は@mecaota先輩ですね。

今年はクレカじゃない...?!

MashupAwards 2016準決勝出展作品にみる、最近のAPI/デバイス/サービス事情

記事の内容

今回の記事は、12/3に参加してきたMashupAwards2016(http://mashupaward.jp/)準決勝の出展作品で使われている、API/デバイス/サービスを集計してみたらこんな感じだった! というLTを12/10のHakodate Hack Night Vol.7(https://www.facebook.com/events/719922814823940/)で話してきたので、そのLTについての記事になります!

↓LTのスライドはこちら

https://speakerdeck.com/natmark/hakodate-hack-night-vol-dot-7-lightning-talk

(スライド内ではAPI/デバイスとなっていますが、サービスも含んでます。)


簡単にスライドの補足

slide6

MashupAwardsの出展作品はすべてHacklog(http://hacklog.jp/)に登録されていて、

f:id:n_atmark:20161211181900p:plain

このように、作品ごとに使用したAPIを登録できるようになってます。 これを、スクレイピングと手作業で集計してみた結果がスライドに書いてあります。

slide7

API/デバイス/サービスを利用したグループが3つ以上あったものをランキングにしてみました。 1位が同率で、

でした。

slide8

集計した全APIをd3.js(https://d3js.org/)によって、バブルチャートにしてみたものです。 一番多くの割合を占めてる青色部分はIoTカテゴリのAPI/デバイス/サービスを占めています。 その周りに、オレンジ(クラウド・データ連携)、黄緑(ガジェット)、赤色(プラットフォーム)、ピンク(認識・解析技術)・・・と続いています。

slide9

集計したデータからIaaS、PaaS、BaaSといったクラウドサービスに関するものを抜き出してみました。(AzureはIaaSとPaaSどちらの面も持っているので、重複させています)のべ数が34あり、出場チーム56に対して、半分以上のチームがハッカソンクラウドサービスを利用していたことがわかりました。

slide10

今回myThingsやIFTTT(イフト)、DataSpiderといった、API連携プラットフォームを利用しているチームがそれなりに見られました。Webサービスやデバイスをプログラミングせずに連携できるもので、IoTブームに見られる新たなサービスなのかな、、。と思いました。

時間の縛られるハッカソンでこそ、見られた傾向かも。

slide11

最後に企業別に利用されているAPI/デバイス/サービスを利用されたAPI数(種類数でなく利用数)ごとに並べてみました。これ、利用種類数で並べてたら、API/デバイス/サービスの提供を頑張ってる企業がわかったかも。スライドの表見て分かるのは、マイクロソフトが圧倒的に人気ですね。

まとめ

データを解析するの楽しかったです。アナリティクススキルをつけるともっといろいろなことがわかるようになるのかなぁ...と思いました。 また何か機会があればデータ分析してみたいです。

MashupAwards2016 函館予選に参加してきました!

10/9-10/10にはこだて未来大学で開催された 「Mashup Awards*1 2016 函館予選」 に参加してきたので、お酒を片手にハッカソンレポを書いていこうと思います。

mashupawards.doorkeeper.jp

参加者としてハッカソンに参加するのは実に1年ぶりでした。昨年6月のSPAJAM振りでした。

natmark.hateblo.jp

前回のハッカソンも、予約したはずの夜行バスが取れてなくて大変でしたが、 今回のMashupAwardsでも困難が立ちはだかるのでした...

1日目

スポーツ・食べ物に関する絵を描いてアイスブレイク!

かきかき。左側は僕です。なんの絵でしょう〜か?*2

イデアソンとチームビルディング!

イデアソンの様子です。 「未来キーワード」×「スポーツ・食べ物」でマッシュアップ

イデアを考えて...

チーム募集!

チーム決定!

今回、僕と学部4年の先輩が同じアイデアだったので 「手を使わない卓球」 をチームを募集して作ることになりました。

チーム募集を行った結果...

  • H.Sさん(デザイナー・学部1年生)
  • N.Sさん(デザイナー・学部1年生)
  • S.Kさん(エンジニア・中学1年生)
  • 自分(エンジニア・学部2年生)
  • K・Sさん(エンジニア・学部4年生)

5人のチームができました! エンジニアが3人・デザイナーが2人というバランスが良さそうなチームになりました。 なんとこのチーム、最年少が中学1年生、チーム平均はなんと18歳!

周りのチームが学部4年生や院生のメンバーが多いなか、平均年齢18歳は異彩でした。

ハッキング!

今回ですが、「手を使わない卓球」を作るにあたって、SONYさんのSmart Tennis Sensorを使用しました。

こちら、本来テニスラケットに取り付けて、スイングスピードやスピンを測定するものなのですが...

これをなんと...

足に付けてみました!

f:id:n_atmark:20161011000020g:plain

ちゃんと値も取れてます!!

この時点でまだお昼前。順調と思いきや、この後様々な困難が立ちはだかるのでした...

お昼ご飯

函館名物ラッキーピエロ。未来大生からすると、みんな食べ慣れた味ですねw

午後→夜

午後に入って、まず第一の困難。

エンジニアのK・Sさんが突発的な発熱

ハッカソンで体調を崩すことって結構あるんですよね...僕もよくあります...。 無理しても体調が良くなることはないので、K・Sさんにはしっかり休んでいただいて、他のメンバーでK・Sさんの分まで頑張ることに。

まず、アプリの構成を考えました。

f:id:n_atmark:20161011001525p:plain

これが初期案です。Smart Tennis SensorがAndroidしかAPIを提供していないため、Android端末を経由させています。 Smart Tennis Sensor一つの値だけでしたので、サーバを立てる時間も人も余分に割くのはもったいないため、mBaaSを使うことにしました。(これが後々大変なことに...)

この時点で僕が最年長になったので、プロジェクトのリーダーを担当することに。 とりあえずタスク振りをする必要があったので、

  • H.Sさんにプロダクトデザイン・UIデザインをお願い
  • N.Sさんに3Dモデリング・モデルデータ整形をお願い
  • S.KさんにAndroid経由でセンサーの値をmBaaSにデータストアできるようにお願い
  • 自分はUnityでゲーム本体を作ることに

午後は個人でこつこつやる感じに

f:id:n_atmark:20161011002935j:plain f:id:n_atmark:20161011002952j:plain f:id:n_atmark:20161011003008j:plain

午後の成果

ロゴマーク f:id:n_atmark:20161011003510p:plain

3Dモデル f:id:n_atmark:20161011003531p:plain

Unity

ゲーム画面が、ピッチングマシンみたいにボールが出てきて、卓球台の上を跳ねるように。

Android

mBaaSデータストアにデータ送信できるように。

新たな問題

この時点で、一日目19時くらいなのですが、新たな問題が。

mBaaSのデータストアイベントをハンドラにして、Push通知の作成ができない!(できると思ってた!) 完全にこれは僕の調査不足でした...。 mBaaSはスクリプトを記載できると聞いていて、サーバ側でトリッキーな処理もできるものだとばかり思っていました...

仕方ないので、構成案を変えることに。

f:id:n_atmark:20161011004458p:plain

AndroidからNCMB SDK経由でPush通知を作成することに。

しかしそこでも、新たな困難が。 Push通知はUnity側で受け取ることができず、UnityからiOSAndroidに書き出したあと、 iOSAndroidのOSの機能として利用することができるというもの。 UnityにNCMB SDK追加したからと言って、Unityで使えるわけではなかったのです。

ならこうだ f:id:n_atmark:20161011005126p:plain ということで、iOSに書き出してみましたが、 iOSでPush通知を使うにはDeveloperアカウントと証明書が必要なんですよね...

幸いにもS.KさんがDeveloperアカウントを持ってたので、証明書作る→Unityから書き出し→起動→エラー→証明書作成→... を繰り返し3時間経過...

結局解決できず、この時点で22:30。 S.Kさんが未成年で、親さんのお迎えがあることもあり、一日目の作業はここまでに。

家に帰って

一日目の作業はここまでにということで、大学から帰ってきましたが、データ通信もできてないのに、寝れるわけもありません。 なんとかデータ通信をしようと構成案を練ります。

mBaaSがダメならFireBaseだ!ということで...

  • 第4構成。

f:id:n_atmark:20161011005833p:plain これなら、Push通知ではなく、Databaseの値が更新されたとき自動的にイベントが実行され、クライアント側で受け取れる! と思ったのですが、そんな簡単なはずもなく、Databaseのルール設定を行って、APIキーやらURLやらをunofficialなUnityのFireBase SDKに指定したものの...動かない。この時点で1時。

  • 第5構成。

f:id:n_atmark:20161011011433p:plain ここで、これ以上BaaSに執着すると失敗しそうだったので、サーバを立てることを決意。 ただ、僕にWebの知識がなかったので、この構成で一つミスを犯すことになります。 androidからpost送信、Unityとサーバはsocket通信によって、それぞれOSの機能を意識しなくても良くなります。

ただし、同じサーバでRestfulAPIサーバとWebSocketサーバを同時に立ち上げたのが間違いでした。 ポートを変えていれば、同じサーバでもいけると思ったのですが、 Herokuを使っている関係で、ポート番号はProcess.env.portに置き換わってしまい、ユーザ定義にできないのです。 これでもまだだめ...

  • 第6構成。

f:id:n_atmark:20161011011744p:plain Android側もSocket通信にしちゃおうという構成です。

every-studio.com

こちらを参考にしました。 f:id:n_atmark:20161011012554p:plain フロントエンドで実装したフォームからUnityにsocket通信ができていることを確認。 これでいけそうな気がしたので、1日目はここで寝ることに。3時就寝。

2日目

MAは10時からですが、S.Kさんと早めに作業することに。8時起床。

f:id:n_atmark:20161011012113j:plain

朝の未来大学。おはようございます。

MAが始まるまでにAndroidのsocketを頑張ってました。

2日目始まりました

10時〜12時

S.KさんとひたすらAndroidのsocketを試しました。

こちらを参考にしました。 dev.classmethod.jp

ここでも困難が。Unityで指定しているURIを設定しようとしたところ...、 socket = new SocketIO("http://10.0.2.2:3000/"); この部分ですが、WebSocketプロトコルが指定できず、httpかhttpsを使ってくれとのこと。

しかし、http/httpsを使用するとなぞのhandshakeエラー...

Androidに詳しいわけでもないのでお手上げ... *3

デザイナーのN.Sさんには、相手キャラクター、卓球のラケットの3Dモデルを用意してもらうようにお願いしました。 同じくデザイナーのH.Sさんには画面UIのデザイン素材の用意やプレゼンの作成をお願いしました。

お昼ご飯

はせがわストアのやきとり弁当でした。 やきとりなのに豚肉です。僕も3ヶ月前くらいに初めて知りました。

13時〜15時

これ以上Android側に負担を増やせなかったので、構成案を変えることに

  • 最終構成

f:id:n_atmark:20161011013749p:plain

サーバを2つ経由させました。 今回はHeroku様様。node様様でした。

ただ、GETでアクセスできるようにしたのにもかかわらず、Android側からURLRequestできない謎のエラー、、。 時間いっぱい対処しましたが、対応しきれませんでした、、。

発表会

記事がだいぶ長くなってしまいましたので、他チームの発表はぜひ MashupAwardsのTwitterから確認してみてください。

twitter.com

僕たちの発表

いろいろやりたかったのですが、結局メインの機能も不十分のままで、悔しい結果に終わってしまいました。 実装力に課題が残ってしまいましたが、次回のハッカソンに生かしたいです。

懇親会

ハッカソンといえば懇親会でお酒...はなかったですw 20歳になって、お酒が飲めるようになったのでちょっと期待していたのですが...!

ハッカソン恒例、写真撮影

家に帰ってから

ノベルティーハッカソンの醍醐味の一つですよね f:id:n_atmark:20161011015603j:plain

MashupAwardsお泊りセット f:id:n_atmark:20161011015619j:plain

Hacklog http://hacklog.jp/works/48558

ハッカソン内で作成したリポジトリf:id:n_atmark:20161011015741j:plain github.com

久しぶりのハッカソン楽しかったです。 来年もMashupAwardsが(函館で)あれば参加しようと思います。(次は入賞目指して!) おしまい。

*1:様々なデバイス、API、ハードウェア、技術をMashup(まぜ合わせ)し、人、企業もMashupをしながら、作品を生み出すことを楽しむものづくりの祭典。 2006年に始まった株式会社リクルートホールディングスが運営す日本最大級の開発コンテスト.

*2:最近バドミントンをしたので、バドミントンの絵を描きました

*3:後々、このエラーは非同期処理をしないと発生するエラーかもしれないと教えてもらうことに。Androidに詳しい人物がいなかったのは、結構痛かったです。

起動したターミナルアプリに合わせて、.bashrcの処理を分けた話

こんばんは。

 

今日は、Macでのターミナル環境を整えている時にちょっと特殊な(?)現象に遭遇したので、紹介しようと思います。

 

今回記事を書くにあたって、まず新しいターミナルアプリをインストールしたことが背景にあります。

 

Electron製のHyperTermというエディタを見つけ入れてみることにしました。

hyperterm.org

 

このエディタですが、Javascriptを書くことで、レイアウトやアニメーションを自由に変更することが可能になっています。

 

レイアウト等の変更についてはこちらの記事を参考にしてみてください。

qiita.com

 

公式で紹介されているPluginを入れてみました。

~/.hyperterm.js内のplugins:[]内に記述することで使用できるようです。

f:id:n_atmark:20161003011108j:plain

f:id:n_atmark:20161003004358g:plain

アニメーションが付いて、コマンドを打つのが楽しくなります。笑

 

そして、ここから本題です。

HyperTermをインストールしたのですが、HyperTerm側でPowerLineが表示されていません。

f:id:n_atmark:20161003011440j:plain

github.com

PowerLineが出ないので、ホスト名とユーザ名はもちろんパスも出なくなってしまいました。これでは困ります。

 

そこで、.bashrcの処理を実行ターミナルによって変更する必要が出てきました。

 

PowerLine側ではzshを使う案も考えたのですが、やはり使い慣れているbashの環境がよかったので、今回は.bashrcを処理を分岐することを目標にしました。

 

実行ターミナルを環境変数で確認できれば、すぐできそうなのですが、

なかなかネットで記事を探しても見つからず...

 

苦戦していたところで、そういえばsetとかいうコマンドがあったなぁ、と。ふと思い出す。

 

f:id:n_atmark:20161003012153p:plain

$TERM_PROGRAMという環境変数がありました。

(※どうやら、$TERM_PROGRAMという環境変数OS X用のものらしいです。)

 

 

function _update_ps1() {
export PS1="$(~/powerline-shell/powerline-shell.py --mode compatible $? 2> /dev/null)"
}
if [ ${TERM_PROGRAM} = "iTerm.app" ]; then
export PROMPT_COMMAND="_update_ps1; $PROMPT_COMMAND"
fi

 .bashrcを編集して、iTermで起動しているときにだけPowerLineを呼び出すようにしてみました。 

 

f:id:n_atmark:20161003011337j:plain

無事、HyperTerm側ではPowerLineを呼び出さないようにできました。

 

おしまい。

 

ポートフォリオサイトをリニューアルしました!

ポートフォリオサイトをリニューアルしました。

今までブログ記事などをポートフォリオサイトの方に載せていたのですが、すごく面倒くさい...というかいちいちデプロイかけるのが面倒くさくなり、ブログ記事を分離させることにしました。

そんなわけで、昨日からはてなブログへの記事投稿数が急激に増えているのはそういう理由です。笑

f:id:n_atmark:20160929184637p:plain

https://natmark.github.io/

 

以前のサイトはMaterializeを使用していたのですが、今回Bootstrap使いました。

Bootstrap様様です。

僕自身HTML/CSSはほとんどできません。見よう見まねでしか書けません。そんな僕でも手軽にリッチなレスポンシブサイトを作れるのはBootstrapのいいところです。

 

最近インスタグラムにはまっているので、インスタライクなヘッダーにしてみました。

f:id:n_atmark:20160929184831p:plain

background:linear-gradient(75deg, #E4A972, #9941D8);

1行でグラデーション実装できてしまうlinear-gradientがすごい便利でした。

 

おしまい