ハンバーガーボタンに頼らないモバイル UI 考

ハンバーガーボタン 

ハンバーガーボタンについて気持ちがあります。

いい話：「劣った醜い撲滅すべきものである」

なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？ - GIGAZINE https://t.co/9B6zrj3CHw

— ㅤ (@yamatoiizuka) 2016年6月16日

ちょうど Web サイトを好き勝手作れる機会があったので，ハンバーガーボタンを使わない実験的なモバイル UI を組んでみた。

作ったもの

TA をやった授業の引き継ぎ資料的なものを作った。一応内部資料的な扱いになりそうなので URL は載せられません，あと一部名前を隠したり表記を変えたりしています。

まず PC 向けはこんな感じ。Arduino や電子工作がらみの資料なのでモバイルファースト的な発想はなく，ナビゲーションは2階層です。まぁありがちな感じ。

これをベースにモバイル用に落とし込んだのがこちら。さっきと同じ操作をするとこのようになる。ここでハンバーガーに逃げなかったぞというのが主題です。

 

いいところ

ハンバーガーと比較して，

• 現在地が常にわかる
• 大体どんなメニュー画面なのか事前に予想がつく（多分）
• メニュー開いてるときもメインコンテンツがあまり隠れない

あたりですかね。

ダメなところ

• 階層性の明示がイマイチ
• 実装をモバイルと PC で分ける必要があって面倒

「階層性の明示」はアニメーションで多少解決できるかなぁと思った。こんな感じとか。

ただこれやろうとすると書き直す部分が多くなるので今回はやめた（上の動画は AE でそれっぽくしただけです）。まぁ色々と方法はある気がする。

まとめ

自分としては操作性も含めてあんまり悪くない気がした。こういうナビゲーションはあまり見ないし見栄えがどうなのかとかはあまり判断ができない。先行事例があると泣く（少なくとも近いのはあると思う）けど参考にしたいので何かあったら教えてほしい。全体的にフィードバックが欲しい。

あと今回はナビゲーションのタッチ操作まわりで Swiper というライブラリを使ったのだけどめちゃくちゃ高機能な良いライブラリだった。

Swiper - Most Modern Mobile Touch Slider

コリス系のメディアでもあんまり見かけない（か紹介が異様にさっぱりとしている）けどあまりにも機能が多いので公式のリファレンス見た方が早いよねということなんだと思う。

4月だなぁ。

3/23 - 27 那智の滝，伊勢神宮，後楽園 他

写真日記です。伊勢，熊野，香川，岡山，京都あたりをぷらぷらしてきた。

那智の滝はこの位置から見たときが一番震えた。そりゃあ昔の人も感極まって神社建てちゃうだろとおもった。

熊野古道。こいつF値の扱いが全くわかってないなという感じなので適宜本を読みたい。

ウオー

高松の栗林公園の一部

写真はないけど伊勢神宮と後楽園がとてもよかった。 

掘立柱の建築を見るのは多分伊勢神宮が初めてだったのだけど，あんな絶対即座に腐るだろみたいな建築様式なのに全く風化していないという清浄さが，あの空間を神域たらしめてるのかなあと考えたりした。前の遷宮からまだ数年だし綺麗な方なのかな。そういえば授業で遷宮時に引き抜かれた古い方の柱の写真を見せてもらったことがあるのだけど，やっぱり根元はボロボロになっていた。

内宮をまわった後ふらふら駅まで歩いてたら別宮の月讀宮があったので，そこもお参りしてきた。祭神がイザナギイザナミツクヨミとなんか最強な感じだったので剣祓を全クリしそうになった。我慢した。

後楽園はあんだけ広いのに水の流れが停滞しているところがほとんどなくて，すごい設計だなと感心していた。園内の曲水の流れについては記事（後楽園導水）がある。もうちょい詳しいのないかな。下流の方に島と滝のある池があったのだけど，これ島の左右に水を流すための配置だよなあ工夫だなあと勝手に納得していた。下の写真のやつです。写真あるやんけ。でも iPhone で撮ったからノーカンです。それはそれとして Lightroom for iOS マジで便利ですよ。

3/5 偕楽園

写真をどこにアップするか迷いに迷った末ブログに上げていくことにした。下手でもバシバシ撮って上げていくことが大事だろうということで日記も兼ねてやっていきたい。

最近 Lightroom で現像することを覚えつつあるが意外と体力がいる。あと難しい。今回は疲れたので3枚で終了してしまった。

偕楽園はよかった。この日は梅酒まつりというのがやっていて，梅酒を売る人がたくさんいたり150種類以上の梅酒の飲み比べができるイベントがあったりした。飲み比べの方は40分待ちと言われて断念してしまったけれど機会があったらリベンジしたい。

偕楽園っぽさが全然なく，なぜこうなってしまうのか。。

情報学環・学際情報学府の院試受験レポート

情報学環・学際情報学府の修士入学試験を受けました。

受験にあたりこういう情報が欲しかったけどネット上に出回ってなくてやや困ったという経緯があるので、ここでは主に情報学環の学務係から聞き出せなかったことなどを書いておきます。要するに半分は意趣返しです。今回受験したのは先端表現情報学コースだったのでそこについては詳しく。

※怒られが生じた場合この記事が消える可能性があります。受験を考えている方はこの記事をコピペして保存したりしておくとよいかと思います。

目次

・一次試験 / 二次試験の合格者数
・先端表現のアルゴリズムの問題
・二次試験について

一次試験 / 二次試験の合格者数

本年度の修士課程入学試験の一次試験と二次試験の合格者数です。
一次試験の合格者数はなぜか非公開になってしまうのでここで公開されるという結果を招きます。

	出願者数	一次合格者数	二次合格者数
社会情報学コース	58 (6)	23 (2)	20 (2)
文化・人間情報学コース	51 (7)	41 (6)	23 (2)
先端表現情報学コース	34 (0)	27 (0)	23 (0)
総合分析情報学コース	30 (0)	19 (0)	14 (0)

カッコ内は特別選考枠の人数、カッコ外の数字は一般選考枠と特別選考枠の合算になります。

先端表現のアルゴリズムの問題

本年度の先端表現の一次試験における第二問です。
過去のものとだいぶ傾向が違ったのでメモっときました。
(3) と (4) の問題文はうろ覚えなので多少間違ってるかもしれません。

----

(1) 以下の C 言語によるプログラムにおける (a), (b) の出力結果を答えよ．

#include <stdio.h>

int f(int *i, int *j) {
  *i += *j + 4;
  printf("%d,%d\n", *i, *j); // (a)
  return *i + *j;
}

int main() {
  int x = 2;
  x = f(&x, &x);
  printf("%d\n", x); // (b)

  return 0;
}

(2) 自然言語処理における JIT (Just in Time) コンパイレーションとは何かを簡潔に記し，その効用を述べよ．

(3) アルファベット Σ = {a, b} からなる数列で，長さが奇数となるものと一致するような正規表現を示せ．ただし，α* は 0 回以上の繰り返し，(α | β) は α または β であることを示す．

(4) アルファベット Σ = {a, b} からなる数列で，aabbbab のように a が奇数回出現するものと一致する正規表現を示せ．正規表現の記法については前問のものと同一とする．

----

以上です。(1) もサービス問題と見せかけてひっかけなので、全体的にできるやつが解いてくれという問題構成なんだと思います。僕は全体的にできません。

ちなみに第一問の数学は誘導ありの最小二乗法の問題（ベクトルで微分してどうこうするやつ）のみで、第三問の機械系の問題はやや機械力学+ほぼ現代制御でした（他の選択問題見てない…）。

二次試験について

・服装
会場をざっと見た感じスーツ8割、私服2割という感じでした。もちろん私服だからといって落ちるということはありません。

・面接試験の内容
研究計画をわりと作り込んで発表したところその内容についてガッツリ質問されました。具体的な方法の部分よりも基本的なコンセプトについて多く訊かれた憶えがあります（景観シミュレーションというニッチな分野をついたためわかりづらかったというのもあると思いますが）。

ちなみに面接が始まったあたりで出願時に提出した研究計画書を面接官の先生方が回し読みしていたので、やはり出願の時点で研究計画をきっちり練っておく必要があります。とはいえ主査（志望している先生）の方以外はそりゃあ時間もないしちゃんと読めてないな（失礼）という印象がややあったので、そういう心構えで質疑応答の想定をしておくと良いのかなと思います。もちろん面接官にもよるので一概には言えませんが…。

あと他の大学院も受験しているか、受験しているならそちらも合格した場合どちらに入学したいか、ということは全員訊かれるっぽいです。

＜4/22 追記＞
なんか学環のホームページ見たら僕が受けた年の過去問も公開されるようになっていて引いています。前は直近3年分の試験問題は見れないみたいな仕様だったのに…おのれ何らかの仮想敵…

2016 上半期作ったものまとめ

院試も終わったので4月らへんから作ったものをまとめます。
Processing とか Arduino とか Web サイトとかです。

BB-8 のプロジェクションマッピング

いろいろと経緯があり、グループワークでプロジェクションマッピングをやることになった。

動くものにマッピングしてみたいなーとか考えてたら思いついたのが BB-8 で、タイミング的にもそこそこキャッチーだったし分業もしやすいしで割といい題材だったと思う。

僕は BB-8 の映像と動きをひたすら実装していく担当で、Processing と Arduino をてちてち書いていた。Arduino まともに書くの初めてだったのでとにかくオーバーフローを起こしまくった記憶がある。

ハードこと動く立体スクリーンはこんな感じで、これはモデリングと 3D プリント担当の人たちがマジで頑張ってくれた。

マッピングのようす。動きと音声の出力のタイミングはランダムに生成されるようになっている。首が微妙に前後するの実はサーボモータのトルク不足が原因なんだけど、むしろそれがかわいいという話になりよかった。

まとめ：分業がうまくいくと楽しい

ポートフォリオサイト

http://yamatoiizuka.com/portfolio/

やや必要になったので作った。本当に必要になるのはもうちょい先なので、もうちょいいじる予定。

コンセプトは特にないけれど制作にあたっての縛りみたいのはあって、Ajax を使ってみたいというのと、スクリプトの部分は jQuery プラグインは使わずに自力で実装するぞというのだけはやった。アニメーションの実装してたらコールバック地獄でエラい目にあったんだけど現場のひとどうしてるんですか。

Group Works の方、モラルがないので特に許可を取らずにじゃんじゃか掲載していますが、苦情とかクレジットに名前が無いんだけどとかあったら言ってください。一応最低限のモラルは発揮しており、このサイトが Google などの検索エンジンに引っかからないようには処理してあります。あと個人的な依頼を受けて作ったものは掲載していないはず。

それとこんな感じで Web サイトも作れるようになってきたので特にフリースタイルフットボール関連のひとは仕事ください。働くぞ。

樹木モデルの生成プログラム

学環入試の二次試験で教授陣を前に研究計画をプレゼンするというのがあったのだけど、基本的に進捗で殴れば勝てるのではというのがあり、文献見つけてきて実装をやった。

ちなみに研究計画の内容はものすごくざっくりと言うと桜の季節の千鳥ヶ淵の景観をシミュレートするというもので、まずはとっつきやすいので樹木モデリングからやってみたという感じ。Processing で書いたよ。

樹木モデルはこんな感じになる。毎回形が変わるので面白い。

遮光物がある場合。ちなみにこれ、ビルによる遮光と反射を計算しているかのように見えるけどそれは大嘘で、枝が伸びる方向に多少指向性を持たせて奥にビルっぽい直方体を置いているだけだったりします。とてもコスパがいい。

学び : 外積はえらい

60 円で冷やしきつねうどんを作る

夏です。暑いですね。
冷やしきつねうどんを食べる必要があります。

作りましょう。

おあげを作る

うどんは冷凍うどんを使うので、あの甘いおあげ（以下おあげ）さえ大量に作れれば勝利することになります。

おあげのレシピですが、クック███（クックドゥーではない）は信用ならないので、今回はここを参考にします。

上記レシピのだしと薄口醤油のパートが厄介なのでここはヒガシマルのうどんスープに担当させます。このうどんスープはその辺のスーパーでも 8 袋入りとかで売ってるやつです。

ヒガシマル醤油　うどんスープ8ｇ（50P

というわけでおあげの材料（7 〜 10 食分）です。

• 油揚げ …………………………… 5 枚
• ヒガシマルのうどんスープ …… 1 袋
• 醤油 ……………………………… 大さじ 1 〜 1.5（甘め 〜 しょっぱめ）
• みりん …………………………… 大さじ 2
• 砂糖 ……………………………… 大さじ 3

うどんスープがある分醤油は減らしています。

油揚げはこんな感じのやつです。

以下レシピです。

1. 油揚げを適度に切ってざるにのせ、お湯をかけて油抜きをします。

ここで油を抜きすぎると食感が悪くなるので、2、3 周ざっとお湯をかけるくらいでいいです。

2. 鍋に水を 250 ml くらい入れ、油揚げ以外の材料を全部入れて強火にかけます。

3. 煮立ったら油揚げを入れ、煮汁が半量くらいになるまで煮ます。

落としぶたなんてものはないので、さいばしで混ぜながら煮汁を油揚げに染み込ませていきます。形は犠牲になりますが味は良くなります。

4. あら熱が取れたらタッパーに移し、冷蔵庫で冷やします。

これにておあげは完成です。作り置きが出来るのでとても便利です。

冷やしきつねうどんを作る

1. 冷凍うどんを電子レンジで解凍し、流水で締めます。氷を入れるとよく冷えて楽です。

2. 器にうどんを入れめんつゆをかけて軽く混ぜ、おあげを 2、3 枚乗せて完成。

めんつゆに加えておあげの煮汁をちょっと入れるのもいいです。特別うまくなるということはないですが、味のテンプレ感は緩和されます。薬味を乗せると見栄えがしそうですが一人暮らしなのでどうでもいいですね。

皿洗いがとにかく楽なのもポイントが高いです。

諸々

• おあげの日持ち

冷蔵保存なら平気で 1 週間は持ちます。いつも 1 週間以内に食べきってしまうのでそれ以上は分かりません。

• 「60 円」について

冷凍うどんが 5 食入りで 200 円、油揚げが 5 枚入りで 100 円なら 1 食あたりそんなもんだろうという数字です。

Processing が Mac で起動しない問題がどうにかなった話

1年くらい Mac で Processing (2.x or 3.x) が起動しなくて（具体的には起動画面が出た後にすぐ落ちる）困ってたんだけど、新しいユーザーアカウントを作ってそこで Processing を開いたらちゃんと動いたので、同じく困っている方は試してみてください。やっと Eclipse から解放されたよ…

フォーラム見ても原因分からずじまいだしなんなんでしょうね。