" いいね " なライフをつくる。

うそはつかない。"いいね"をつくる。じゆーうな日記です。

IGTVはYoutubeを超えるか

IGTVはYoutubeを超えるか

2018/6/21に、InstagramはIGTV 縦型動画アプリを発表しました。 www.gizmodo.jp

どんなサービス・アプリ?

イメージとしては、Instagramのストーリー機能を、そのままYoutube風味かつ縦型特化(スマホ特化)にしたようなアプリです。

使ってみた感想

実際に使ってみて印象に残った点です。 * サクサク! * Instagramとのシームレスな連携

サクサク!

早速使って見た感想ですが、短時間でサクサク動画を見ることができます。 例えば、動画を探しながら動画を見るということも縦型画面ならではのUIでうまく実現されていました。

想像以上に見やすく、動画が充実してくればYoutubeの代わりに見ていてもおかしくないなと思うほどでした。

このサクサクなUXはとても重要で、AbmeTVもPC、アプリ共に相当力を入れて開発していたのが最近の例だとありました。

Instagramとのシームレスな連携

インスタグラムのアカウントとIGTVの投稿者は紐づいているので、Instagramアカウントへシームレスに移動することが可能です。 例えばこんな風にひょっこりはんの動画をみて、

アカウントをタップするとIGTVアプリのまま、ひょっこりはんInstagramアカウントページに遷移します。

IGTVはYoutubeを超えるか

IGTVの強みはこの3つではないかなと思います。

  • Facebookユーザー数並みのポテンシャルがあること
  • Instagramアカウントとのシームレスな連携
  • 縦型動画特化 (スマホ特化)

Instgramはすでに10億ユーザーを突破しています。親会社であるFacebookは23億ユーザーを突破しています。 今もユーザーは増加を続けていますし、この基盤の上にIGTVができることは大きな強みだと思います。

縦型動画はスマホ時代との親和性もあります。

先ほど書いたように、Instagramとの連携も強力です。

競合よりも棲み分け

以上の点を踏まえて、Youtubeと競合するといった記事が多く出ていますが、競合というよりは棲み分けが進むのではないかと考えています。

  • IGTV...スマホで短時間視聴
  • Youtube...大画面動画で中時間視聴

ただ、大画面よりもスマホの方がポテンシャルは大きいと思うのでもし棲み分けが進めばその意味でIGTVはYoutubeを超えるかもしれないなあと思いました!

今後どんなサービス、広がりになるのか気になります!! とても楽しいアプリでしたので、ぜひ体験してみたください!

んー😑 やっぱりはてなブログが好きという話。

なぜはてブロか。

自分はQiitaの黄緑色の色合いが好きではありません。(自分のアイコンは黄緑ですが) 記事も読みにくく感じます。

そして、シンプルなのではてなブログを選びました。

しかし、シンプルなところは気に入ったのですがwordpressの方が書いた記事を自分の資産として活用しやすいと思いはじめ、wordpressに浮気をしました。

wordpressで10記事くらい書いてみて、「んー😑」こんな顔になってきました。

wordpressはカスタマイズ性が高いことが利点としてありますが、そんなにカスタマイズしたいと思わない自分にはメリットどころかデメリットにしか感じません。プラグインなんかもそこまでいじいじしてまで使いたくないです。
また管理画面もごちゃごちゃしていて扱いにくいです。
記事を書くことがメインで、かつ管理画面上で簡易的にアクセス分析もはてぶは行えるので、やはりとても居心地よく戻ってきました。

とりとめないのですが、やっぱりはてなブログが好きという話でした〜。

さくらSSLの"CSRを正しく入力してください。"の解決策

さくらVPS内に環境を構築し、ドメインを取得して初めての個人サイトを公開しました! ただ、facebook認証ログイン機能をどうしても入れたい!と思ったのですが、なんとfacebookログインはSSL(https)でないと、2018/3〜実装できなくなっていました。

というわけでssl対応を行いました。

こちらのサイトが参考にしました。

さくらVPSにSSL証明書を導入しHTTPS通信の構築

証明書取得のために、CSRというものを自分のサーバーで事前準備する必要があります。

-----BEGIN CERTIFICATE REQUEST-----
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-----END CERTIFICATE REQUEST-----

↑準備ができたら、このCSRを実際にさくらのサイトに行って入力をする必要があります。

早速入力しました!すると、

"CSRを正しく入力してください。"

「ん、エラー!?入力してるよ...。」
何度入力しても進まず、ググったところ、CSRの作成の際に入力を求められる、組織名を空白にすると先へ進めないそうでした。
というわけで個人のサイトですし組織ではないので、空白にしていたこの組織名に、ドメインの.com以前を入力して先へ進み、CSRを発行し直しました。

Organization Name (eg, company) [Default Company Ltd]:Carat #{組織名} ←CSR作成時に問われるこの質問です。

もう一度、CSRを貼り付ける.....。

"CSRを正しく入力してください。"

「え...」

その後ググりまくっても解決しませんでした。

一晩寝かせて次の日もう一度CSRを入力しに行き、よーく見ると"-----BEGIN CERTIFICATE REQUEST-----"と"-----END CERTIFICATE REQUEST-----"も、CSRの入力の際に含める必要があるみたいでした。

これまで"XXXXXXXXXXXXXXX"の箇所だけを貼り付けてしまっていました。

これにて解決。

さくらSSLの "CSRを正しく入力してください。" の解決方法 まとめ ・組織名を入力する。 ・BEGIN...とEND...も含めて入力する。

なんでもそうですが、動かない時はきちんと一つ一つ確認しないとだめですね...。

HTML:textareaタグの初期値が入力されない時

環境、対象

  • HTML

要点

  • HTMLで、textareaタグの初期値を出力する方法

記事にする理由

  • 忘れがちなので!

内容

事象

  • textareaタグのvalueに初期値を入力したのに表示されない.....。「なんで?」となってしまいました。

ダメな例

<textare name="text" value="ここにテキストを入力してね。"></textarea>

原因

  • textareaの初期値は、valueの値ではなく、textaareaタグの開始タグと終了タグの間に記述する必要がありました!

解決策

  • textareaタグの開始タグと終了タグの間に記述

正しい例

<textare name="text">ここにテキストを入力してね。</textarea>

f:id:tusukurukun:20180505143003p:plain ※↑表示イメージ


おさらい

  • HTMLで、textareaタグの初期値を出力する方法は、 textareaタグの開始タグと終了タグの間に記述することです。

ひとこと

  • inputタグでは、valueに書くことで初期値とできるので、間違えてしまうことがあります!気をつけてください。

LaravelのXSS対策の仕組み [ XSSとは? ]

環境、対象

  • Laravel5.6
  • PHP7

要点

  • XSSとは入力値にjsコード等を入れてサイトやユーザーに攻撃すること
  • LaravelのXSS対策は {{ }}でくくって出力をするだけ

記事にする理由

  • 仕事でXSS周りの不具合修正の対応を行った際に知ったことを忘れないため!

内容

事象

  • 入力フォームにjsコードを書かれ、XSS対策をしないまま出力するとコードが実行されてしまう。

入力フォーム↓

<script> window.alert('hoge'); </script>

例えば、alertを入力されるとそのページにアクセスした人全員にalertが表示されるようになるといった状態になります。 (alertを無限実行などされたら困りますね。)

原因

  • viewへの出力時に、エスケープしていないこと

viewで入力内容を出力する際に、エスケープをしていないことから、入力内容にhtmlやjsが含まれていたらそれをそのままコードとして受け取り、 内容を実行してしまいます。

そこで、出力時にエスケープをかけてあげることでコードとしてではなく、文字列としてタグを受け取ってくれるので上記のように、alertが実行されるようなことは無くなります。

解決策

  • viewの出力箇所を {{ }} でくくってあげることで解消、対策が自動的に行われます。

これはLavravelのviewであるbladeの仕組みで、コントローラから受け取ったデータを出力する際に {{ $message }}のように出力すると、自動的にhtmlentites関数をかけた後に出力してくれるので、XSS対策を行うことができます。

コントローラー

 $message = "<script> window.alert('hoge'); </script>"

ブレード(View)

メッセージ:{{ $message }}

このように書いてあげると、自動的にタグは文字列として変換されるのでXSS対策が行われるということになります。

また、XSS対策を行わずにむしろタグなどをそのまま実行して表示してしまいたい場合には、

{!! $message !!}

このように書いてあげると、そのままタグをタグとして実行してくれます。


おさらい

  • XSSとは入力値にjsコード等を入れてサイトやユーザーに攻撃すること
  • LaravelのXSS対策は {{ }}でくくって出力するだけ

ひとこと

  • Laravelでは {{ }}で出力を基本はせざるを得ないので意識しなくても大丈夫だと思いますが、ただ意識しなくて良いがゆえにあまり理解しようともせず、モヤモヤする部分となりがちだとおもいます。どこかのタイミングで調べてみてください。

Laravelの日本語公式ドキュメントの閲覧バージョンを指定すると、 該当バージョンへ自動遷移してくれるChromeアプリを作成したので、ぜひ!

bit.ly