診断コンテンツ作成するには？作るためのメソッドを紹介！
本日業務で診断コンテンツを作成することがありましたのでそれの備忘録をご紹介しようと思います。
本日作成したのは以下のような診断コンテンツです。
- 結果は最終的に4つのタイプに分かれる
- 二択の質問に回答して結果に導く
- 問題数は全部で5個
まあシンプルな診断コンテンツですよね。
ABCD４つのタイプがあったとして、各タイプに関する質問をしてその質問を二択のうちから回答を選んだら、回答ボタンに紐づいているタイプをカウントしていくような流れとなっています。
例を出すとするなら「A」タイプに紐づいている「a」の回答をしたら「A」をカウントしていくようなイメージです。
では前置きは置いといてサンプルを見てみましょう。
今回サンプルとして出しているのはご覧の通り、5個の質問で現れる選択肢を選ぶことでどのタイプか、というのを判定するもの。
今回はちょっとめんどくささもあったので紐づいているタイプを選択肢に書いちゃってます（笑）
なので手っ取り早く動作を確認するにはひたすら同じアルファベットの選択肢を選ぶことでちゃんとそのタイプのアルファベットが表示されるか、ということを見ていけば大丈夫なはず。
ちなみにずっと左側押していると、受け取る値は「R,R,S,A,I」となるので一番数の多いRタイプになりますね。
このコンテンツの仕組みは「配列」が重要です。
このコンテンツで使用している配列は全部で3つ。
①userAnswers…選択肢のボタンに紐づいている「クラス」を取得し、そのクラスの値をユーザーの回答として保持する配列。
②countType…各タイプが配列の中に何回出てくるかをまとめた配列。
③counts…各タイプの数「count」とタイプを識別するkey「type」の連想配列。
まあ、2と3はまとめられる感じもしますが勉強のため、ということで…
さて、この配列たちの役割はこんなところなのですが見てもらえれば分かる通りuserAnswersに入った値からそれぞれの値の中でどの値が一番多いのかを判定し、多い値のものをsort関数でインデックス0番に持っていき、そのtypeを返すという流れになっています。
仕組みに関しては以上のような形なので細かい処理は割愛して、今回「なるほど！」となった処理「Array.filter」について見ていきたいと思います。
Array.filter
Array.filterは配列の値をフィルタリングする関数です。
使い方はコードの中にもありますが下の通り。
配列.filter((変数)=>変数の処理)
この類の関数はforEachとかfor...inとかでも見かけますね。
引数の変数に配列の値が入り、その変数を使って値を一個ずつ処理できる、というものです。
phpでは配列の重複をカウントできるメソッドがあるようですがjsではそのようなメソッドがなかったので今回はfilterを使ってそれぞれの値の数を計算しています。
はじめて使いましたが配列を使う上ではかなり重宝しそうな予感…
さて今回は初めて診断コンテンツを作成しましたが、配列は初学者には取っつきにくさMAXですが、やはり便利！
ちなみに配列系で言えば、Array.reduceが最強らしいですよ。
canvas続編！「Three.js」を使ってみたらさらに楽しすぎたお話。
さて、この前はHTML5の新要素「canvas」についていかに楽しいか、ということについて熱弁（そうでもない）しました。
しかし私、まだ「canvas」の楽しさの真髄に気づいていなかったんです。
ということでそんな楽しさの真髄を教えてくれた「Three.js」について今回はお話しようと思います。
Three.jsってなんぞ？
さて、Three.jsというのはどのようなものなのでしょう。
.jsがついている時点で「ライブラリだろな」と思うかもしれませんが、まさにその通り。
Three.jsは「簡単に」今年大流行間違いなしの「3D」を作成できてしまうライブラリなんです。
どれくらい簡単かというと〜〜〜
このくらい簡単！
ちょっとコメントアウトが多いかもしれませんが一応コンストラクタなり、仕組みなりを書いてあるのでよかったら読んでみてください...
ではThree.jsの基本となる仕組みを見ていきたいと思います。
Three.jsで基本となる仕組みは次の5つ。
...canvasは名前の通りキャンバスで、描画する領域を取得するために必要なものです。
②scene
...sceneとは3D空間のこと。この3D空間に後述のMeshなどを入れ、3Dコンテンツを作ります。
③camera
...cameraは名前の通りカメラ。どの位置からsceneを見るか、ということを決めるためのものです。
④Mesh
...3Dコンテンツの中でもオブジェクトとなるのがこのMesh。先ほどのpenで言えば赤い丸はこのMeshで作られています。
Meshは「geometry（ジオメトリ:形状）」と「material（マテリアル:素材）」で構成され、それぞれプロパティをカスタマイズできる。
⑤renderer
...rendererもその名の通り、レンダリングをするもの。
レンダリングとは、
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成すること
と書いてありますね。
このレンダリングをすることによって3Dコンテンツが可視化されるわけです。要するに一番上位の存在というわけですね。
さて、基本となる仕組みはこの5つでそれぞれpen内に自分なりの解釈をコメントアウトにて載せております。
コメントアウトを除けばコード量はかなり少ないですし、仕組みを想像できればスッと理解できる代物です。（と言いつつ結構曖昧...）
イメージ的にはjsのDOM操作したりする感じと似てる？ような気がしますね。
さて、先ほどのpenでも3Dっぽさはありましたがさらに3D要素を加えたのがこちらになります。
ああ、まさに3D...
こちらもコメントアウト満載で申し訳ないのですが、一応解釈を記載しています。
このように、Meshをカスタマイズして自分なりの3Dオブジェクトを作成できますし3D感満載の奥行きがある動きも実装することができます。
また、Tweenなどのアニメーションライブラリと組み合わせることでかなり大胆な3Dコンテンツを作成できるようなのでチビチビ作っているサイトのファーストビューに使えたらなあ...と画策しております。
かなり取っつきやすいライブラリだと思いますし、公式ページにはどんなものかな〜と分かるようなサンプルもたくさんあります！
是非一度お試しあれ！
今更ながらcanvas使ってみたら楽しすぎて一日があっという間に過ぎた話
ふんばりフロントエンジニアの私ですが、やはりなぜフロントエンジニアが良かったかと言えば「目に見える！」からだと思っております。
実を言うと新卒で入った会社はゴリゴリのバックエンドで、研修の最中でも「見た目のことなんか二の次じゃ」感はあったんですよね。
しかし！「人は見た目が8割」とも言いますし、見た目はかなり重要な役割を担っていると思います。
そして今回はそんな「見た目」に重視した、コードを書けばすぐに反映されるとてもた楽しかった「canvas」について書いていきたいと思います。
canvasってなんぞ？
「canvasってなんぞ？」
という方はおそらく少ないとは思いますが、一応MDNからの引用を…
HTML5 で導入された
<canvas>HTML 要素は、JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、動画のリアルタイム加工やレンダリングに用いる事が出来ます。
うむ、わからない。
これだけ見て分かる人はきっと触ったことのある方でしょう。
ともあれ、「JavaScript」と一緒に使うHTML要素であることは分かりますよね。
では、簡単にcanvasの例をご紹介していきたいと思います。
はい、これが「ザ・シンプル」なcanvasの使い方です。
canvasとは、jsを見ても分かるようにまずcanvasの置いてあるDOM要素を取得し、そこからコンテクスト（描画範囲）を取得することがまず第一。
今回の例で言えば変数「ctx」がcanvasのキャンバス（描画範囲）となっているわけです。
あとはその描画範囲で、どのような図形を描画するのか、どのような色で塗るのか
、ということを決めてしまえばこのような図形を描くことができるようになります。
「え、こんな図形ならcssでやれよ…」
まあ私もそう思います…
しかし、canvasが楽しいのはここから！
canvasのコンテキストは自由にカスタマイズすることができます。
そのため、HTML上にカスタマイズできて自由に消したり書いたりできる画用紙を用意された気分になってしまいました…
ここで私、「なんとなく画面いっぱいに埋め尽くしたいなあ…」という謎の欲望が。
ということで作ってみたのがこんな感じのもの。
(練習用のものだったので余計なものも入っています、すみません…）
作ったものは上部のcreateボタンを押すと、ランダムで違う場所に違うサイズ、違う色の四角形を100個出す、というもの。
個人的にはcanvasというよりランダムにカラーコードを作る、という方法が「ああっ！」となりましたね。
意外と配色がいい感じにばらけてくれているので「今回の配色いいな…」とか「もう一回押すか迷うな…」というような感じで一人楽しんでおりました。
とまあ、こんな感じで自由に図形を書いたり文字を書いたりできるcanvasなのですが、ここで私「ずっと気になっていたjsライブラリ」があることを思い出したのです。
そのライブラリこそ…「Three.js」！
名前がシンプルでカッコいいですよねえ～
まあ皆さん知っていると思うのですが、業務で使うことは私の場合全くなかったので触れてこなかったんです…
せっかく暇だしcanvasやったし！ということで、今回はThree.jsにも挑戦してみたのですがそっちの方が長くなりそうなのでまた今度…
FireTVスティックを紛失…アプリでなんとか対応した話
今回はプログラミングとは関係なく、自宅で利用しているFireTVの話を備忘録として…
私はAmazonのプライム会員なので、休日などはFireTVを頻繁に利用しているのですがなんと最近FireTVの操作をするために「FireTVスティック」を紛失してしまったんです…
結局血眼になって家族総出で捜索したのですが見つからず。
個人的には猫二匹のうちどちらかが遊んでてどっかやったのかな～と思っていますね（黒いほうが怪しい…）
とまあ、そんな犯人捜しをしてもしょうがないのでなんとなく聞いていた「FireTVスティック」のアプリを試してみよう！ということになったわけです。
AppStoreでもGooglePlayでも「Fire」と打てば簡単に見つかったので、「お、これは早速…」と思いインストールし使ってみることに。
本来であれば、インストールしたスマホとFireTVを同じローカルネットワークに接続することで簡単にペアリングができ、「○○のFireTV」という文言がアプリに表示されるのですが、いつまでたっても「○○のFireTV」が出てこねえ…
そしてアプリの画面を見ていると注意書きで「アカウントにサインインしてね～」というような文言が。
「お、こりゃ失礼した！」と意気揚々にサインインして、もう一度ペアリングをしてみることに。
………「出ねえ」。
この辺でなにか嫌な感じだったのですが、結局アプリ側の操作では解決できなさそうだなあ、と思ったので同じ症状をググることに。
しかし、みなさん「普通にサインインすればアプリに接続できるよ～」と言っておられる。
プログラミングしててもありますが、ここで私「疎外感」を実感しました。
いや、でもみんなできてるんだからできるはず！ということでめげずにFireTVのことを調べていたらあることが発覚。
それが「FireTVの電源を付けていないとリモコンアプリが利用できない」ということ。
しかしFireTVのHDMI端子を抜き差ししても電源を落としても電源がつかなかったのでもう無理かなあ…と思っていました。
そこで、解決するために試した方法が三つ！
①HDMI連動機能をOFFにする
②HDMIのポートを変える
③FireTV付属の延長ケーブルを使ってみる
①に関してはもともとOFFだったので関係ないかもしれませんが…
実際にこの三つの方法を順番に試してみたところ、変化が出たのは③から。
FireTVにはHDMIを延長するケーブルと基本のケーブルがついているとおもいますが、延長ケーブルは使わないほうがいいよ、的なことを聞いたので使っていなかったんですね。
しかし、この延長ケーブルを使って電源を落とし再度手順を試してみたところばっちりFireTVのホーム画面が！
どうやら今回の原因は「ケーブル自体に問題があったこと」「HDMIのポートの不具合」という二点の問題だったようです。
なので付属の延長ケーブルを使っていない方は、使ってみて、使っている方は一度使わないでHDMIに挿すといいかもしれませんね。
「こんなのいらんわ！」って思っていましたが取っておいてよかった…
簡単に使えてしまうものって使えなくなったときに意外と対処が難しかったりしますよ…
同じような症状に合っている方はぜひともお試しください！
余談ですが、はじめてAmazonに問い合わせてみたところ3秒ほどで電話かかってきてめっちゃびっくりしました(笑)
【css】git でコンフリクト起こした時に考えるべきこと
こんにちは、今回はバージョン管理ツール「git」についてのお話です。
gitって業界では知らない方、というか使っていない方がいないほど有名なツール。
ただgit初心者にとっては困ることも少し…
それが「コンフリクト」ですよね。
最初私がコンフリクトのメッセージを読んだ時なんか「え？犯罪犯したのかな？？？」くらい慌てましたが、コンフリクト自体は意外と起こります。
「え？起こんなくね？」と思うかたもいるかと思いますが、意外と起こります（怒）
私はフロントエンジニアですので、cssを使う機会が多々、というか毎日なのですがcss は「git管理するのにどうするべきか」が分かれる言語でもあります。
というのも、現在純粋なcssのみでコーディングする方はほぼおらず、scssなどのメタ言語を利用する方が多いため。
かくいう私も便利なのでscssでコーディングをするのですが、scssは最終的にcssにコンパイルしないとHTMLが読み込んでくれません。
なので各自コンパイルすることになるのですが、今回の肝はここ！
私はgulpでscssをuglifyしてコンパイルしているので、scssをコンパイルすると「1行のcss」で出力されてしまいます。
gitは行単位的な判別をするようなので、1行にコンパイルされてしまっては「どこが変わった？ああ、この1行が変わってんのか」と単純に解釈されてしまいます。
なのでこのコンパイル後のcssはコンフリクトが起きるのは仕方ない。
そしてこのcssをgit管理するべきかしないべきか、という議論が起こるんですね。
git管理をしなくても、元のscssがコンフリクトを起こしていなければもう一度コンパイルしなおせばいいですから。
ということで、コンパイル後のcssをgit管理の対象とするかどうかは議論が分かれますがよっぽどのことがない限り、対象から外してしまってもいいんじゃないかな？と感じますね。
displayにtransition効かないんだけどどうすんだよ…【対処法】
cssで最近「なるほど！」って思ったことを一つ。
transitionプロパティって便利ですよね。
知った当初は何にでもtransitionつけて「カッケエ...」とか思ってましたが、もちろん万能ではありません。
特に「display+heightでheightにtransitionつけたらいい感じのアコーディオンとか作れんじゃね？」って思った方も少なからずいるでしょう。
ただ、それを実現するには少し工夫が必要かもしれません。
今回作成したのは単純なアコーディオンです。
中のコンテンツ(ここでは.inner)のdisplayをnoneかblockにするクラス「accordion」とheightを変えるクラス「active」をjsのclassListで追加している訳なのですが、ここで私最初に「displayとheightの処理を一つのクラスにまとめて、heightにtransitionかけたらいけんじゃね？(浅はか)」と思ったのです。
まあご存知の方はお分かりかと思いますが、結論から言うと無理ですよね。
と言うのも、まずdisplayプロパティとは言ってしまえば存在自体を消すかどうか、というプロパティです。
同じ目に見えなくなるものとして、opacityがありますがここがopacityとは違う点ですよね。
このような実例を検索するとopacityとheightで実装、という例が出て来ますが私はどうしてもdisplayを使いたかった…（というよりopacityは結構使いどこ難しい気がする…
ということで、今回重要なポイントは二つ！
①displayとheightの制御クラスを二つに分ける
②setTimeout関数
「なんで分けんだよ！！！！」とお思いかもしれませんがこれが結構重要です。
まずdisplayの話に戻りますが、displayは存在を消してくれるプロパティ。
つまり「display:none」にすると、ブラウザにも認識されなくなってしまいます。
そのような要素に「heightを伸ばすんじゃボケ！」と言っても「はあ？」となってしまいすよね。
ただ、displayを表示してから「heightを伸ばすんじゃ！」と言えばあちらさんも鬼ではないのできっちり理解してくれます。
ただ、普通に同じクラスでdisplayとheightを指定していたのでは理解されるタイミングが一緒なので「はあ？」状態になってしまう訳ですよね。
そこで出てくるのがポイントにあげた二点！
まず、displayをblockにするクラスとheightを変えるクラスを作ります。
二つクラスを追加することによってどこでどっちのクラスを追加するか、という選択肢が生まれてきます。
なのでまずはじめにdisplayを制御するクラス「active」をOPENがクリックされたら追加するようにし、setTimeout関数でその10ミリ秒後にheightを変えるクラス「accordion」を追加するようにしている訳です。
これならしっかりどの要素の高さを変えるのか、ということは理解してくれます。
結論としては、display+heightで指定してるからtransitionが効かないのではなく、一緒に指定しているとdisplayがnoneの状態からheightのプロパティも認識されてしまうためtransitionが効かなくなってしまうんです。
タイミングを10ミリ秒ずらすだけでもheightに対するtransitionは効かせることができます。
これはランドスケープした時にどうこうする...とかOSやブラウザでイベントのタイミングが異なる時にも利用されがちな仕組みです。
灯台下暗し感が強い内容でしたが、displayを使っても実装できるのは自由度が高くていいですよね〜〜
