ペナン島に行ってきた話。

国際会議に参加するためにマレーシアのペナン島に行ってきました。人生初の海外ということでいろいろとスマホにも画像が残っていたので、これの有効活用もかねて紀行文風にまとめてみようと思います。国際会議の話よりもご飯とかそういう話が多めです。

そもそもペナンってどこよ?

大学が現地にキャンパスを持っているという背景がなければペナンという地名はおそらく一生知ることもなく、リゾートと言われて思い浮かぶ地名はハワイかバリ島だったと思います。

場所はマレーシアの首都・クアラルンプールから見て左上の小さな島で、中心部のジョージタウンは町並みが世界遺産に登録されているらしいです。先述の大学のキャンパスとか、大手企業の工場もあるので、観光地と言いながらも工業地帯でもあるという不思議な場所です。

私は学会会場の兼ね合いもあって島の北部にあるBatu Ferringhi1)バツーフェリンギ、と私は読んでいましたがイマイチしっくりくる読み方が分かりませんのリゾートホテルに滞在していました。ホテルの近くで中華訛りが強めな日本語で客引きをしていたTシャツ屋のおっちゃんによると、昔は日本人もかなり来ていたらしいです。

本島と比べれば小さい島ですが、国際空港があるのでシンガポールやクアラルンプール、あるいは私のように香港を経由して行くことができます(日本からの直行便は無い)。

1日目

今回の私のルートは中部国際空港(セントレア)から香港経由でペナン入りするコースにしました。出国の場合は2時間前に着いていないといけないという原則を知らなかったので、適当に何も考えずに朝10時発の便をとってしまい、朝4時起きでタクシーを使って最寄り駅に行かなければいけなかったのが最初の誤算でした。

セントレアから香港まではおよそ4時間、乗り換えて香港からペナンまでがまた4時間ほどかかるので、移動だけでほぼ半日かかります。

なにせ初めての海外なので、体験すべてが新鮮でした。最初の機内食の選択肢が、あのテンプレ的な「Beef or Chicken?」だったり2)Beefにしましたが、謎のアジア風味付けとチャーハンがパサつきすぎていて美味しくはなかった…、香港国際空港にある日本のおみやげ屋3)なんでここにあるんだ?って感じでしたがの価格が日本円に換算すると桁が1個多かったりとか、出発ゲート変更であのだだっ広い空港の端から端を徒歩で移動させられたりとか。香港―ペナン間のドラゴン航空で、最近はコスト削減で出ないと聞いていたハーゲンダッツがエコノミーでも出てきたのはちょっと感動でした。

 

現地に着いたのは夜10時くらいだったので、アクティブな同級生に誘われてホテルから徒歩5分くらいのところにある、地元民向けっぽいお店のミーゴレンを食べました。3口食べたくらいから声が天龍源一郎になるくらいには辛かったですが、日本の辛味とはまた違った感じで、私は嫌いじゃなかったです。
現地民向けだからかも知れないですが、価格も5RM(150円くらい)でとてもリーズナブルでした。もっとも、他の場所でもお酒を頼まなければ基本的に食費に関してはかなり安く上がります。

ミーゴレン(けっこう辛い)

マレーシア初のご飯は無難にミーゴレン(けっこう辛い)

宿泊先は「ベイビュービーチリゾート」にしました。ホテルの部屋はスタンダードルームとはいえ海に面した方の部屋で、波音が聞こえるいい部屋でした。レビュー通り築年数を感じる建物で、ドロワーテーブルに虫がよく這っていたりして少々嫌な気分にはなりましたが、5泊でサービス料等込みで5万円は周辺のリゾートホテルの価格帯からすれば安い方だと思いますし1人で泊まるには十分でした。

2日目

外が明るくなってやっとホテル周辺の景色が見えるようになりました。ビュッフェ形式の朝食会場からもプールとフェリンギビーチが見えます。もっとも、泊まったホテルの名前からして「ベイビュー」なのですが(笑)。

 

ただ、海は格別綺麗というわけでもなく(むしろ汚いし波も高い)、近辺のホテルもプール付きが多いので海に入っている人を見たことはほとんどありませんでした。

…というか、海への通路にこんな看板が立ってましたしね。

DSC_0462

「クラゲがいるから泳ぐなら自己責任な!(意訳)」

この日の昼間はプレカンファレンスのためにUSM(マレーシアサインズ大学)のペナンキャンパスに行っていました。

ホテルに戻ってきてから、旅の疲れもあってすごくお酒が飲みたかったので「ロングビーチカフェ」へ。ここは小さな料理屋の集まりというか、言ってしまえば多国籍料理のフードコートみたいな場所で、マレーシアの料理だけではなく中華やケバブ、日本式の鉄板焼きのお店など、さまざまな料理が楽しめます。

ロングビーチカフェ。上の看板はドリンクメニューで、正面奥のカウンターで注文する。

ロングビーチカフェ。上の看板はドリンクメニューで、正面奥のカウンターで注文する。

注文の仕方がよく分からないのでちょっと戸惑いますが、要約するとこんな感じです。

  1. とりあえず適当に席を決めてテーブル番号を覚えておく。混んでると注文している間に誰かに座られそうなので、できれば2人以上で行ったほうがいいかも。
  2. 食べたい料理のお店で注文し、テーブル番号を伝える。この時はお金を払わなくていい。
  3. 席に戻って料理の到着を待つ。
  4. 料理が届いたら、持ってきた人にお金を払う。
  5. 食べ終わったら、テーブルを巡回してるおばちゃんが食器を下げてくれるので、そのまま席を立ってもOK。

こうして注文したのが下の料理(四角い牛肉ハンバーグみたいなのと野菜を炒めたようなやつ。12RM=約360円)。タイガービールは観光客の行くお店ならほぼ間違いなく置いてあるので飽きるほど飲めますが、写真の小瓶サイズで10RM(約300円)なので、日本と値段はそう変わらないです。

DSC_0491

余談ですが、この時私は1人で食べに行ったので席取りにとても苦労しました。ビールを飲みかけで次の料理を注文しに行ったら、その間に片付けのおばちゃんにビールもろとも片付けられてしまいました(涙。もしこれからロングビーチカフェに行く人はぜひ複数人で行きましょう。

ラクサ。見るからに辛いけど癖になる味。5RM(約150円)。

ラクサ。見るからに辛いけど癖になる味。5RM(約150円)。

3〜4日目

3日目・4日目は国際会議の本会議で、発表を聞いたり夕飯もバンケットなのであまり市中に繰り出すこともなかったのでダイジェストでいきます。

DSC_0504

休憩時間に行った足つぼマッサージ。めっちゃ足が綺麗になった(笑)

発表前の景気付けに飲んだエナジードリンク。カフェイン量は日本のレッドブルと同じくらい。

発表前の景気付けに飲んだエナジードリンク。カフェイン量は日本のレッドブルと同じくらい。

ちゃんと発表もしました(の一言で終わりにしたい…)

ちゃんと発表もしました(の一言で終わりにしたい…)

発表後のボスとの会食。どれも美味しかった。ごちそうさまでした。

発表後にボスと会食。どれも美味しかったです。ごちそうさまでした。

5日目

この日で実質的に最終日でした。本学のペナンキャンパスを見学し、ジョージタウンを観光しました。セントジョージ教会とか、いろんな宗派の寺院?などを案内してもらったのですが、アジア訛りの英語がよく聞き取れなかったので今ひとつ何がなんだか分かってません(笑)。割と古めかしい町並みの中を猛スピードで車が行き交う、不思議な雰囲気の街でした。

 

面白かったのは、至る所で見られるストリートアート。壁に書かれているのに立体的でちょっと笑えるような絵が多く見られました。ちなみに1枚目の画像で「OFFICIAL POKESTOP4)ポケストップに公式も非公式も無いと思うんだけど…」なる看板があるように、この近辺はポケストップがいっぱいありました。

 

私もこんな感じで遊んでました。

DSC_0638

ちなみに、このアートはペナンのおみやげTシャツにも描かれてたりします。

この後はホテルに戻り、翌朝早くにペナンを出発して帰国しました。

海外旅行初心者でも割と楽しめるかも?

最初は少しマレー語を勉強すべきかなぁと思ったりもしましたが、観光地ということもあってか基本的に英語で通じますし、フェリンギビーチの露店やホテルでは日本語が通じるケースもありました。
唯一困ったのはロングビーチカフェでビールを頼もうとした時、「What kind of beer?」と店員さんに尋ねたところ3種類くらいの名前をブレスもなくものすごい速さで喋られてほとんど聞き取れず、結局最初にかろうじて聞こえたタイガービールを頼まざるを得なかったことくらいで、あとは料理を指差したりとかすれば、英検3級みたいな感じの英語力でも、最低限ご飯は注文できます(笑)。

フェリンギビーチのナイトマーケットで、見るからにパチもんの時計を売ってる露店を冷やかしていた時にコワモテな店主に「いくら(で買う)!」と詰め寄られた時はさすがに苦笑いして「I’ll come back next time.(また今度ね…)」と言って逃げてきましたが、基本的に押し売りのようなことはしてこないですし、物盗りにも遭いませんでした。
せいぜい気をつけるべきは交通マナーとかでしょうか…車がけっこうな速度で走ってるので怖いです。タクシーも容赦なく飛ばすので乗っていてヒヤヒヤしますが目的地には割と早く着きます。

物価に関しては、場所にもよりますが日本よりは少し安いかな、程度かと思います。空港でほとんど両替してしまったので1RM=30円で計算していましたが、市中で両替すればもう少しレートはよくなります。
飲食費は先のロングビーチカフェや地元民向けっぽいリーズナブルなお店であれば日本円で500〜1000円程度でも十分満足できると思います。麺類はけっこう安め(5〜10RM、150〜300円)です。おみやげもお菓子類はかなりリーズナブルなので、大量に買ってばら撒くこともできます。

海外って面白いわ、やっぱり。

…とまぁ、5泊6日ということもあってペナン、特にバツーフェリンギをだいぶ満喫できました。日本とはまた違った気候と人々の行動様式がとても興味深く、たまには海外に出向くのも面白いなと思えた5日間でした。

ここには書いてないですが、現地のネット事情やナイトマーケットの話など、まだネタはありますので気が向いた時にでもまた書いていこうと思います。

活力「に」スティック!!

活力「に」スティック!!

References   [ + ]

1. バツーフェリンギ、と私は読んでいましたがイマイチしっくりくる読み方が分かりません
2. Beefにしましたが、謎のアジア風味付けとチャーハンがパサつきすぎていて美味しくはなかった…
3. なんでここにあるんだ?って感じでしたが
4. ポケストップに公式も非公式も無いと思うんだけど…

就活終了のご挨拶

巷では就活解禁から半月で内定率50%超え…なんてニュース記事が飛び交っていて、先日とある企業の人事の方からも「就活の状況はいかがですか?」というメールを頂いたりしましたが、ご多分に漏れず私も既に内定を受諾して就活を終えました。

昨年末のブログエントリでもちらっと触れていましたが、就活自体は昨年10月ごろから始めていました(私は特にそういう意識はなかったけど、インターンを就活と言うのであれば8月から)。

その中で11月〜12月にはいくつかの起業にエントリーし面接を受け、12月に1社目、今年初めに2社目から内定を頂いてました1)どちらも経団連非加盟なので、この時点で内定と呼称して問題はありません

また、様々な企業の人事の方からもインターンや会社見学、エントリーのお誘いも頂きました。
これは私の不徳の致すところですが、その全てに対応できず、結果的に連絡を途絶えさせて無視してしまうような形になってしまったところが多かったことは、大変心苦しく思っていました。
この記事で申し上げるのも何か違う気はしますが、お声掛けいただいたことはエンジニア冥利に尽きると云いますか、大変うれしく思っていたことは、間違いなく言えることです。その点だけでもご理解いただけますと幸いです。

 

内定を頂いてからも、どうしても内部を見たい・チャレンジしたい企業があり、内定先の人事の方のご理解もあって受諾を待って頂きました。
そして、幸運にもその企業のインターンに参加でき、ジョブマッチングにも参加することができました。
最終的にその企業には2回目のジョブマッチングで落ちてしまったのですが、自分の実力で挑戦できたことは誇りに思っています(落ちたことは今でも悔しいですが)。なにより社内の雰囲気や開発スタイル、そして自分の今の実力の限界を知ることができたし、納得したうえで社会人としてのキャリアのスタート地点を決めることができたと思います。

 

最終的に私の意志で受けた企業は4社でした。勝率(?)に直せば、イーブンということになるんでしょうか。
内定先の人事の方には、内定受諾を待ってもらったり、エンジニアの方との面談をセッティングしていただいたりと、本当に至れり尽くせりの対応をして頂きました。
内定を受諾する先を決めるときは文字通り断腸の思い2)実際、数日胃が痛かったで決断したのですが、悩んだ末の結論を受け入れてくださった人事の方には、本当に感謝しています。

 

就活を進める上で、私は「自分を不必要に飾らない」ことを一番のポリシーにしていました。
自分を飾って得た内定なんて、入社してからきつくなるだけだと思っています。
人間性はともかく、私は学生といえどエンジニアとしてのスキルやキャリアに関しては、相対的には劣っているとしても絶対的に低くはないと信じていました。

就活を終えて、それは間違っていなかったと思いました。
私は自分の力で興味を持った企業にエントリーし、面接を経て自分自身を知ってもらい、その上でその企業の判断を待つというステージまで立てたわけですから、少なくともそのことについては、自信を持ってよかったと思っていますし、素直に自分のスキルやキャリアがどこまで評価されるのかを知るいい機会になったと考えています。

 

結果的に就活をしていた期間は8ヶ月近くということになります。
でも、世間一般の学生のように短期決戦型の就活より、じっくり企業について理解を深め、チャレンジできた就活だったと思いますし、短期決戦で就活に一定期間拘束されて研究などが疎かになるより「期間は長いが単発的に」就活をするほうが、結果的に研究やアルバイトなどと並行して活動でき、よかったと思います。

 

就活を振り返るといろいろと思うことは多いので、また折を見ていくつか記事を書きたいと思いますが、まずは就活終了のあいさつと、関わりのあった皆さん、そして支えてくださった方々に御礼を申し上げたいと思います。本当にありがとうございました。
今後とも、よろしくお願いします。

References   [ + ]

1. どちらも経団連非加盟なので、この時点で内定と呼称して問題はありません
2. 実際、数日胃が痛かった

えっ、もう2015年終わんの? : 2015年まとめ

ついこの間、すり減った精神状態で2014年のまとめを実家で書いていたと思ったらもう2015年が終わりだそうです。
ってか明日は12月32日か13月1日だろ、絶対…夢のクレヨン王国は17月くらいまであっただろ(歳がバレる)。

まぁそんなベタな驚愕の仕方はさておき、例年のブログエントリに倣って1年を一言でまとめると、今年は「中身が濃すぎて月日の概念が吹っ飛ぶ」ような1年だったと思います。

あまりにもいろいろありすぎて例年のように箇条書きにするにはイベントが多すぎるので、私のスマホに残っている画像と絡めながら1年を振り返ってみたいと思います。

 大学の実務訓練(インターン)

あれだけメンタルと肉体を削った卒研が終わって年明けから2ヶ月ほど、浜松の照明器具ベンチャーに実務訓練に行っていました。製品開発から展示会での製品説明と、企業活動の一連のフローを体験することができました。

DSC_0347 (1)

学会発表

昨年末から年明け(実務訓練行くまで)の間メンタルを削っていた原因は学会発表の予稿作成でした。実務訓練が明けてから学会(電子情報通信学会の総合大会)までの間も、あれだけ先輩や先生が「そんなに心配しなくても大丈夫だから!」と言っていたのに、しばらくはご飯が喉を通らなくなりましたね。小心者なのでw

結果的には少々厳しい意見もいただきましたが、炎上することなく発表を終えられてほっと胸をなでおろしました。

DSC_0382 (from REI)

大学卒業&引っ越し

学会のあとは卒業式でした。とはいえ学部から同じ大学の院に行くだけなのでこれといった深い感慨もなくあっさりと終わりました。引っ越しも寮の部屋移動だけなので、どちらかというと「冷蔵庫を階段で4階まで上げるのは超大変」ということだけ覚えてます。笑

DSC_0435_2

研究とか

昨年は背景設定にだいぶ苦労しましたが、今年はそれも克服し着々と進めることができたように思います。もちろん課題はまだ山積みですが、それでも比較的ゆるやかに進めることができているのでまだ心持ちは穏やかです(来年が怖いですね)。

昨年度のテーマで学会発表や外部の報告会でのプレゼン、研究合宿の運営なども務めさせていただき、大変ではありましたがいろいろと勉強になりました。

インターン&就活

今年一番ウェイトがかかっていたイベントはやっぱり就活だったと思います。もっとも、私自身は本当に腰が重い人間なので、だいたいは外部の人に引っ張られていたような感じでした。何も言われなければ、順当に来年の3月から就活を始めてリクルートスーツの意識高い学生の群れに埋もれていたのかもしれません。
この辺の細かい話は、就活が終わってからゆっくりと書きたいと思いますが、とりあえず今年の動きだけをざっくりと。

6月にとある逆求人系サービスのシークレットイベント経由で企業と面談をさせていただき、その中の1社だったCyberAgentでインターンをさせていただきました(前編後編)。他にも何社か応募はしていたのですが、秋の研究合宿との兼ね合いや選考落ちなどで結局行ったのは1社だけでした。

就活がうまくいっていない図…ではなく、インターンでのスライドで使う写真のオフショット。

就活がうまくいっていない図…ではなく、インターンのスライドで使う写真のオフショット。

その後も秋の京都でのイベントや別の逆求人系企業による名古屋でのイベントにも参加し、そこでお会いした企業を中心に就活を進めています。

余談ですが、このおかげで今年は東京を中心に1)さっき数えたら10回くらい行っていたらしい京都、大阪と週末の度に出かけることが多かったので引きこもり気味の私には荒療治ではありましたが外に出る機会が多い一年でした。

大きな買い物・もらいもの

インターンで優勝した賞品としてMacBookProを頂きました(写真下段)。カスタムモデルなのですが、金額にすると2代目(写真上段右)が2台半くらい買えます。BootCampでWindowsは入っていますが、Macにはまだ慣れません(笑)。

上段左が初代マシン、右が2代目、下段が3代目。

上段左が初代マシン、右が2代目、下段が3代目。私物マシンは赤天板が鉄則(笑)。

あと、引っ越してから乗っていたママチャリ(それでも18段変速)がサビだらけな上に至る所にガタが来まくって私の命が危なくなったので自転車を買い換えました。2年型落ちですが念願のGIANTです。

GIANT SNAP(2014)

GIANT SNAP(2014)

その他

他にもB’zのライブの千秋楽を見にナゴヤドームに行ったり、高専カンファレンスに行って後輩の成長ぶりを眺めてきたりと、いろいろなイベントがありました。バイトは今年は少し毛色が違うことを任されたり、先の研究合宿のHP作成やPaaSを使用した投票システムの構築など、開発面でも新しいチャレンジをして少しずつではありますが、今年も成長できたかなと感じています。

まとめと今後の課題

(↑発表予稿かよ…)

昨年の記事ではいろいろと目標を書いていましたが、だいたいの目標は達成できたのかなと思います。タスクは多かったですが適度にストレスマネジメントができていたからかぶっ倒れずに今年を無事に終えることができました。実現できていないのは恋愛方面ですが…プライオリティ低いし、毎年のことなので、今更どうでもいいです(投げやり)。

来年の目標は…

  • まずは就職先を決める(年始も早々から就活です)
  • 研究を(体壊さない程度に)頑張る
  • 出す出す言ってて出してないアプリをリリースする(年度内に出したいなぁ…)
  • 学生の特権をフル活用する

といったところでしょうか。言われなくても学生生活最後の年ですので、その辺の権利をフル活用していろんなことにチャレンジしていきたいなと思います。

謝辞

(↑研究論文かよ…)

今年も多くの皆様にお世話になりました。両親・親戚を始めとして親しい友人・知人、研究室の先輩後輩には本当に感謝しています。ありがとうございました。

そして研究合宿関連でお世話になりました先輩や先生方、逆求人イベントやインターン、就活で(結果の如何を問わず)お会いした企業の皆様。諸々ご迷惑やご不快な思いをさせてしまったこともあるかと思いますが、私にとってとてもよい経験をさせていただきましたこと、心から御礼申し上げます。

来年も変わらずお付き合いいただけますと幸いです。どうぞよろしくお願い致します。

References   [ + ]

1. さっき数えたら10回くらい行っていたらしい

100回という節目:高専カンファレンス100in東京に行ってきた

最初の開催から7年、100回目を迎える記念すべき「高専カンファレンス100 in 東京」に参加してきました。

私が最後に高専カンファレンスに参加したのはちょうど038tokyoの時で、あれから約4年が経過しようとしているわけですが、
「4年という月日が経つのは早いなぁ…そういえば『ブログを書くまでが高専カンファレンス』と言われているのにその時の記事を全然書いていなかったなぁ…」
などと独り言ちながら、この記事を書いています。

今回は書き忘れた2012年の新春カンファのことにも触れながら100カンファを振り返ってみたいと思います。

私と高専カンファレンス

私が初めて高専カンファレンスに関わったのは036sendaiの時でした1)参加していた某女史に付けられたネズミ耳をつけているのが私。それにしても今見返してみるとカオスな写真だな…。当時私は高専4年生で、(幾つかの開催をUstream経由で見ていたとはいえ)初参加にして副実行委員長という上から2番目の大役を仰せつかり、カミカミなMCと超過したLTで先輩方にチクリとお小言を頂きながらなんとか運営業務をこなしていたことを今でも憶えています。

2回目はそれからおよそ3ヶ月後の038tokyo(いわゆる「新春カンファ」「大東京」)。ここで高専カンファレンスの大御所である諸先輩方や多くの高専クラスタのフォロワーとリアルに対面したんでしたね。そう、今回の100カンファの立役者、なっちゃん(@marin72_com)を始めとする後輩たちと会ったのもこの時でした。

もう100回目…だと?

それから私は高専を卒業して大学に編入し、そして大学院に…というルートをたどり、高専カンファのことも、MLで時折動きを見るだけですっかり疎遠になっていました。

そして新春カンファから3年半ほど経ったある日、なっちゃんが投稿した100カンファの開催宣言のメールを見てまた参加したくなり、登録が開始されるとほぼ同時に参加登録をしました。
そして「どうせ行くなら何か発表しよう」と思い、諸々の予定を片付けながら資料作成とネタの目処が立ったところで複数トラック発表にも講演者として登録をさせていただいた次第であります。

4年という月日が生んだ「変化」

今回のカンファレンスに参加して最も感じたのは「変化」でした。

1つ目は「世代の変化」。ちょうど現役世代と新春カンファを知っている世代の人数がおよそ半々だったようで、懐かしい顔から新たに知った子まで、幅広い世代の高専クラスタと触れ合う場になっていたと思います。そういえば、100カンファのコアスタッフも新春カンファ当時は高専2年生で、今は首都圏勤務とか大学生ですもんね。

2つ目は「参加者層の変化」。以前はほぼ全員が高専生で「一般の人も来てほしいね」なんてことをよく話題にしていたように記憶していましたが、今回は比較的多くの一般の方(高専卒の方に誘われて来た社会人の方や、会場となった電通大の学生)もいて、幅広い層から参加者が集まっていることに驚きました。

3つ目は「企画の変化」。以前は講演やLTメインの企画が多かったですが、今回は2日間で多くの参加者が集まるということもあり、アイスブレイクのような「参加者同士が交流する企画」や私も発表した複数トラック発表のような「参加者が自由に聴きたい講演を聴きに行く」スタイルの企画があり、コミュ障少々引っ込み思案な学生が多い高専生が多くの参加者と交流できるような形式になっていてとても良いスタイルのカンファレンスだったと思いました。

私は果たして成長していたのだろうか?

過去のカンファでも、私は何かしら発表という形で参加をしていました(036ではLT、038ではふるコン)。そして今回は先述の通り複数トラック発表の1セッションという、今までとは違った比較的長い発表枠でお話をすることにしました。

新春カンファからの4年の間に大学に編入学して、学内のロボット開発プロジェクトに(友人からの誘いで)ジョインし、その時からRoombaをハックして開発するロボットのベースにするということをしていました。その流れが今の研究にも波及していて2)そのプロジェクトは学内のロボットセンター主催で、今のボスはセンターの構成員で私のことも知っていたという流れがある、結果的に大学の編入後は彼女といる時間よりもRoombaといた時間の方が長いということになっていたわけです。彼女居たことないけど。

まぁそんな前置きはさておき、結果的に大学編入から今までやってきたことで一番高専カンファ向きな話題ってことで選んだのがRoomba Hackの話でした。

発表は相変わらず原稿なしぶっつけ本番みたいなスタイルなのでカミカミでネタ要素も少ないので反応が怖かったですが、思いの外好評だったようでとても嬉しかったです。

余談ですが、実は資料中に載せているルンバの画像は私物ではなく研究室の資材でした。そこでボスに許可を取るべくメールをしたところ「むしろ大学と研究室の宣伝もしてきて!」とのお言葉を頂いたので、このスライドには載せていない私の今の研究の話をちらっとしたところ、それに興味を持った学生もいて、研究のモチベーションがちょっと上がりました。

 みんな、夢を(抱いて|実現するために)頑張ってる

100カンファのテーマ名(コンセプト)、そして「夢これ」登壇者の発表者の話を聞いていても思ったことは、「みんな夢を実現させるために頑張ってるんだな」ということでした。

正直な話、今までの自分は夢という言葉が嫌いでした。現実を見ているならば夢という単語を出さずとも「目標」としてそれを示せばいいのに、なぜ根拠もないのに漠然とそれを抱き、あるいはそれを持つことを強制するような空気があるのだろうか、と。

その考え方が変わってきた理由が、夢っていうのは目標の前段階で、本当に願望とかそういう類のものでもいいんだな、と思えるようになったから。夢を持っているからこそ、いつか自分が成長したり、あるいは機が熟した時に目標として落とし込んで実現できるというフローが組めると考えると、夢を持つことってやっぱり大事だなと思えるようになりました(それを持つことや話すことを強いられるのは相変わらず嫌ですが)。

今回のカンファは、夢を実現した人と今必死にそれを実現させようと頑張っている人たちが集い、語らい、そしてまた新たな夢を抱く場になっていたのではないかと思います。

DSC_0315

上の写真にもちらっと載っていますが、私にも実は夢があるんです。今、どうやったらそうなれるのかも、どういう風に載りたいのかも分かりません。でも、WIREDに載る人ってカッコいいと思うし、世界に何らかの形で―エンジニアリングでも、デザインでも、経営でも、サービスでも―名を残して人生を終えたい、そういう思いで私の「夢」を綴りました。いつかこれが「目標」になる日が来るよう、ものづくりに携わっていきたいと思います。

DSC_0314

私の夢も、高専カンファレンスに参加した皆さんの夢も、叶うといいですね。そして叶うように頑張っていきたいなと思った2日間でした。

DSC_0317

さいごに

高専カンファレンスのスタートが2008年でちょうど私が入学したと同時で、その時のスタイルは分かりません。でも、少なくとも同規模開催の新春カンファと比較しても、高専カンファレンスが大きく変化したと感じた2日間でした。

そして、2012年当時は可愛かった後輩たちが100カンファではスタッフとして頼もしく成長している姿を見て、きっと高専カンファレンスはこれからもずっと続いていくんだろうな、続いていってほしいなと思いました。今回のカンファは首都圏開催であることのメリットを最大限に活用できた一つの完成形と言えるのではないかなと思います。

運営スタッフの連携が密でそれぞれの仕事を全うする姿も参加者には伝わってきました。私がカンファレンスではない別のイベント運営に携わっていた時に感じたことですが、メンバー間の連携が取れないとイベント運営が困難になってしまい、参加者に迷惑をかけてしまいかねません。しかし、今回のカンファレンスは隅々まで配慮が行き届いており、不満に感じる点がありませんでした。スタッフの皆さんの仕事ぶりには頭が上がりません。

今回のカンファレンスはさまざまな変化を体感し、私自身にもいい刺激を受けました。なっちゃんを筆頭とする100カンファの実行委員の皆さん、私の講演を聞きに来てくれた皆さん、本当にありがとうございました。お疲れ様でした。

References   [ + ]

1. 参加していた某女史に付けられたネズミ耳をつけているのが私。それにしても今見返してみるとカオスな写真だな…
2. そのプロジェクトは学内のロボットセンター主催で、今のボスはセンターの構成員で私のことも知っていたという流れがある

CyberAgent「TechCAMPオオサカ編」の感想を書いてみるよ。後編

前編ではインターン全体の話を書きましたが、後編では私(たちのチーム)の話を書こうと思います。
例によって、プロジェクトX的な文章でお送りします(笑)。

それでは、どうぞ。

プロローグ

「そういえば、あいつらのチーム名なんだっけ」
「Team GIKADIE」
「プレゼンで大コケしてたよな」
「まさしく『DIE』やな、ハッハッハ」

ここは、インターンの最終発表会。そんな会話が、会場から聞こえた-気がした。最終プレゼンが終わった私は、ようやく我に返ろうとしていたところだった。本番に弱い私が、なぜか全ての死亡フラグをかっさらい、そしてプロダクトと共に死んだ瞬間だった。私は「ごめん」と「すいません」しか言わない、ファービーを社畜にしたようなロボットと化していた。

最終発表の審査結果はこの後発表される。私は、私と相方の6日間をフイにしたものがテンパっていたせいでデモ時に一言添えるのを忘れたせいだったことをずっと悔やみ、そして6日間を振り返りながら、その時を待っていた。

「これは、イケる」

その前週の日曜日。私とその相方はSkype経由でアイデア出しをしていた。

「エンジニアがハマるアプリ」-それが今回のTechCAMPのお題だった。これを見た瞬間から頭の思考リソースの2割はこれに割かれていた。

「エンジニアってさ、どこの会社でもチームで開発してるやん。あと、コーディングでドはまりすると席から動かんやん。で、なんかのタイミングでチームの誰かに変なミッションが降ってきて、例えばリフレッシュスペースからお菓子持ってきてみんなに配るとか、突然馬のマスクかぶって踊ってみたりとかするわけよ。そんで、それを写真に撮ったり、みんなで「いいね!」的なことをしたら、ミッションによっては軽く運動にもなるし、チームのメンバーもなんか楽しくなるし、面白いんじゃないかな」
「んで、ミッションじゃなくても、例えばこれがあたった人が掃除当番とか、弁当の買い出しとかっていうのもできるし、それこそ王様ゲームみたいに変なミッションが降ってきてもいいわけだよね」

そんな感じの話をしたと思う。2人とも苦手なゲームプログラミングをうまく回避しつつ、既存のありがちなコンテンツやゲームとも一線を画し、なおかつ題意にも合致したアプリのコンセプトが生まれた瞬間だった。私たちは密かに「これはイケる」と踏んでいた。

いつの間にか、フロントとバックが逆転する

アプリのコンセプト的に必要な物は、ざっくりとこんな感じだった。

  • ユーザの管理。ユーザは複数のチームに所属できる。
  • ユーザの追加にはIDを手打ちする他、NFC(Androidビーム)を経由して相手のID情報を受け取ることができる。
  • ユーザはそれぞれ「ミッション」を保持している。新規で追加したり、実装はできなかったがパッケージング(用途やシチュエーションで切り替えられる)やシェア(他の人の面白いミッションを取り入れる)ことで面白さや状況に応じた使い方を実現する。
  • あるタイミング(用意していたのはGithubやSlackなど)でチームの誰かにミッションが降ってくる。ミッションはプッシュ通知で当該ユーザのスマホに表示される。
  • ミッションを受け取ったユーザは、それをするまでミッションが通知バーに常駐する(消せない)。それをやり終えると(Done itボタン)を押すと、チームメンバーにそのミッションを本当にやっていたかどうかを確認する通知がプッシュされ、承認されると当該ユーザーにポイントが加算される。
    ちなみにNFCは本来ミッション承認時に使用しようとしていたが、時間の関係で実装できず…

つまりAndroidアプリだけではなくサーバサイドでユーザ管理、プッシュ通知、ミッション生成などの処理を行う必要があった。

最初はサーバサイドは相方がPythonで実装することになっていたが、BaaSである「Parse.com」を使えば手軽ということで、そっちを使うことにした。ParseのサーバサイドはJSで記述することになるので、それなら私もやるよということでいつの間にかサーバサイド(バックエンド)とアプリ(フロント)が逆転というか、「それぞれが必要だと思う機能に対して必要な部分は適宜いじる(or分担する、ナレッジを共有する)」という形になっていった。

Parseの場合、データベースからの取得周りの話がJSとAndroidである程度似通っていることもあって「こうするとできる」ということが共有できたのは良いポイントだった。ただ、ParseのデータベースがODB形式である点をうまく活かせず、RDB形式でデータベースを設計してしまったおかげで少々取り出しが複雑になってしまった。

紆余曲折はあれど、6日間でアプリを作る以上あまり細かいところで引っかかってはいられない。「まず動けばええんや」という正論とも悪魔の囁きともとれる言葉を心に抱きつつ、ひたすらコンセプトをアピールする上で必要なコンポーネントを実装していった。

お互い少々アプリ開発からは遠ざかっていたとはいえ、どちらも高専上がりの技科大生(私は豊橋、相方は長岡)というだけあってか、時々タイポで時間を取られたりメンターに意見を求めることはあったものの、比較的順調なペースで開発は進んでいった(と思う)。

最終発表会で、大コケ

発表会前日の段階で、2,3人程度で想定したユースケースでの動作を確認していた(ただ、プッシュ通知を全体にブロードキャストのような形で送っていたため、フィルタリングの処理で少々ハマっていたが、前日夜にサクッと直した)。

そして発表会。結果から言うと序章の通り大コケした。私がガッチガチに緊張して手が震えるあまりNFCでユーザ追加をするところが実演できず、そしてユーザ登録後にミッションを追加するステップを忘れていたがためにミッション通知が送られないというトラブルに見舞われた(まあ、設計上の問題だったんですが…)。
ただ、最後に乱数で私にミッションが来てそれをDONEすることで全員にプッシュが飛び、一連のフローを見せることができたことは唯一の救いだった。

発表の後に我に返った後、本当に悔しかった。相方に向ける顔が無かったが、(表面的にだとしても)終わったことは仕方ないと言ってくれたこと、そして最後になんとか動きを見せられたことに救われた。

ハンド・ドラムロール

(このセクションは、ぜひB’zの「NO EXCUSE」をかけながら読んでいただきたい)

そして結果発表。3位から発表されていくが、3位、2位どちらにも名前がない。やっぱりプレゼンでコケたからドベだろうな…でも、もしかしたら…そう思っていた。
そして1位の発表。みんなで机を叩くドラムロールがとても長く感じた(実際長かったw)。

そして画面に現れた「GIKADIE」の文字。

私の呼吸が一瞬、止まった。

一応発表で一度はうまく行ったとはいえ、やっぱりコケていたことには変わりなかったけど、それでもアプリのコンセプトと面白さ、ミッションをプッシュする機構や用途の拡張性などが評価され、満場一致だったと(後のフィードバックの時間に)聞いた。

最初に受賞の言葉を相方に譲り、私はパソコンの電源を入れた。私の番が来た時、こう切り出した。

「受賞のあいさつの前に、もう一度デモをやらせてください。2分で終わるので」
(ここで「NO EXCUSE」のサビ後のフレーズ「ちょっと、もう一回やらせてくださいよー!」が来ればナイス)

私が今、この感想を述べても悔しさしか出てこない。それに、あのデモのまま賞をもらうことは、試合に勝って勝負に負けるようなものだと思った。私とチームの意地を、6日間の成果を見せたかった。

各ユーザに1つでよいのでミッションを追加してもらい、通知を実行。図らずも「優勝賞品を(メンターの名前)に譲る」というミッションが出て会場が大爆笑に包まれた。そしてそれを「承認」するフェーズも実行でき、アプリの一連の流れを、楽しみ方を見せることができた。

デモを終えた後、本気で泣きそうになりながら、やっとの思いで「これで成仏できます。ありがとうございました」とあいさつをさせて頂いた。

技術屋としての執念

時間も若干押している中でああいうことをしたのは、少々迷惑だったかなぁと思った。でも、あのまま終わるのは、私も、見ている人も「あれは残念だった」という感想しか抱かない。それなら、私が後で(怒る人はいないけど)怒られようとも、自分たちの成果を見せて楽しんでもらおうと思った。それがサポートして頂いた方々への感謝であり、私たちチームの執念であり、私が一番伝えたいことだった。

相方は「もしあれでまたコケたらどうするのかと思った」と後で言っていたが、私の中では勝算があった。もしそれでもコケたら、私はエンジニア就職をやめてじいちゃんの家の畑でエヴァの加持さんよろしくスイカを育てる人になろうと割と本気で思っていた。結果的には私が伝えたいことを伝えることができ、本当に嬉しかった。

エピローグ

後のフィードバックで、「チームワークがとても良く見えた」という評価を多くの方から頂いた。良かったかどうかは、実を言うと私は開発に没頭していたのであまり考えたことが無かった(笑)。
ただ、技術的な視点や感覚の似通ったペアなのだろうなと思うことは多々あった。一つゴールを見据えて共にそれをブラッシュアップしていく姿勢や、「こうしたら面白いかも」という感覚が自分の裏返しを見ているようで、ある意味新鮮だった。

テクニカルな話をすれば、私はGitやサーバサイドプログラミングに慣れていなかった点もあり、「あれが実装できればなぁ…」と思う点も、確かに多々あった。「こうなったらいいよね」と言っていながら手を付けられなかったアイデアもあった。その点は、自分のスキルがもう少し高ければなぁと思うところである。コミットログに同じコメントを付けてみたり、タイポで3,4時間無駄にしたりと、出来のいい相方じゃなくで申し訳ないなぁとずっと思っていた。

それでも結果として優勝することができたことは素直に嬉しいし、自分たちのアイデアを、スキルを、技科大生の底力を、見せつけることができたと思う。
あの後お互いに謙遜しあっているところまで性格の裏返しのように思えたけど、6日間お疲れ様でした。本当にありがとう。

CyberAgent「TechCAMPオオサカ編」の感想を書いてみるよ。前編

8/6~11の6日間、CyberAgentの短期インターン「TechCAMP(オオサカ編)」に参加してきました。
選ばれし精鋭(?)10人・5チームで、ある「お題」に対してチームなりの課題を定義し、iOSもしくはAndroidアプリを開発するというものです。

実際に開発したものとかそういう話は長くなりそうなので後編に書くとして、前編ではTechCAMPの雰囲気というか、どんな感じのイベントなのかをまとめてみたいと思います。

とにかく、全力投球。

今回の参加メンバーはそれぞれ、経験の多寡はあれどある程度のiOSもしくはAndroidアプリ開発についての事前知識やコーディングスキル、開発手法についての知識を持ち合わせていました。

こうしたバックグラウンドはあれど、6日間でお題に対して課題を自分たちで定義し、それに合うアプリケーションを開発する…ということになるので、今回の参加者は日程的に実質4日間のところ全チームが土日にも会社に来て開発をしていました 1)一応、開放日と時間は指定されていました。土曜は淀川花火大会の影響で早めに退社。
ちなみに言っておくと、参加者全体で申し合わせたわけでも、担当者からそうするよう言われたわけでもなく、チームの相方と「とりあえずやることはあるから行っとくか」「せやな」みたいな感じで行ったらみんな居た、的な感じです 2)まぁ私に関して言えば、普段から土日どっちかは研究室にいたりするので、休みの感覚が希薄というのはありましたが。

結果的には6日間みっちり開発で、全チームが出せる限りの力で全力投球している感じでした。

全力投球をサポートする環境が、ある。

各自のPCは基本持ち込み(会社からレンタルも可)なのですが、開発が長時間に及ぶため、必然的に自分が持ち込んだデバイスだけでは操作が大変になったり、画面切り替えが面倒になったりしてきます。

と思っているとマウスがどこからともなく机に置かれていたり、社内で余っていた(らしい)ディスプレイがチームに1台配られたりしていました。その他チーム開発で必要なGithubのプライベートリポジトリ(アプリ用とサーバサイド用の2個)が支給されました。
そして何より、強力なメンター陣が開発のサポートをしてくれるため、とにかく困ったらメンターを捕まえて質問するかSlackに投げるとサポートが得られるという環境が整っていました。

あとは時々お菓子や飲み物、昼食など(本来は基本的に自腹)が差し入れられるなど、開発面だけではなくメンタル(?)面のサポートも充実していました。

みんな仲良し、そしてアツい同志。

今回だけかは分かりませんが、10人という少人数だったこともあって自分のチーム(ペア)だけではなく全員の仲がよかったと思います。
だいたい晩ご飯はみんなでホテルの外に行ったり、ちょっと開発の息抜きに他のチームの開発を覗きに行ったり、誰かがボケると必ず誰かが反応したり、なぜかBGMに中島みゆきが流れてきたり(相方の仕業)、「ここでL○NE Music流したら怒られますよね?」とか言いつつAWAのプレイリストをBGMに開発したり(これは私)と、エンジニアとして志の似通ったメンバーが多かったおかげでとても雰囲気がよかったです。

とはいえ寝ても覚めても野郎しかいなかったので、そこはみんなで残念がってましたが。笑
(たまにメンター?として、女性の来年入社の方や社員さんが遊びにいらしてました)

暑い夏に、アツいメンバーと、アツく開発。

(↑クソダサいキャッチコピー作ってごめんなさいw)

少人数で短期間ということもあって、開発スキルは結果的に高度さを求められるような感じになったと思います。実際、最終発表前日は全チームが追い込みに入っており、その前の日よりも室内が静まり返っていました。
あまりにもみんなが集中していて若干ピリピリしていたので、ちょいちょい各チームの様子を見てじゃm…もとい、iPhoneで広報用に写真を撮っていた人事の方も撮る回数減らしてました。笑

最終発表ではそれぞれのチームが全力を尽くしたアプリを発表し合い、最後まで全力を尽くした6日間になりました。終了後の打ち上げでは何人か疲れて寝ていましたが(笑)、それも各人がこのインターンに全力を尽くした証だと思います。

大阪は夏真っ盛りで暑かったですが、我々もアツく開発に没頭することができた6日間でした。

References   [ + ]

1. 一応、開放日と時間は指定されていました。土曜は淀川花火大会の影響で早めに退社。
2. まぁ私に関して言えば、普段から土日どっちかは研究室にいたりするので、休みの感覚が希薄というのはありましたが。

C#でiTunes COM SDKを叩いて曲情報を表示したりアートワークを埋め込んだりしてみる

s1

普段の音楽プレーヤーはiTunesだけどスマホはXperiaとかを使っていて、音楽データを他のソフトにエクスポートするような人は気付くと思うんですが、iTunesで自動的に取得されるアートワークって曲自体には埋め込まれていないんですよね。
で、エクスポートしたり他のソフトで再生しようとしたときにアートワークが表示されなくて、せっかくiTunes上では格好良くアートワークが並んだ状態なのにどこか残念さを感じたりするわけです。

まぁもともとiTunesから拾えるアートワークなんてたかが知れてる(J-POPは少々弱い)ので、Windows使いならCDをリッピングする度にBroadwayとかを使ってネット上のファイルからアートワークを追加してしまえば、iTunesでも曲自体にアートワークを埋め込むことができるんですが、とはいえもともと取ってこれる画像だってそこそこ綺麗だし、ひょっとするとネット検索で出てくるアートワークよりも高画質なことだってあるわけです。

というわけで、Windows版iTunesは外部アプリからプレーヤを制御したり楽曲情報を取得することができるiTunes COM SDKが存在するので、これを使ってiTunesを制御するついでにアートワークの埋め込みについてもチャレンジしてみました。

プロジェクト設定

iTunes COM SDK自体はCOMなので、VBScript経由で叩くことも、今回のようにC++やC#から叩くこともできます。昔の記事を見るとAppleからSDKを落としてきて云々と書かれている記事が多いですが、こういうことをする人のマシンには既にiTunesが入っているでしょうから、

  1. VisualStudioからソリューションエクスプローラーの「参照設定」を右クリック
  2. 参照の追加を選択
  3. 「COM」タブをクリックすると現れるコンポーネント名一覧から「iTunes 1.13 Type Library」を選択
    1
  4. 使用するソースコードで「using iTunesLib;」を宣言

するだけでSDKが使えます。超お手軽。

サンプルアプリ

今回作成したWindows Formアプリのソースコードを抜粋して紹介します。

画面描画系の処理がやっつけになっているのはサクッと試してみたかったせいだという点でご容赦頂きたいところですが、本質的な処理はiTunes COM SDKが比較的よくできているおかげで実装はかなりシンプルです。

気をつけるべき点としては、

  • 終了時にdisconnectCOMメソッドで行っているようなハンドラの削除とCOMオブジェクトの解放を行わないと、iTunes終了時に以下のようなメッセージが出ます。
    2
  • アートワークは一度ファイルに落とす必要があります。バイナリとして取得することはSDKを使用する上では無理そうです(Broadwayも一時ファイルにアートワークを保存しているっぽい)

といったところでしょうか。

アートワークの埋め込み

iTunes側では、Broadwayのように外部からファイルで設定されたアートワークについてはきちんと楽曲自体に埋め込まれます。
また、SDKには「アートワークがiTunesからダウンロードされたものであるかどうか」を示すフラグが用意されていますので、これをもとにアートワークが埋め込まれているかいないかを判定します。

先述の通り、アートワークはバイナリとして読み取るのではなくSDK側でファイルに書き込んでくれるので、これを使用します。パスは適当に変更してもよいのですが、ここでは実行ディレクトリ直下に保存し、埋め込みを行う場合はこの画像パスを渡すことで元のiTunesで取得されたアートワークを楽曲データに埋め込んでいます。

ちなみに、最近始まったiTunes MUSICの楽曲データについては、トラック名などの情報は取得でき、もちろんプレーヤー自体の制御もできるのですが、アートワークについては存在しない扱いになっているため取得できませんでした。まぁ、当たり前っちゃ当たり前ですね。

さいごに

今時こうやってiTunes SDKを触る人も珍しいと思いますが、これとmbedやArduinoを使用して自作のコントローラを作成したり、NowPlayingをつぶやくプラグインなどが作成できると思いますので、そういった場合の参考になれば幸いです。

References   [ + ]

1. MethodInvoker)delegate { this.AlbumNameLabel.Text = AlbumName; this.TrackNumberLabel.Text = TrackInfo; this.ArtistLabel.Text = Artist; this.TitleLabel.Text = TrackName; }); } //再生イベント時に呼び出されるメソッド void iTunes_OnPlayerPlayEvent(object iTrack) { //再生中のトラック情報を取得 IITTrack track = (IITTrack)iTrack; //ラベル用テキストを設定 AlbumName = track.Album; TrackInfo = track.TrackNumber + " / " + track.TrackCount; Artist = track.Artist; TrackName = track.Name; //アートワークコレクションを取得 IITArtworkCollection artwork = track.Artwork; if (artwork != null && artwork.Count != 0) { int artworkCount = 0; foreach (IITArtwork a in artwork) { //ぶっちゃけアートワークは1個でいいので先頭だけを使用 artworkCount++; if (artworkCount > 1) break; //フォーマットに応じて保存先パスの拡張子を変更 if(a.Format == ITArtworkFormat.ITArtworkFormatJPEG) ArtworkPath = Environment.CurrentDirectory + "\\artwork.jpg"; else if(a.Format == ITArtworkFormat.ITArtworkFormatBMP) ArtworkPath = Environment.CurrentDirectory + "\\artwork.bmp"; else if (a.Format == ITArtworkFormat.ITArtworkFormatPNG) ArtworkPath = Environment.CurrentDirectory + "\\artwork.png"; else //フォーマット不明であればこの後の処理は行わない(稀) { ArtworkPath = null; break; } //アートワークを取得して保存 a.SaveArtworkToFile(ArtworkPath); //保存したアートワークを取得(ファイルに落とさないと取れないから) Bitmap AlbumArtContent = new Bitmap(ArtworkPath); //スケールを計算 float scale_w = ((float)AlbumArtContent.Size.Width / ArtworkImageBox.Width), scale_h = ((float)AlbumArtContent.Size.Height / ArtworkImageBox.Height); float scale = (scale_w > scale_h) ? (1 / scale_w) : (1 / scale_h); //描画用に大きい方のスケールに合わせてリサイズ Bitmap canvas = new Bitmap(ArtworkImageBox.Width, ArtworkImageBox.Height); Graphics g = Graphics.FromImage(canvas); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; g.DrawImage(AlbumArtContent, 0, 0, (AlbumArtContent.Size.Width * scale), (AlbumArtContent.Size.Height * scale

jQueryによる共通部品の読み込みとNavbarのアクティブ項目の変更

前の記事に引き続き、ビジュアル情報処理研究合宿のHPで使用したネタを書いていきたいと思います(たぶん、コレで最後)。

jQueryによる共通部品の読み込み

ヘッダーやフッター、メニューバーなどの共通部品を1つのページごとに実装することは保守管理の面であまりよい状態ではありません。

先輩によると昨年度のページではSSIを用いて共通部品を読み込んでいたそうですが、今年度はBootstrapに関連して全編JavaScriptもしくはjQueryでこれらを実現しようと思いました。とは言っても、やり方はめちゃくちゃ簡単です。

まず、共通部品を格納するブロック要素にidを割り当てます。

次に、この部分に挿入したいHTMLを別ファイルで作成しておきます。このファイルをjQuery側で開き、HTML上の指定idに対して読み込みます。

この1行だけで、当該id部分に別ファイルのHTMLが読み込まれるため、ヘッダーやフッターを1ファイルにしておけば、あとは適当な場所で読み込むだけで全て共通の内容でレンダリングされることとなります。簡単ですね!

ただし、ローカルファイルからの読み込みはChromeではクロスドメイン制限などによって実行されないため、起動オプション指定によってこれを解除するか、デバッグには他のブラウザを使用する必要があることに注意が必要です。

Navbarのアクティブ項目をページごとに切り替えたい

一方で、メニューは共通だけど先の記事におけるNavbarのように「アクティブにしたい項目がページごとに異なる」場合、共通部品の読み込みだけでは対応できません。何らかの形でアクティブにする項目を指定し、HTMLを変更する必要があります。

このため、今回のページ作成ではメニューバーの項目を動的に追加し、HTML側のdata属性で指定された項目をアクティブにしてリンク先を#に変更する処理を行うことで、部品自体を共通化しながらフレキシブルにアクティブ項目の変更を実現しています。

まず、HTMLのNavbar側にdata属性を追加しておきます。ここではdata-activeを指定し、activeで指定されたメニュー項目をアクティブにすることとします。

次に、Navbarのテンプレートファイルを先ほどと同じように読み込みます。この時、読み込み自体は先程と同じですが、読み込み完了後にNavbarの各項目を追加する関数(generateNavbar)を実行するようにハンドラを指定します。

また、この時のmenu.htmlを以下に示します。

ここで、NavbarContentに対して各liコンテンツを追加していきます。追加を行うのが先に指定したgenerateNavbar関数になります。

ここでは、各項目のクラス要素名(Type)、リンク名(Anchor)、リンク先(Href)をデータ構造として定義し、配列化します。配列化したデータをリンクにして追加していきますが、この時にHTML側で指定されたdata-activeの値と配列要素のインデックスが一致する場所のクラス要素をactive指定し、リンク先も#に変更しています。

これによって、配列要素のインデックスは既知である必要はありますがHTML側でdata要素を指定するだけでNavbarを共通化しながらも変更したい部分をすっきりと指定し変更することが可能となります。実際の挙動はこちらからご確認ください。

Bootstrap 3で等幅ナビゲーションバー(Navbar Justified)を実現する

背景

先月からビジュアル情報処理研究合宿のHPを作っていたのですが(完成版ページ)、最初にページデザインをお願いした後輩から上がってきたデザイン案では「ナビゲーションバーを幅いっぱいにして各項目を等幅で実装し、スマホ版では縦並びにする」ような形になっていました。

私のようなホリデーWebエンジニア(口悪く言えば「にわか」)は「とりあえずBootstrapあたりのコンポーネントライブラリを使ってサクッと出来るっしょ~www」的な希望的観測で実装していたのですが、いざNavbarを作って確認してみると…あれ?動かないぞ、と。

これのキモは、ナビゲーションバーの各li項目をulの幅いっぱいにして各項目の幅が同じになるようにulのクラス要素にnav-justified指定をする点。これを入れることで、デザイン案のようなナビゲーションバーができる、はずだった。

動きを見ると……なんだこのゴミ。等幅どころか画像載せる気力なくすぐらい崩れてやがる。

とりあえず、Bootstrapのガイドラインを見てみる。

Justified navbar nav links are currently not supported.

ファーwwwwwwwww

さーて、どうしてくれようか。

よく読むと、同じナビゲーションバーでもtabsとかpillsにすればjustifiedにはできるらしいことが分かり、とりあえず指定してみたけど、今度は配色をカスタムしたことが災いしてリンクテキストが読めない。これは弱った。どうしよう。

と思いながらとりあえずググッてみると、やっぱりハマってる人は多かったらしく、StackOverflowがすぐに引っかかった。ひとまず、floatを解除してやればいいみたいなので、自己定義CSSファイルに以下のような指定を追加。

とりあえずこれで等幅メニューにはなった。

無題

諸々の修正&dividerもどきの付加

でもこの状態でNavbar-Brandは邪魔だし、デザインで指定されている区切り(divider)が無い。それに、画面サイズが中途半端な時に2行に渡るようなli要素があるとactive指定したリンクが浮いたり、スマホ版メニューでも何故か左に寄っていたり。

無題

無題

2行になる時の対策がどうあがいても上手く行かなかったので、とりあえず「992px(col-md)」をメニュー切り替えのタイミングにすることと、モバイル版とデスクトップ版でボーダー指定を切り替えることで対応することに。さらに追記したCSSが以下の様な感じ。

最後のIE対策は、Chromeなどでは問題なかったんだけど1200pxら辺でテキストが2行になる問題がまた発生したので、とりあえずこの時はナビゲーションバーを折りたたまずにリンクテキストのフォントサイズを少し下げることで対応する形にしました。

その他は、デスクトップ版とモバイル版でNavbar-Brandの表示を切り替えたり、ボーダーの向きを変更するような指定を追加しています。モバイル版ではliをテーブル扱いにすることで、左に寄ったり項目が浮くような問題をクリアしています(ぶっちゃけ、汚いやり方な気がしますが)。

最後にvariables.lessでナビゲーションバーが折りたたまれるタイミングをscreen-md-minに変更し、完了です。

実際にご覧ください(トリビアの紹介風に)

そして出来たNavbarがこちら。
フルサイズ版
無題ちょっと小さい版無題モバイル版
無題

とりあえず、Bootstrap3でもJustifiedで、かつちゃんとボーダーが付いてレスポンシブなナビゲーションバーが作れましたとさ。めでたしめでたし。

2014年のまとめ。

去年は「コスパが悪い」という理由で実家に帰らないという大変に親不孝なことをしていたわけですが、今年は前のPostにもある通りいろいろと精神的に来るものがあったりしたわけで、26日に卒論を提出した後速攻で新幹線に飛び乗って泣きつくように実家に転がり込みました。

もっとも、転がり込んでも年明けの予稿の〆切は変わらないので半ベソをかいて親に不安やら何やらをこぼしながら書き、今日も修正版をボスに送ったりしてました。

とりあえず送るものは送って区切りをつけたので、毎年恒例となった1年の振り返りをしたいと思います。去年の記事には「振り返りたくもない1年だった」と書いていましたが、今年をそういうノリで表すと「振り返る以前に記憶がない1年」だったと思います。疲れた。あと自分って弱いし未熟だな、とつくづく思った。

まぁそんな前置きはさておき、今年のまとめ、スタート!

  • 1月、2月
    課題に追われるも、まだ余裕があった時期。
    バイトの仕事で無茶な仕事が降ってきて潰れかける。
  • 3月
    期末試験。タナボタ的に「あの」情報理論の単位が取れた(ただしC評価)。
    正月に帰省しなかった分、春休みに帰省。病院の定期検査で十二指腸潰瘍が再発したことが判明(現在は治癒)。まぁ薬飲めば治ることは分かっているのでまじめに薬を飲むようになった。
  • 4月
    研究室の配属面接を経て現在の研究室へ。面接で同時に大学院への推薦も決定される「ヤバい20分間」だった。
  • 5月、6月
    記憶が無い(特にイベントが無かった…?)
  • 7月
    研究テーマ本決まり。
    8年ぶりに映画を見る。「渇き。」は最高にぶっ飛んでいた。橋本愛かわいいよ橋本愛。
    またバイト先の案件絡みでちょっとモメる。
  • 8月
    前期末試験。科目数は少ないので特に問題なし。
    帰省。今回の検査で十二指腸潰瘍は問題なし。メガネを新調。
  • 9月
    だいたいこの記事の通り。
  • 10月、11月
    研究(というより開発)を本格的に進め始める。この2,3ヶ月で約2k行のC#.NETコードを書いた。
    ぶっ放しすぎて今になってガタが来る。
  • 12月
    卒研発表&卒論提出。内容はあまり良くなかったと思うが、ひとまず問題は無かった模様。
    自分の未熟さや甘さを知った1ヶ月だった。

とまぁ、こんな感じだった。今も春の学会の予稿と闘ってたりして、そういう絡みではとても大変な一年だった。

これを踏まえて来年の目標を…と言われると難しいのだけれど、ひとまず保守的な目標は

  • 無茶をしない
  • 未熟な自分を受け入れる、適度に自分を褒める
  • 弱音を(人を不快にしない程度に)吐く
  • 心と体の体調管理
  • 余裕を持ったスケジューリング

といったところでしょうか。前衛的(?)な目標としては

  • 研究や発表を頑張る。気負い過ぎない程度に。
  • 後輩の面倒を見る。
  • そろそろ自分の人生を考える。
  • お金を多く得られるようにする。
  • そろそろ、恋、したいっすね。

って感じでいきたいです。「楽しい1年」を望んでも仕方がないことが分かったので、より具体的かつ自然体で生活できる2015年でありたいと思います。

さいごに

自分が大変だ大変だと言って生きてきて、人に感謝することを忘れていました。つらいときに不安をこぼさせてくれた実家の両親、研究において助言やサポートを頂いた研究室の先生や先輩、そして何かと私の愚痴に付きあわせてしまった友人たちにお詫びと感謝を述べて、今年の締めくくりとしたいと思います。

それでは、私も、みなさんも、よい2015年になりますように。良いお年を。