topic path

バナナはおやつに入りますか? HTMLはプログラミングにはいりますか??

関西フロントエンドUG 年忘れLT大会にいってきました。

2016/12/3(sat)ですがKFUGさんのLT大会、要はタダでピザ食べる会があったので行ってきました。

kfug.connpass.com

私の人生の中で、人前でピザたべr...ちがった人前でLTするという体験を初めてしたのが、去年のこの会です。事前に「コワくないですか?」を入念に確認してからの参加です。

結果、多分コワくない。しかも、なに喋ってもコワくない。というのを理解したので、前々から温めていたけどどこにも出しようがないネタを、満を持して持って行きました。

 

「パンくずナビ」の名称について語る。

speakerdeck.com

ココに載っていることしか喋っていませんが、気づいたこと+α。

イマドキのWeb屋さんたちって、意外と「ぱんくず」の由来しらない??

ちょっとびっくり。

「コレのこと、なんて呼んでます?」にはみなさん「ぱんくずー!」って元気に答えてくださったのですが、「パンくずの由来って知ってます?」に答えてくださったの、仲良くしてくださってるデザイナーさん1人の声しか返ってこなかったんです。

聞こえなかっただけで他にも答えてくださった方いはると思うのですが、「ぱんくず」との差があまりに大きくてとてもびっくりしました。

正解:「ヘンゼルとグレーテル

コレがないと先に進めないので...(苦笑)正直、焦りましたw

発表することの楽しさを、改めて知る。

DEMOは完全にオチです。

LTの最初に「何一つ役に立たない話します」「JSのテクニカルな話は一切しません」と宣言してましたが、DEMOまでにはそれを一旦忘れてもらえるような流れにしていました。真面目そうに見える話は全部オチで潰れますからねw

DEMO前までに「ふんふん。そうだよね。」って感じの反応をくださってた方が結構いはって、「そ...そうか。これも気づきなんだ...」ってこちらの方が改めて気づかされました。普段、自分が普通に思っていることっていうの、他の人には同じとは限りませんからね。

そしてDEMO。会場が一斉に「ふぁっ?!?!」て空気になるのがホント嬉しかった!!!

「へ?なにが起きた今?!」って表情が変わり、それが温かい笑いに変わっていくの、すごく幸せでした。

一方の私ですが、DEMO開始からあの子が来るまでの数秒間、技術解説をするフリしながらめっちゃビクビクしてました。DEMO動かなかったらどうしよう。スベったらどうしよう。すでにココまででネタをお察しの方いはるかも。...ドキドキドキドキ。

なので、緊張しすぎてほんの数名の表情しか見えてませんでした。なので、その数名の方の、スクリーンに食い入るような表情を見て、ものすごくホッとしたのです。

会場が温かい笑いに包まれるのを感じて、私は緊張をといたのでした。ほんとみなさまありがとうございました。

ちょっとだけ、技術解説。

DEMO中にちょっとだけお話ししましたが、正直緊張しすぎて支離滅裂でしたw まともに喋れてませんw

でも、見てくださった皆さんもDEMOに気を取られて聞いてなかったと思われるので許してください。

一応、DEMOはこちら。jQueryのpluginにしかけてる途中です。

https://matsudaemi.github.io/real-bread-crumb/demo/

データ保持の仕組み

データについては、「今開いているページ」のlocation.pathとtitle要素文字列(区切り文字の前まで)を、sessionStorageに保存します。

なので、このJSを読み込んでいるページ全てでこのデータを参照できます。

ちなみに、食べられちゃったぱんくずは、食べられちゃったままですw

飛んでくるあの子

あの子はspanひとつで作ってます。:beforeでくちばし、:afterではね。本体とはねは、border-radiusで葉っぱを作るような要領で、ほどほどに形を作っています。複雑な形はできないんですよね(苦笑)。

動きは@animation-frameで、はばたきともぞもぞ感を出しています。

飛んでくる場所は、window幅のどこかからランダムに。

ぱんくず、ひとつひとつ

1文字ずつ、spanで区切ってclass名つけてます。そのspanをランダムに狙い撃ちして飛んできます。食べられちゃったら、class削除してopacityを0に。要素を削除しないのは、文字詰めが入ると、無駄な動きが出てしまうから。このとき、sessionStorageからは食べられちゃったぱんくずは削除しておきます。

おわってから

懇親会のときに、改めて仕組みについて聞かれたりとか「コード見てみたんですけど」ってお話ししていただいたりとか、関心もっていただいたのが嬉しかったです。ていうか、あの短時間でgithubまでたどり着いてくださるとかほんとすごい。学生さんすごい。

もちろん、他のプレゼンもきいてきたよ

関西コワいっていう自己ブランディングのLTに関しては続きが気になりますw

さくらサーバさんの新卒さんのお話では、さくらサーバさんも色々やってるんだなー&IoT関連、やっぱ最近手出してるんだ。とか。

フロントからデザインに職種替えされたお話では「会話」と「対話」の違い。

流行りに振り回されてデザイン変えたりせずに、「自分へ」のお仕事をいただくお話とか。

スケートリンクに関わるデザインについての考察とか。

多様性についてのお話からムリクリwebにつなげる方とか。

女性の胃袋つかもうと思ったら3連皿買おうとか(ウチにはすでにある)。

ハードワークでもちゃんと栄養とろうねとか。

いろんな方のいろんな転職のお話とか。

ネットワークビジネスに気をつけろとか。

ほんと、みなさまいろんなネタ持ってはるなぁぁ...。とても面白かったです。

お料理、おいしかった!

隔週で料理屋さんやってるらしい参加者さんのご提供のお料理。生春巻きとかごまポテサラとかエビのリエットとか。

宅配のピザとか食べる気しなかったw

ワインも美味しいの持って来ていただいてて、気がついたらスペインのマラガのワインとかいただいちゃってました。けど、ちゃんとボトル見ずにいただいていたので、どれがマラガだったのかさっぱり☆

でも、どれも美味しかったです!

発表って、緊張するしめんどいけど、楽しい。

気軽に「やってみてー」とは言いづらいけど、これはこれで、機会があったらやってみるのはよいことだなぁと思いました。

練れば練るほど、自分に返ってくる気がします。去年はさらっとやっただけなのですが、それはそれでラクだったしほどほどに良かったけど、今年はDEMO作ってネタ仕込んで...ってちょっと頑張ってみたら、そっちの方が、自分にとってのやりがいだとか他の方の反応の嬉しさとか、そういうのが断然よかったなぁと思っています。

次も機会があったら...とか思いつつも、もう面白ネタないんだよなぁ...。残念。

またいつか、ネタできたら考えてみます。

ではでは。

カスタマージャーニーマップ、つくってみる

今回作ろうと思ったサービスについての詳細はいまのところ置いておいて、制作にあたってのやったことなり感想なり疑問なりHow toだったり、自分なりの記録です。

サービスの目的を考える。

まず手始めに、サービスの目的となる

  • 解決したい課題
  • 課題におけるの具体的な問題
  • 問題点の解決策

をライトダウン。頭の中だけで考えてたのを、現実世界に引っ張り出す最初の作業。これだけで結構、頭が整理される。

めんどくさいなー。とは思うんだけど、やっぱり大事。迷った時にちゃんと目的に戻ってこれるように、ちゃんと書き残すの大事。

いつもフロントエンドで作業している時には、あんまりココ大切にする機会がないというか、変に要求ばっか増えてってこの部分がねじ曲がっちゃってたりしても、フロントの立場では元に戻せないことが多い。しかたないんだけどね。

ペルソナつくってみる

このあたり、結構勉強はしてるんだけどいつもフロントさんだから関わることもそんなになくて、実務ではやってこなかったとこ。

サービスの目的に合わせて、ターゲットになるユーザーを想定。

めっちゃガチで画像作って...までは、しない(苦笑)。

必要なのは、想定されるユーザーにちゃんとした体験をしてもらうために、そのユーザーの視点を具体的にイメージするための仮想の存在だから。その体験周辺の条件がイメージできる、っていうのが必要十分じゃないかな...。

ガチなペルソナ作っても結局は自分の(都合の良い)想定でしかないから、実際のユーザーとは違う。そこは心しておかないと。

ペルソナ作る時に困るのが、「名前」だったりの個人情報つくるの。なんだか変にテレちゃうのはなんでなんだろう...? すごいムズムズするw。

今回は、サービス使用するのが2方向からになるので、その双方から使用条件の違う2名ずつ、計4人作成。

「このサービスを利用するの前提」でペルソナ作ってるからなんか作為的というか...そこらへんはどうなんだろう??

でも、「あー、こういう方向から興味持ってくれる人もいるかもねー。」みたいな思考回路をムリクリにでも開拓してくれる。具体化って、こういう「今まで議論に上がらなかったこと」もまな板に載せるのにとても大事。

カスタマージャーニーマップをつくってみる

ペルソナさんたちが、サービスを使って目的を果たすまでの体験をたどるのがカスタマージャーニーマップ。

一人ひとりが、どんなステップでサービスを使っていって最終的に目的を果たすまでに、どんな行動を取って、その時にどんな気持ちかな?っていうのをシミュレート。気持ちがマイナスになっているところが課題であって、それを解決するソリューションを作りましょう的な。

でも今回は、基本的に作るものを決めている。

サービスがあるとき/ないときの2パターンを作ろうかとも思ったけど...サービスの目的と大体の作るものが決まってるから、とりあえずサービスがある前提でのジャーニーマップを作成。

これまた「サービスを使ってくれるの前提」になってしまって、作為的になっちゃうのが悶々。

ペルソナを固定してるとシミュレーションがしやすいし、「このマイナスポイントは、こうしたらもっとよくならない?」「あ、この人にはこの機能も必要だね」っていうのが明確になってくる。全部を実現できるかなぁ...ってなるけど。優先順位決めてくのは、またやるから。とりあえず思いつくことは全てインサイトとしてリストアップしていく。

 

今日は、とりあえずココまで。

ちょっと自分の考えてたサービスをたちあげてみよーかなと少々。

はい。表題まんまです。

会社辞めてから数回スタートアップに誘われたんですけど、あんま幸せな仕事生活がイメージできないというか...実際に途中まで関わった案件で

「...なんで、人様の考えたサービスを、イチから開発まで私が懇切丁寧に無償でやらなあかんねん...??」
ってなって手放したというのがありました。
やっぱ、コンセプトやら体制やらにちゃんと納得できない状態では一緒に起業はできないですはい。

「人様の考えたサービス」というのがポイントでして、「自分の考えてるサービス」っていうのが少々ありました。できたらいいなー的なライトなアイデア

せっかくなら「人様の考えたサービス」ではなくて「自分の考えてるサービス」を作る方が、自分的に納得いくよね?って。

ということで、サービスをイチから作ってみる、というのの過程をココに記録していこうかなーと思ったところです。

人様の目にあまり触れてないブログなので、こっそり自分メモにするのに最適かなというのと、人目に触れてないとはいえ公に出すことで自分に適度なプレッシャー与えとく、みたいな意味合いで。書いたんだから、ちゃんとやるんだよ。っていう。

サービスの詳細は、ここでは明記しません。

制作の過程で思ったことや技術的なトピック等、ざっくり上げていきます。なので、あんま参考にならんとは思いますけど。

ということで。ではでは。

関西フロントエンドUGで人前初LTしてみたん。

お題の通りですが、12/13(日)だったかな?関西フロントエンドUGのお勉強会に参加してきました。

基本的にこのお勉強会はすぐに参加者枠が埋まってしまうので、なかなか参加できなかったんですよね。

たまたまそのちょっと前にAngular.jsのお勉強会が京都であって、何の気なしに参加したところ、関西フロントエンドUGのエラいかたが参加されてまして。おそるおそる「関西フロントエンドUGって、コワくないですか??」って聞いたら、コワくないよって。んじゃ参加。ついでだからLTしちまおう。ってノリ。

なんとなく、「今のフロントさんって本音レベルではどういう開発してるの??」って気になっていたので、自分から「開発環境晒してみる。」っていうので5分。自分なりの5分w(タイムカウント全くなしw)。

今の会社での開発では、GulpとGruntと半々くらいかなー。Gulpが増えてきた感じかなー。やってることとしては全然ふつーに、scssのコンパイルとjsの依存解決、画像圧縮くらいしかしてない。Gulpってすごい早いんだけど、compass使うとメリット薄れるんだよね...とかの話したかったけど、緊張してて忘れてたw

開発する対象によって環境の調整は必要だけど、必要なものって決まってきてるなら使い回せるの用意したほうがいい。

色々便利そうなのに手を出すのはいいけど、便利になったらしあわせだけど、環境壊れちゃったりとか技術に振り回されるとかだと不幸だよね。

っていうお話をしてきました。自分なりの5分で。

ちょっとさらっと紹介だけして突っ込んだ内容話してなくて、っていうよりもしや用語説明とか必要だったかな...?とか、なんか色々ぐるぐるしてるけど。

5分にまとめるの難しいねやっぱ。というのと、ターゲット層決めきれてなかった感じ。もちょっとなんとかできたのではなかろーかと。

こういう反省も、やってみて初めてわかることだったりするし、参加して、しゃべってみてよかったなー。と。

この関西フロントエンドUGって、「コワくないですか?」って聞いてから参加したけど、実際、コワくないですw

変な内輪ノリが強い勉強会ってちょっと最近遠ざかってるんだけど、ガチンコで堅いとこもニガテで。ココは、内輪ノリ全くなしってわけじゃなくて仲良しムードはあるんだけど、人の流通がよさそうだなー。と。初参加だったけど、ちゃんと入れました。w

今後も時間あったら参加したいかなー。というわけで。

関西フロントエンドUGのみなさま、今後もよろしうお願いいたしまするー。