でザイナーらしからぬ

でなりの雑記。ツイッターで済ませたくないこと書くとこ。

JSを使わずにブラウザ上で動くスライドを作る

この記事は「今年お世話になったCSS Advent Calendar」4日目の記事です。

3日目 : 今年お世話になったCSS Advent Calendar 2016 - Adventar
明日は登録者が今のところいないので登録しましょう。

CSSのGradientまわりは良い機能ですよね。クソみたいな画像リソースが減る最高の機能だと思います。

さて、突然ですがこちらを御覧ください。

f:id:denari01:20161204204637g:plain

こちらは、最近ではよく見るようになった、ブラウザ上で動くスライド資料になります。 しかしこちらのスライドは普通ではありません。

通常のブラウザ上のスライドは、JavaScriptでキー入力をハンドリングして次のページを表示していますよね。 しかしこちらのスライドではページ遷移にJavaScriptを使っていません。 JavaScriptがオフでも使えるブラウザ上スライド資料なのです。

実際の資料が下記リンク。まずはWebページをクリックして、キーボードの[tabキー]を押すと多分動きます。(変な設定とかプラグインが入ったブラウザだとダメかも??僕のChromeでしか動作検証していない)

http://denari.link/css_slide/
(数ヶ月前に行われた社内勉強会向けの資料のため、内容が一部変なものもあります。)

ちなみにこういう風に、スライドの端に(スクロールバーではない)白い枠線がついているスライドの場合は[Enterキー]を打鍵することで別タブにてリンクを開けるハズです。 f:id:denari01:20161204205814p:plain

ソースコードはこちら(docsがbuild後のファイル、srcがbuild前のファイルです。)

github.com

(お気づきの方もいるかもしれませんがソースコードを掲載している部分はJSが当たっています。そこはもう勘弁してください…笑)

動作原理

普通のブラウザ上で、[tab]キーを押すと、こういうふうな挙動でページ内のリンク(aタグ)を辿っていけますよね。

f:id:denari01:20161204204713g:plain

これを応用しています。

上記画面上で青くフォーカスされているaタグには :focus 擬似クラスが適用されます。

それを利用し、aタグの子要素として各スライドの1ページずつを作成して、:focusが付いたaタグの子要素のみを opacity: 0 に。他を opacity: 1 にしています。

スライドの1ページのテンプレはpugのmixinにして作成・管理しやすくしています。

感想

いや、本当にメリットがない。

時間をムダにするだけなので、普通にJS使えるブラウザ使ってください。くれぐれも真似しないように。

僕はもうちょっとだけ時間をムダにして、CSSで動くスライドを作るためのライブラリ的なものを作成しようかと思います。

準高専生、whywaitaとの出合い

f:id:denari01:20161203223000p:plain

この記事は whywaita Advent Calenar、あらため masawada 被害者の会 Advent Calendar の3日目の記事です。そう、masawadaさんは僕とwhywaitaくんの一つ上の年の電通大卒、今をときめくはてなのエンジニアなのですが…彼もまた、masawada Advent Calendarを毎年作っているのです。

それだけでなく彼は…

f:id:denari01:20161202162910p:plain

一人で全完する予定で居るようです

がんばれwhywaita！masawada先輩をみならって全完していこうな!!

昨日の記事をまねたクソジョークはさておき、今日はwhywaita所感を述べましょう。初めてwhywaitaに会ったのは2015/12/18の金曜日。電気通信大学構内で会いました。その日は高専カンファレンス1日前。そんなときに意気揚々とこちらに近づいてくる奴、一見して感じました。

f:id:denari01:20161203223002p:plain

聞いてみれば在学生とのことでした、それにしては id:marin72_com と仲がよく、あと何故か凄い親近感を得ました。

その日はなんか、適当に挨拶して、あと初対面なのに雑用を押し付けた事を覚えています。あの時の僕は冴えてた。笑 (ほんとうにあのときありがとう)

翌日、高専カンファレンスが開催されました。僕は運営でバタバタしていましたが、彼も企画に参加してくれてたのかな??

バタバタが一通り終わったのは懇親会でした。最初に声を欠けてくれたのは全然whywaitaというわけではなく、hogasくん( id:hogashi )という、whywaitaの後輩がやってきてくれました。

彼はなんだか僕のことをちょっと目をつけてくれてたらしく、割とすぐに話しかけてくれました。hogasくんに声をかけられたのは人生でも指折りでの嬉しさがありましたね。hogasくんもうすぐで20じゃね?飲みに行かねえと。

そうこうしてなんとなくhogasくんと話をし、また別の人と話をすると、今度はいつのまにやら電通大オタク集団に単騎乗り込みしてました。その集団はめっちゃオタクしていました。さっきまでめっちゃいい子に見えたhogasくんもこころなしかオタクに見えます。sukukyonはオタクでしかない。

そこに追々来たのがwhywaita。その時思いました。

f:id:denari01:20161203223005p:plain

聞いてみれば在学生とのことでした、たしかにsukukyonくんhogasくんなどの在学生とも仲よさげに話しています。

翌日、僕は朝からプレゼンで登壇していました。彼は僕と同じ時間帯で別の部屋にて登壇していたみたいです。彼はプレゼン中で僕の発表を紹介してくれてたみたいでした。それを知ったのは数ヶ月もあとの話でしたが、1年経ってしまうまえにこの場をかりてお礼します。本当にありがとう。

イベントはつつがなく終了しました。あの時会ったオタクたちとはまあSNSでたま〜に話す感じでした。whywaitaはオタクなのにアイコンがいいカンジで今でも時々びっくりします。

ある日、彼が主催するイベントである dentoo.lt (電通大関係者がLTをするLT会)があって、興味があってお邪魔させてもらいました。開会前、会場ではAdvent Calendar通り魔のmasawadaさんがDJっぽいことを軽くしていました。そして開会すると司会っぽい人が登壇します。その時僕は思いました。

f:id:denari01:20161203223028p:plain

聞いてみれば在学生とのことでした、でもdentoo.ltの主催が高専生なわけないじゃんね。

そして彼は登壇します。インフラやネットワーク周りの話をしている彼を見て僕はこれを思いました。

f:id:denari01:20161203223029p:plain

そして僕は彼のことを今でも「準高専生」と形容しています。いや、だって高専生じゃんこんなもん。高専以外にこんな生き物居ねえ。

つい先日、敬意を表して僕が主催のkosen10s LT#5 に参加をしてもらいました。何よりも彼が興味を持ってくれていたためです。

参加者と楽しそうに話をし、また登壇時も楽しそうにしてくれていて、呼んでよかったと思いました。周囲の反応もみんな仲良くしており、 kosen10sというコミュニティが、限定的なコミュニティであることの大きなデメリットを確認するまでに至りました。

彼は高専生ではないのだけれど、優秀で気さくで、あととてもいい人です。何故か常に笑顔だしね。そんな彼とは、今後もぜひ仲良くさせてもらいたいなあって、おもいました。

(今日の記事エモいね。笑)

最後に、kosen10s LT#5 に来てくれたときに彼に抱いた一番大きな感想を書くことで締めます。

f:id:denari01:20161203223030p:plain

このAdvent Calendarのきっかけ

f:id:denari01:20161202162908p:plain

この記事は denari01 Advent Calenar、あらため masawada 被害者の会 Advent Calendar の2日目の記事です。

masawadaさんは僕の一つ上の年の電通大卒、今をときめくはてなのエンジニアなのですが…彼もまた、masawada Advent Calendarを毎年作っているのです。

それだけでなく彼は…

f:id:denari01:20161202162910p:plain

一人で全完する予定で居るようです

いやはや、すげえな、1記事も落ちないんだろうな、すごいなすごいな〜。というかこれはもう、Advent Calendar 見た目がそもそもすごい…www

この調子でブログを書く彼を、煽った僕が馬鹿でした…

いや、煽ろうと思ったわけじゃなくて、面白かったからツイートしただけ…という言い訳だけしておきます。笑

まあともかく、下記のような会話が生まれてしまったんですねえ。

ツイートを見た数秒後

その結果生まれてしまったのがこちら。

f:id:denari01:20161202162912p:plain

さすがに自分一人ではどうにもできないと、頻繁にお助けを求めていたのですが、9人の方が助けてくれるみたいです。ただしこいつらは大体、僕を煽る気満々なので、正直ビビってます。どんなヤリが僕の心に刺さるのか…

しかしまだまだ予定はスカスカ、本業は楽しすぎて手を抜きたくないし、他にもやりたいデザインがある僕はブログをたくさん書いている場合ではない気しかしていないので、みなさんの寄稿をお待ちしてます。

もうほんと、煽ってもいいし心えぐってもいいからほんと、ほんと頼むわほんと。

denari01の自己紹介

f:id:denari01:20161201022656p:plain

気づけば半年ブログを書いていないのですが、今日からAdvent Calendarで記事を大量に書くことになりました。

こちらの記事はdenari01 Advent Calendar 1日目の記事です。2日目は明日上がりまーす。

1日目はざっくり自己紹介をしておしまいにします。

f:id:denari01:20161201022700p:plain

プロフィール
年齢 21
出身 兵庫県
学歴 明石高専 電気情報工学科卒
職業 デザイナー / Web中心のエンジニア
正確 ナルシスト

f:id:denari01:20161201022703p:plain

今年の5月まではWebやスマホアプリの開発をするプログラマだったのですが、6月にデザイナーになっちゃいました。

学生のころから開発とデザインの二足のわらじ(笑)で頑張ってきたのですが、軸をデザインの方に移そうと思って転職しました。

ロゴ・印刷物・Web・スマホ…とグラフィックデザインやUIデザインと呼ばれる分野は大体網羅しました。

建築とプロダクトは1mmもできてません。hmmm...

上の画像は、高専4年生から現在に至るまでのロゴデザインをサマリーとしてまとめたものです。

幾つか闇が混じってますね その話は多分追々出てくる。

軸をデザインに移した理由はといえば、僕のやりたいことを考えたんですよね。

確かにプログラミングは面白い。コードを書いたらそれが挙動し、命令を組み合わせて挙動をきれいにしていく作業はさながらパズルで超楽しい。

しかし、僕としてはそれは趣味の域を超えた瞬間からすこしだけモチベーションが下がってしまった。 他人に口を出され、ボロボロになったコードをなおしていく、リファクタリングがあまり好きではなかった。

対象的にデザインは、人の事を考える推理ゲーム + 知識ゲームみたいなところがある。 プログラミングとはまた違った楽しみなのだが、他人に口を出されることが真剣に「面白い」と思えた。

そういう観点から仕事として軸にするのはデザインが良いなあと考えるようになりました。

今では人にUIを見せ、まずはその時点で想像を超え、そこからフィードバックが来てもそれに想像を超えた対処を見せるのがたまらなく楽しいのでデザインは辞められません。

f:id:denari01:20161201022705p:plain

前職ではiOSが多分一番苦労したんだけど、最近はiOSの流行りを少し追えてなくて遅れ気味。早く勉強しないと。Webはまあ一応それなりに追ってます。

基本的なスキルセットは上記。jsはちょくちょく勉強してます。Angular以外(重い腰が上がらないだけ)。

jsといえば最近気になっていてあと気に入ってるのはRiot.js。あれは可愛いし好きだけど汚いコード書きそうで怖いからちゃっかり勉強していこうという感想。

一番最近やった案件はPHPの某有名CMSで、なんだかなあという感じでした。

Pythonが好きで、PyCon JPのスタッフとかもやってます。

きっかけは同級生にカレーメシ先輩( id:nwpct1 ) がいた事ですね。

最初はRubyを書こうとか、でも生きていたらWordPress案件が降ってくることがあるからPHP書こうとか、いろいろLLをうろちょろしていたのですが…

Djangoに出会ったのがデカかったですね。超開発しやすいし、超わかりやすい。

Pythonのコードは僕の中でなんかちょうどいい塩梅なんですよね。型とか。

もうちょっと型をしっかりしたいと思ってるときに Type hints が来て興奮したのはもはや僕だけじゃないはず。

そんな僕が最初に書いたのはHTML / CSS。

高専のときはWeb研に所属しており、Webサイトづくりが趣味でした。

今では仕事になっちゃいました…

その名残で今でもWebが一番得意。

f:id:denari01:20161201022708p:plain

そんな僕はナルシストなんですね。いやぁ、うん。

人間さあ、みんな自分のことが可愛いと思うんですよね〜。

僕はまあ、それを隠さずあえてナルシストを公言することでいろいろ生きやすくなってますね！

自分の意見に自信があるとき、いかなる場合においても「自信の理由」については理解されやすい。

あと特筆すべきは、kosen10sで一番偉いっぽいマンやってます。いやこれは最近実はひっそりと影を潜めるようにしてるんですけどね。その話はまた別の日に。

kosen10sっていうのは高専出身の僕の同い年の人を集めたコミュニティで、普段はSlackで会話したりたまにLT会をしたりしてます。

ちなみに marin72_com っていうのはおもしろおばさんで、その…ババア感さえなければ今をときめく素晴らしいお方です。 そんなこと友人に言っちゃいけないね。てへぺろ

本当に周囲に恵まれています。共通のコンテキストを持っているせいか同級生高専卒のみんなは本当に話が合うし、毎日楽しませてもらってます。

そんな僕について書くのがこのAdvent Calendar。 年末なんで、いろいろ吐き出してもらえたら、 僕はひっそり傷つくけれど まあ嬉しいかなあって感じです。

が、しかしですよ。

執筆者が全然足りてない…

www.adventar.org

もうほんと、何書いても良い。普段の恨みつらみを綴ってもいいから、ホント頼むから、みんな書いてええええええええ🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

あしたはmasawadaさんへの愚痴です。おたのしみに！

沖縄は、アツかった。 #hcmpl 登壇レポート

沖縄で開催されたIT系技術者を中心としたイベント、ハッカーズチャンプルーのカンファレンスで登壇をしてきました。

ハッカーズチャンプルーは4日間のイベント。最初の3日間は開発合宿となっていて、各々がテーマを設定して好きに開発をする。最後の1日はカンファレンスで、僕はスケジュールの都合もあったため最後の1日にのみ参加とさせていただきました。

ことのきっかけ

知人がFacebookグループにて、ハッカーズチャンプルーの登壇者募集に関する投稿をしており、それを見て今回のイベントを知りました。

なんと、沖縄までの交通費と沖縄での宿泊費まで出るらしいとのこと。冷静に考えて好待遇すぎる対応で驚きました。

100人以上の規模でのプレゼンテーションはあまり経験がなく、高専以外の界隈にて発表を行う機会が欲しかったうえ、沖縄には人生で一度も言ったことがない自分にとっては非常に魅力的な機会に見え、僕の持つ発表テーマの中で最も面白いと思っている(かつ未発表の)ものでプロポーザルの提出を行いました。

結果それが採択をされ、光栄な事に登壇させていただくことになりました。聞けば運営内の多数決にて決定したらしく、非常に光栄でした。

登壇をしてみて

私はカンファレンスのトップバッターでした。発表テーマは

「デザイン」の本質を見なおす

というもの。こちらの詳しい内容は別でブログ記事にしたいと思います。プレゼン資料だけはアップロードしました。せっかくなので掲載しておきます。

speakerdeck.com

いろいろすっ飛んで一部わかりづらいプレゼンテーションになったため、もうちょっとなんとか出来たよなあ…と反省をしていますが、とりあえず僕の熱量が皆様に伝わっているみたいで良かったです。僕のプレゼンは「わかりやすい」ことより「なんか考えさせられる」ことを重視したものだったため、熱が伝わった感じの感想を頂戴できて、非常に嬉しかったです。

あとでプレゼン中の自分の写真を見ていたのですが、 変顔 楽しそうな表情がたくさん見受けられました。あとで見てめっちゃ笑った。

他のセッション

全部激アツでした。プレゼンターが軒並みCTOやらなんやらバケモノぞろいで、私が彼らとならんでセッションをするのが非常にプレッシャーになるほどでした。

全部見せます! “PerlでつくるInfrastructure as Code”

slasla ← hackers champloo で実装したものらしい。すげえ。

前後半に分かれていました。非常に見応えのある発表でした。本人も汗を書きすぎて、定期的にメガネを外してタオルで顔を吹いていました。 サウナじゃん。 普段はYAPCで登壇もするような方で、プログラムを見ている限りでも非常に興味がありました。

Infrastructure as Code について、基本の部分から運用例、実コードに至るまでを見ることができる厚めの発表で、Immutable Infrastructure はやはり今の時代導入が必須だと感じました。インフラのつらそうな案件をちょくちょく挟んでいて、ちょっといろいろ思い出すことがありました。いや、うん、いやぁ、懐かしみを感じてしまう…

後半は開発合宿の話でした、たのしそうな開発体制、技術的なチャレンジ、仲の良さそうなチーム…僕みたいな発表をした奴がこれをいうのもアレですが、非常にエモかったです。

Go言語の採用〜導入〜運用

Golangはいいぞ。やっぱりGo最高っぽいですね。非常に興味も湧くし、ちょっといろいろ乗り換えていきたい所存です。Tourをしながら聞いていました。

特徴的だったのは質疑応答での一言で「Goで書いてて楽しいとおっしゃっていましたが、何がたのしいのですか??」という質問に対して

うーん、なんていうんだろう、とにかく楽しいです、スマートに書けるところとか…

というふうに若干言いよどんでいたところ。Goの気持ちよさがにじみ出たすばらしい応答だったかと思います。これはもうGolangやるしかない。

Mackerelへ至る道

Mackerelはいいぞ。ぼくとしてはツールの説明も非常に嬉しかったですが、やっぱり開発体制が非常に興味深かったです。はじめMackerelチームで採用されている言語の数に驚きましたが、非常に合理的な言語選択だったため、素晴らしいなと思いました。

エンジニア向けSaaS開発の楽しさが非常にわかりました。確かに技術的なキャッチアップの速度を上げないとアレは作れなさそう。Perlをベターシェルと形容していたのは、なるほどという感じでしたが、個人的には、やっぱりGoとScalaがアツい。

PostgreSQL 9.6がやってくる！

postgresqlのチューニングの世界、広そうだった。結構コアな話だったので全部ついていくことはできず、ただかなり分かりやすかったので、これによってどんなメリットがもたらされるのかはきっちりわかる最高の発表だった。

奥が深いpostgresql、これは一回単体で勉強してもいいかも。あとpsqlコマンドはpostgresqlとは別で…みたいな位置づけの話とか、新鮮な話も多く不勉強だなあと素直に感じた。psqlコマンドつよい。

モンスターストライクを支える負荷分散手法

名前がまずやばい。 最高のライブラリを紹介された気がした。

github.com

これは、最高でしょ。こういう発想強くなりたいからオープンソースにコミットしようと感じた。

LT

いや、もうホントすげえよ、 ついこないだまで高校生だった人間の無茶振り登壇 とかね。

SansanのイケメンのイケイケドンドンLTとか見て、マジすげえなという気持ちになった。

あとAMIMOTOの発表が二回あった。WordPressとかいうつらすぎるツールをまだマシにしてくれていて仏だと思った。pluginの命名規則がよくわからない問題はやっぱり健在らしい。

懇親会とかその辺の。

沖縄の文化

めちゃ楽しかった。

沖縄で働く人は、沖縄にコンプレックスを持っていたり、逆に楽しんでいたり、かなり多種多様ではあった。とはいえ、全体の「意識」として例えば技術のキャッチアップ速度が低いことなどを憂いている人が多い印象があった。

個人的には沖縄県民の働き方が気になっていたが、やはり東京の案件をリモートで受けるなど、おおかた想像どおりだった。ただし、それでも立派に仕事が成立していることにやっぱり感動した。将来沖縄で仕事ができたらどれだけ幸せだろうと思った。クソ暑いけど。

沖縄で絡んだ人

スピーカーの方々とは少しずつ話をさせてもらえた。ガッツリは話していないけど、その中でも彼らの考えや持っている知識はやはり貴重で、自分もそのレベルに達したいと心のそこから思った。

県内で仕事をしている方と話した。県内で普通に仕事をしようとすると割と大人の事情が大変らしく、若手が盛り上げないとっすね!!みたいな話をした。

運営の方々とも少し話した。僕のTalkに投票をしてくれたとの旨も教えてもらって感謝しかなかった。セッションが聞けなかったようなのであの哲学を再度ペラペラと喋った。

スピーカーのpapix氏とslas.laを開発していたデザイナーとも話をした。自分もまだまだながら、デザイナー同士エモトークをした。 あの人超エモかった。 次のUX系のイベントが会った時にしれっと誘って引き続きエモい活力を頂きたい。

夫婦参加の方とも話した。奥さんのほうが僕の発表で、「私も何でも屋。つらい」的な、目を引くツイートをしてくれていた人で、「そういう星の下に生まれているんすよ、それ」って100回ぐらい思った。ってか夫婦でこういうイベントの参加ってマジはんぱねえー。

Sansanのイケメンがイケイケドンドンだった。東京のRails寺子屋というイベントにて拝見したかたが沖縄に移住していて、ばったり会って、かなり焦った。正直ここには書けない闇の話をさせてもらった。

Clojureは()が多いけどサーバとクライアントが書ける優秀な言語だった。でも ()は多い。

感謝したいこと

  • 交通費・宿泊費を補助していただき、ありがとうございました。ご補助のおかげでハッカーズチャンプルーを心置きなく楽しめました。
  • 運営スタッフの西島様( @k_nishijima )にはホテル手配などで非常に丁寧な対応をしていただけました。おかげさまで非常に快適に沖縄を楽しめました。ありがとうございました。
  • 運営スタッフの皆様、最高のイベントをありがとうございました。私がもっとも感謝すべきは、私の乗った電車が遅延した際に柔軟にカンファレンス開催時刻を遅らせてくれたことかと思います。ご迷惑をお掛けしたにもかかわらず、暖かく対応していただき、本当に有難うございました。

最後に感想をば。

沖縄は、アツかった。

ぼく自身、スピーカーとしてかなり発信する立場でしたが、学びも多かったかと思います。しかもすげえ楽しかった。どのセッションもすごかった。内地に戻った後もガンガンやっていく覚悟を決めた、アツい沖縄旅行になりました。