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を使っても実装できるのは自由度が高くていいですよね〜〜
