diwao日記

JavaScriptのオブジェクト（連想配列）をjsonファイルとしてダウンロードする

Sun, 25 Jun 2017 16:26:03 +0900

JavaScriptだけでファイルのダウンロードなんてできっこない、そういうのはバックエンドの領分でしょ。そう思っていた時期が私にもありました。しかし先日、実はできるということがわかったので、今回はJavaScriptだけでjsonファイルをダウンロードするのに挑戦したいと思います。

応用すれば複数のapiからデータを取得して、jsで合体させてから1ファイルとしてダウンロードなんてこともできてしまう！　夢が広がりますね。

Blobオブジェクトを作る

早速ですが、ダウンロードファイルを作るためにはBlobオブジェクトというものを使います。オブジェクトの作り方は次の通り。

const blob = new Blob(blobParts[, options]);

MDNのドキュメントによると、blobPartsの方にファイル化したいデータを渡し、optionsでファイル形式を指定するみたいですね。今回はオブジェクト形式のデータをjsonファイルとしてダウンロードしたいので、コードはこんな感じ↓になります。

const data = {
  name: 'diwao',
  url: 'http://diwao.com'
};

const blob = new Blob([JSON.stringify(data, null, '  ')], {type: 'application\/json'});

上のコードのblobをconsole.logで見てみるとこうなってました。

Blob {size: 50, type: "application/json"}

ちゃんとオブジェクトは作れたみたいですね。

ダウンロード用のURLを作る

さて、続いてはURL.createObjectURLメソッドを使って、ファイルをダウンロードするときに必要となるURLの生成をやっていきましょう。

URL.createObjectURLメソッドは、FileオブジェクトかBlobオブジェクトを引数として受け取り、受け取ったオブジェクトを表すURLを生成します。コードにするとこうですね。

const url = URL.createObjectURL(blob);

あとはここで作ったurlをa要素に設定し、download属性を利用すればダウンロードできるようになります。

デモ

実際にファイルダウンロードを実行できるデモを作ってみました。input要素に入力した内容をjsonファイルとしてダウンロードできる、というものです。

See the Pen file download sample by diwao (@diwao) on CodePen.

MacのChrome(59)、Safari(10.1.1)で動作確認済み。FireFoxは動きませんでした。MDNのドキュメントにも、BlobはJavaScriptネイティブなフォーマットではない、URL.createObjectURLは実験段階の機能であるなどの記述があったので、まだ実際の案件で使うのは難しいかもですね。試してないけどIEは動かなさそう……。

とはいえ、利用ブラウザが限定された管理画面などでは使いどころあると思うので、こういうこともできるというのは覚えておいて損はないかと。

参考

息子氏「タミヤロボットスクール先行テスト体験会vol.1」でロボットプログラミングを楽しむの巻

Fri, 23 Jun 2017 10:43:23 +0900

子供向けのプログラミング勉強会「タミヤロボットスクール先行テスト体験会」に息子と一緒に参加してきました。参加したといっても主役は子供なので親の私は見てるだけ。

キャタピラのついたラジコンみたいなロボットをプログラミングで動かすっていう、キッズならワクワクすること間違いなしのやつ。案の定、息子めちゃ楽しんでました。イベントのダイジェスト動画（20秒くらい）作ってみたのでよかったらどうぞ。

マジカルコンパス主催

今回のイベントは、一般社団法人マジカルコンパスが主催したもの。マジカルコンパスは子供向けにプログラミング学習の普及活動を行っている団体です。長町（仙台市）にイベントスペースがあり、そこでScratchやIchigoJamなど、いろいろなツールを使ったプログラミングのワークショップなどを開催しているとのこと。

一般社団法人マジカルコンパス ― Magical ComPath

この間参加したIchigoJamのワークショップも同じ場所での開催でして、その時に世話になったPCN仙台の方が今回もスタッフをしていたのでサポートも万全でした。感謝。

イベント概要

ロボットとは何か

イベントの始まりは、まずロボットってなんだろうというお話から。今日これから自分たちが作るものはなんなのか、世の中のどんなところで使われているのかといったことを知る。これすごく大事なことですね。

我々世代で「ロボット」といえばPepperくんみたいな人型をイメージする人が多いと思いますが、いまのロボットは人型とは限りません。例えばエレベーターは、ボタンを押すとその階まできてくれて、行きたい階を押すとそこまで運んでくれる。例えばゆりかもめは、自動運転で動いており、強風だったら勝手に止まったりもする。このように、何らかの指示や情報を受け取り、それに応じて勝手に動いてくれるものがロボットなのだと。

共通するのはinとoutがあること。そして、ロボットを動かすためにはinとoutの間にコンピュータとプログラムが必要となる。先ほど、指示や情報に応じて「勝手に動く」とあったが、実はそれはロボットが勝手にやっているのではなく、判断するためのプログラムを人が書いている。この勉強会では、そのプログラムとoutの動きの部分を作っていく。

といった具合に、順を追ってロボットのプログラミングをするとはどういうことか、を子供にもわかる言葉や表現で説明してくれていました。

こうやって仕組みを知っておくってすごく大事で、これを知ってやるのと知らないでやるのとでは後の理解度が全然変わってくると思います。初学者向け、子供向けとしては理想的な進め方だなと思いました。

座学の後は、実際に手を動かしてどんどんロボットを動かしていきます。ちなみにロボットは一人一台最初から完成品が用意されているのですが、これらは全てスタッフさんの手作りだそうです。結構作るの大変そうなのに人数分とかすごい🤖

ロボットを動かしてみる

まず最初はロボットを前へ動かすプログラムから。キーボードをロボットにつないでコマンドを入力すると前進しを始めますが、動いたはいいものの今度は延々と進み続けて止まらなくなってしまいます。子供たちも軽くパニック。

人間だったら壁にぶつかりそうになったとき自らの判断で止まりますが、ロボットは命令を忠実に実行するので、壁にぶつかってもなお前に進み続けてしまいます。じゃあ止めるためにはどうするか？　そう「止まれ」という命令が必要ですね、って流れになるわけです。こうやって、あえて失敗を経験させるのもまたすごく大事。

そのあとは、前へ進んで1秒後に止まるなど、複数の動作をまとめて実行させたり、プログラムを保存してキーボードがなくても動くように、といったことをやってました。

じゃんけんゲーム

一通り動かし方を学んだら次はゲームで対決です。まず最初はじゃんけんゲーム。ぐるぐるとロボットをその場で回転させるプログラムを組み、グーチョキパーと書いてある紙の上で動かしてじゃんけんをするというもの。

勉強のためのプログラミングってあまり面白くないし継続しにくいけど、こうしてゲームをするとか、何か目的があるプログラミングはやっていて楽しいし創意工夫も生まれてきやすいですよね。

ここまでGOカート

最後はスタート地点から動かして、目印と目印の間の狙った場所にロボットを止められるかどうかを競うゲーム。何回挑戦してもいいし、まずは動かしてみてその都度調整していこうぜっていうスタンス。

目印手前で止まってしまった時には「半分くらいまで進んだね。じゃあもっと先で止めるにはどうしたらいいだろう？」とか、答えは言わずに子供たち自身に考えさせる感じ。子供たちは子供たちで、そう言われて考えた仮説がピタッとはまった時にめっちゃ嬉しそうでした。これは子供の考える力を養ういいゲームだなと思いましたです。

正式なスクールは来年開講予定

今回は「先行テスト体験会」というものなので一回限りでおしまいでしたが、2018年の4月に正式なものとして改めてスクールが始まるそうです。また、正式なスクールの開始に先駆けて、今年の10月から全6回の講座も開催予定とのこと。

今回参加してうちの息子は相当楽しかったらしく、また次も行きたいというとりますので、10月のやつは多分また参加すると思います。まぁロボットプログラミングとか楽しくないわけがないですよね。自分が子供のときにこういうのあって欲しかった。いまのキッズたちが羨ましいぜ！

Vue.jsのチュートリアルを進めていたらcomponentのところでハマった話

Thu, 22 Jun 2017 22:31:22 +0900

ここ最近管理画面系のサイトを作ることが多く、そろそろフレームワークでも導入したいなという気持ちが高まってまいりました。ReactやAngularをバリバリ使いこなせたら素敵だなと思いつつも、実際にそれらが必要になるほど大規模な開発ってあまりないんですよね。もっと簡易的なもので事足りちゃう。

というわけでVue.jsのお勉強を始めたのですが、しょっぱなのチュートリアルで詰まったところがあったので、同じような境遇に陥った人のため、そして自分自身のメモのために解決方法を書いておこうと思います。

ハマったところ

Vue.jsを勉強し始めた人が最初に出会うであろう公式サイトのチュートリアル、はじめにの「コンポーネントによる構成」のところ。書いてある通りに

<ol>
  <todo-item></todo-item>
</ol>

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
});

とやってもVue.jsによるレンダリングが行われない……。consoleにエラーも出ないので原因が分からずしばらくハマりました。

解決方法

なんでだろうなと思ったら公式サイトのコンポーネントの項目に理由が書いてありました。

一度登録すると、コンポーネントはカスタム要素として親のインスタンスのテンプレートで使用できます。コンポーネントが root の Vue インスタンスをインスタンス化する前に登録されているか確認してください。 via - コンポーネント - Vue.js

ここに書いてある通り、コンポーネントを使うためには、その親をVueインスタンス化しておく必要があったみたいです。

これに従ってHTML側でidを振り

<ol id="list">
  <todo-item></todo-item>
</ol>

jsにインスタンス化する処理を追記します。

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
});

// ここ追記
new Vue({
  el: '#list'
});

これでVueのコンポーネントが動くようになりました！

それにしてもVue.jsは日本語のドキュメントがあっていいですね。サイトも見やすいしとっつきやすい。引き続きチュートリアル進めて何か作ってみるところまでやってみたいと思います。

Vue.js

nvmで不要なバージョンのNode.jsを削除する方法

Fri, 16 Jun 2017 23:57:56 +0900

nvmでインストールするNode.jsのバージョンを間違えてしまった。あるあるですね。

そのまま残しておいても害があるわけではないですが、かといって意味もないので削除してキレイにしておきましょう。削除方法はターミナルで下記のコマンドを実行するだけでOKです。

$ nvm uninstall 削除したいバージョン

例えば、v5.4.1を削除したい時は$ nvm uninstall 5.4.1となります。削除されたかどうか確認したい時は$ nvm lsでどうぞ。

[CSS] ホバーすると下線がニュっと伸びるアニメーションの作り方

Thu, 15 Jun 2017 21:58:31 +0900

メニューなどをホバーするとボーダーがアニメーションしつつニュっと伸びていく演出、最近よく見かけますよね。ちょっとした小技なんだけど、見かけると「お、やるじゃん」と思わせるアイツ。今日はこれの作り方を書いてみたいと思います。

変化させるのは擬似要素

このアニメーション、実現する方法はいろいろあると思うのですが、今回は::after擬似要素を使う形でやっていきます。コードの説明に入る前に、どうやってアニメーションを実現させるのか、まずはその考え方、流れをみていきましょう。

まずはホバーさせる要素を用意します。

次に、その要素の中に何も中身を持たない（content: '';）::after擬似要素を作ります。さらに、この擬似要素に形と色を与えて下線のベースを作ります。

この::after擬似要素をホバーさせるテキストの左下に配置します。

ホバーに合わせて::after擬似要素のwidthの値を変化させることで線の伸び縮みを実現することができる、という寸法です。

超ざっくり説明だけどなんとなく仕組みはわかったはず。

サンプルコード

では実際にコードを見ていきましょう。まずhtmlはシンプルにこんな感じ↓のものを用意。アニメーションするメニューという想定なのでaタグにしてみました。

<a class="underline" href="/">ホバーしてね</a>

そして、下線アニメーションのスタイルがこちら↓

.underline {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}

.underline::after {
  background-color: tomato;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
}

.underline:hover::after {
  width: 100%;
}

::after擬似要素のheight: 1px;は線の太さ。width: 0;とすることで、デフォルト状態ではボーダーを非表示にしています。

position: absolute;とleft: 0;、bottom: 0;で下線を.underlineの左下に配置。さらに::after擬似要素にtransitionを設定し、ホバー時にwidth: 100%;とすることで、左から右へと伸びていく線のアニメーションを実現しています。

デモ

サンプルでは左から右へのアニメーションを作りましたが、leftをrightに変えれば逆向きにできますし、bottomをtopに変えればテキストの上に線を引くこともできます。

こちらに3パターンのデモを作ってみたので良かったら実際に動きチェックしてみてください。

See the Pen ホバーで下線がアニメーション by diwao (@diwao) on CodePen.

いろいろ応用効くし使いどころも多いので、こういう作り方も覚えておくといんじゃないでしょうか。

静的なサイトにDisqusでコメント欄を設置する

Wed, 14 Jun 2017 00:48:47 +0900

このブログはHugoという静的サイトジェネレータを使って運営しています。完全に静的なHTMLなのでページの表示などは早いのですが、その反面サーバ処理を必要とする動的なコンテンツは用意されていません。

具体的にいうと、WordPressや一般的なブログサービスなら簡単に設置できるメールフォームや人気記事、コメント欄といったパーツは、Hugoの標準機能には存在していなかったりします。

そんな静的なサイトでも、簡単にコメント機能を実装できるDisqusというサービスがあります。このブログにも設置してみたので、導入方法をご紹介したいと思います。

Disqusの利用方法

まずはDisqusの公式サイトにアクセスして、「GET STARTED」をクリック。その後必要な情報を入力してアカウントを作成します。

「I want to installl Disuqs on my site」を選択。

導入するサイトの情報を入力。

プランを選びます。有料プランもありますがとりあえずコメント機能を使うだけなので無料のBasicを選択。

続いてDisqusを設置するサイトの種類を選択します。WordPress、Tumblrなどなど様々なCMSやサービスのアイコンが並びますが、今回は静的サイトへの設置なのでわき目もくれず一番下にある「I don’t see my platform liseted, install manually with Universal Code」を選びます

あとは画面に表示されたコードをコピーし、htmlファイル内のコメントを表示したい箇所にペーストするだけでOKです。

この通り、あっという間にコメント欄を設置することができました！

これだけでPCにもSPにも対応してます。いやー、簡単&便利ですね。これでコメントし放題。せっかくなので活用してやってください。コメントお待ちしておりますー。

.htaccessで404ページを設定する

Tue, 13 Jun 2017 00:42:09 +0900

Hugoでテーマを作ると自動的に404.htmlという404エラー用のhtmlファイルが生成されます。こいつは読んで字のごとく404エラー、つまりサイト上で存在しないURLにアクセスされた時に表示するページのことです。

このファイルを表示させるための設定方法はいくつかありますが、今回は.htaccessで設定してみました。

設定方法

.htaccessファイルをエディタで開いて次の一文を追記します。

ErrorDocument 404 /404.html

追記して保存したら、このファイルをサーバのドキュメントルートにアップすればOKです。404.htmlも同じくドキュメントルートに置いてあげましょう。

その後、http://diwao.com/hogehoge.htmlなどの存在しないurlにアクセスしてみると

この通り、ちゃんと404ページを表示されるようになりました！

ちなみに、一部のレンタルサーバなどでは.htaccessが使えないところもあるみたいなので、まずは自分の使ってるサーバで.htaccessが使えるかどうか確認してみてくださいね。

Pure CSSを使ってブログのテーマをリニューアルしました

Mon, 12 Jun 2017 23:38:55 +0900

思い立ってブログのテーマをリニューアルしました。前回は完全自作だったけど今回はCSSフレームワークを使ってみました。Bootstrapくらいしか使ったことなかったけど色々あるんですね。

CSSフレームワーク

CSSフレームワークと一括りにしてみても、その中身は千差万別。いろんなコンポーネントを兼ね備えた壮大なやつもあれば、必要最低限のスタイルだけに絞ったシンプルなやつもあります。

このブログだと全然本格的なものはいらなくて、グリッドレイアウトとベースになるいい感じのスタイルがあればそれで十分。という心持ちでいろいろ調べてみたところ、この辺が良さげかなと。

Milligramの雰囲気が好きだったのですが、画面幅に応じてグリッドの段組を変更することができないみたいだったので断念。その他も色々試してみた結果、いちばん求めているものに近そうなPure CSSにしてみました。Yahooブランドで安心感もありますし。

See the Pen Pure CSS by diwao (@diwao) on CodePen.

こんな感じに.pure-【なんちゃら】って形のクラスをつけていくだけでレイアウトやパーツが作れます。今回はレスポンシブ用のグリッドCSSも読み込んで、画面幅に応じて段組が可変するようにしてみました。

▼PC

▼タブレット

▼スマホ

このようなレイアウトも簡単に作れちゃいます。こりゃ開発の時短にもなりますわ。

フォント

フォントはGoogle Fonts+日本語早期アクセスを使ってみました。さわらびゴシックというやつ。Noto Sans Japaneseと迷ったけど、実際当ててみてさわらびの方が読みやすいと思いまして。

Webフォント=重いってイメージがあったのですが、天下のグーグル先生だからなのか意外と表示も速い気がします。

Google Fonts + 日本語早期アクセス • Google Fonts + Japanese Early Access

アイコン

フッターのアイコンはIconfinderというサイトのものを使わせていただきました。Web系のアイコンが充実してるしSVG形式も使えるのが嬉しい。

Iconfinder - 1,725,000+ free and premium icons

そんなこんなでいろんなツールや素材にお世話になりつつの全面リニューアルでした。全体的に前よりもちょっとシャレオツになった気がします。CSSフレームワークって偉大ですね。デザインできない人にとっては強い味方だなと改めて感じました。

HTML5の機能でバリデーションを設定し、その結果をJavaScriptで取得する

Sun, 11 Jun 2017 23:27:37 +0900

HTML5ではフォーム機能が大幅に拡張されていて、標準機能だけでもそれなりのバリデーション（入力チェック）を実装できます。

標準機能でバリデーションを設定した際、そのバリデーションが通っているかどうかで処理を分岐させたい、ということはよくあると思います。その時に使えるのがJavaScriptのcheckValidityメソッドです。

formに対して実行

checkValidityメソッドはform要素に対して実行すると、その時のフォーム全体の入力状況を見てすべてバリデートが通っていればtrue、そうでなければfalseを返します。

例えば、以下のフォームがあったとします。

<form id="form">
  <div>
    名前：<input id="name" type="text" required>
  </div>
  <div>
    年齢：<input id="age" type="number">
  </div>
  <div>
    メール：<input id="email" type="email">
    </div>
</form>

この時、何も入力しないままform要素に対してcheckValidityを実行すると、<input id="name" type="text" required>が必須項目となっているため、ここが不正となりfalseを返します↓

const form = document.getElementById('form');
console.log(form. checkValidity());  //false

form内のすべての要素でバリデーションが通ったときだけtrueを返します。

input要素を指定して実行

checkValidityメソッドはformだけではなく、個別のinput要素でも実行することができます。先ほどと同じフォームに対して、i何も入力しない状態で以下のJavaScriptを実行したとします。

const form = document.getElementById('form');
const age = document.getElementById('age');

console.log(form.checkValidity()); //false
console.log(age.checkValidity()); //true

この時、<input id="name" type="text" required>の必須項目があるため、フォーム全体としてはfalseとなりますが、<input id="age" type="number">単体としてはtrueを返します。

サンプル

例に挙げたフォームで、実際にcheckValidityの挙動を確認できるデモを作りました。「フォームをチェック」ボタンをクリックするとformに、「ageをチェック」ボタンをクリックするとidがageのinput要素に対してcheckValidityを実行した結果を返します。

See the Pen checkvalidateサンプル by diwao (@diwao) on CodePen.

参考

データフォームの検証 - ウェブ開発を学ぶ | MDN

Hugoの自作テーマを配布できる形にする

Sat, 10 Jun 2017 10:58:45 +0900

このブログはHugoという静的サイトジェネレータで構築しています。テーマも自作しているのですが、よくよく調べたらテーマをちゃんと管理できてなかったみたいなので、いろいろその辺の構造などを見直しました。以下、やったことをメモ。

themesディレクトリを使ってなかった

Hugoでテーマを使うときは、ルート直下にある「themes」というディレクトリの中にテーマファイルを置き、「config.toml」で使うテーマを指定する、というやり方が一般的なやり方だそうです。ところが、私はそれを知らずにルート直下にある「archetypes」や「layouts」ディレクトリの中に直接ファイルを置いて、それをガシガシ編集する形でサイトを作っていました。

どうやら、このルート直下にある「archetype」や「layouts」ディレクトリの中にファイルをおくと、設定しているテーマよりも優先的に使用されるという仕組みらしく、テーマの一部を上書きたい時に使うのが本来の用途のようです。

私のやり方でも動作に問題はないのですが、このままだとテーマの切り替えができなかったり、管理が色々とやりにくそうなので、本来あるべき形にファイルの構造を整理してあげよう、というのが今回の目的です。

必要なファイルをまとめる

では早速進めていきます。まずはHugoで管理しているのサイトのルート（「static」や「archetypes」ディレクトリや「config.toml」などが置いてあるディレクトリ）の直下に「themes」という名前のディレクトリを作ります。

$ mkdir themes

作成したthemesディレクトリに移動し、自作テーマ用のディレクトリを作成します。今回は仮に「my_theme」という名前にします。

$ cd themes
$ mkdir my_theme

my_themeディレクトリの中に、テーマに必要なファイルを入れていきます（コピーではなく移動させました）。実際にディレクトリに放り込んだのは以下のファイル。ちなみにこれはあくまで私の環境の場合なので、自作テーマの作り次第ではファイル数など変わってきます。

/archetypes/default.md
/layoutsディレクトリの中身全部
/static/css/ディレクトリの中身全部
/static/jsディレクトリの中身全部
/static/image/内のテーマに関する画像ファイルだけ

そして最後にmy_themeディレクトリ直下にtheme.tomlファイルを新規で作成。中身はHugo Zenを参考にこんな感じにしてみました。

name = " my_theme"
license = "MIT"
licenselink = ""
description = "my_theme is a sapmle theme."
tags = ["blog"]
features = ["blog", "themes"]
min_version = 0.1

[author]
    name = "diwao"
    homepage = "http://diwao.com/"

テーマを適用する

ここまでの流れでテーマを使用する準備ができたのですが、このままではまだ「my_theme」は適用されていません。このサイトでどのテーマを使うのかを記述する必要があります。といっても簡単で、サイトのルートにある「config.toml」に

theme = 'my_theme'

こんな感じにtheme = 'テーマ名'と追記してあげるだけでOKです。これでテーマが管理しやすく、また別のサイトに適用させることも簡単になり扱いやすくなりました。

Kindleで購入した期間限定無料お試し版を削除する方法

Fri, 09 Jun 2017 01:05:56 +0900

Kindleの期間限定無料お試し版でつい色んなマンガをDLしてしまう……あるあるじゃないでしょうか。無料で読んでみて、面白かったら続きを買うってジャッジできるのでありがたいのですが、ひとつだけ困ったことがあります。

それは期間を過ぎたら読めなくなってしまう、のはまあ当然だと思うのですが、読めない状態のままサーバ上にその書籍のデータが残り続けること。これが邪魔で消したいなと思ったのですが、やり方ちょっとわかりにくかったのでメモっておきます。

削除は「コンテンツと端末の管理」から

まずはAmazonにログインし、アカウントサービスから「コンテンツと端末の管理」をクリックします。

購入したKindle本がずらーっと出てきます。検索窓に「期間限定」と入力して絞り込みましょう。

削除したい本をチェックをつけて削除ボタンを押せばデータを完全に削除できます。

なお、削除のチェックは一度に最大10件までしかつけられません。数が多い場合は、面倒ですが10件ずつ地道に削除していきましょう。

間違って有料で買ったやつを削除しちゃうと、おそらく再度購入が必要になってしまうので削除する時はくれぐれも慎重に。

Fire HD 8 タブレット (Newモデル) 16GB、ブラック

posted with カエレバ

Amazon

ChromeのシークレットウインドウでFlashを有効にする方法

Thu, 08 Jun 2017 00:02:30 +0900

調べたけどなかなか情報が見つからなかったのでメモ。ChromeのシークレットウインドウでFlashを実行させる方法です。

Chromeの設定画面(chrome://settings/)を開く
画面下の「詳細設定を表示…」をクリック
プライバシーという項目の「コンテンツの設定…」ボタンをクリック
ちょっと下にスクロールするとFlashという項目があるので、そこにある「例外の管理…」ボタンをクリック
「Flash 例外」ウインドウの下の方にシークレットモードセッションにのみ適用される云々と書かれたボックスがあるので、そこにFlashを有効にしたいURLを入力する
完了ボタンをクリックでOKです

以上！

※Mac OS X用バージョン 58.0.3029.110 (64-bit)で確認

秘密 THE TOP SECRET [DVD]

posted with カエレバ

生田斗真松竹 2017-01-06

Amazon

[JavaScript] PC内の画像ファイルをブラウザに表示する

Wed, 07 Jun 2017 11:22:14 +0900

前回の記事では、PC内のjsonファイルを読み込んで画面に表示するという処理をつくってみました。

[JavaScript] サーバ処理を介さずPC内のjsonファイルを画面に表示する - diwao日記

今回は前回のコードをちょっとアレンジして、PC内の画像ファイルを読み込んでブラウザに表示するというの処理を作ってみたいと思います。では早速いってみよー。

readAsDataURLでファイルの内容を取得する

ファイルの読み込みにはFileReaderオブジェクトを使います。input[type=“file”]要素でFileオブジェクトを取得するんでしたね。この辺は前回と同じなので細かい説明は割愛。

さて、前回はファイルの内容をテキストとして表示しました。読み込むファイルの中身がテキストならこれで良いのですが、今回は画像を表示するのでそのままではダメそうです。そう、imgタグのsrcに設定するファイルのパスが必要になることは想像に難くありません。

srcに設定するパスを取得するのにはFileReaderオブジェクトのreadAsDataURLメソッドを使います。これは読み込んだファイルを示すdata: URL の文字列（base64 エンコーディングされたもの）を取得するメソッドです。取得した結果はFileTeadオブジェクトのresultプロパティに格納されます。

コードとサンプル

と、いったことを踏まえて作ったサンプルがこちら。画像ファイルを選択すると、その画像が画面に表示されるという簡単なものです。

<input type="file" id="file" class="btn" accept="image/*">
<div id="result" class="result">ここに画像が表示されます</div>

window.onload = () => {
  const file = document.getElementById('file');
  const result = document.getElementById('result');
  const reader = new FileReader();

  // ファイルが選択されたらファイルのdata:URL文字列を保存
  file.addEventListener('change', function(e){
    reader.readAsDataURL(e.target.files[0]);
  });

  // ファイルの読み込みが終わったら内容を表示
  reader.onload = function(e){
    result.innerHTML = `<img src="${e.target.result}" alt="">`;
  };
};

See the Pen フロントから画像を読み込む by diwao (@diwao) on CodePen.

input要素で選択した画像ファイルをreadAsDataURLで取得し、その値をimgタグのsrcに突っ込んで画像を表示させています。アップロード前のプレビューとか、何かと使い所はありそうなので覚えておいて損はないかと。

参考

[JavaScript] サーバ処理を介さずPC内のjsonファイルを画面に表示する

Tue, 06 Jun 2017 00:02:34 +0900

jsonといえばajaxで受け取ってフロントでゴニョゴニョするデータというイメージだったのですが、ローカルから読み込んでフロントだけで扱うこともできるんですね。割と最近知って色々使い所ありそうだなと思ったのでメモっておこうと思います。

FileReaderを使う

ざっくりとサンプルを作ってみました。PC内jsonファイルを選択すると、そのファイルの中身を表示するというものです。ソースコードはこちら。

<input type="file" id="file">
<div id="result">ここに結果が表示されます</div>

window.onload = () => {
  const file = document.getElementById('file');
  const result = document.getElementById('result');
  //  FileReaderオブジェクトを生成
  const reader = new FileReader();

  // ファイルが選択されたらFileReaderオブジェクトにファイルをテキストとして保存
  file.addEventListener('change', function(e){
    reader.readAsText(e.target.files[0]);
  });

  // ファイルの読み込みが終わったら内容を表示
  reader.onload = function(e){
    result.innerText = e.target.result;
  };
};

サンプルはこちら↓

See the Pen フロントだけでローカルのjsonファイルを読み込む by diwao (@diwao) on CodePen.

ポイントはFileReaderオブジェクト。これを使うことでユーザのPC内にあるファイルをWebから非同期的に読み込むことができるようになります。

処理の概要

大体の流れはコード内のコメントに書いた通りなのですが、もう少し細かい部分について分解して説明してみたいと思います。

input要素からFileオブジェクトを取得

// ファイルが選択されたらFileReaderオブジェクトにファイルをテキストとして保存
file.addEventListener('change', function(e){
  reader.readAsText(e.target.files[0]);
});

ここでは、input要素に対してchangeイベントを設定しています。input要素の値が変わったら、すなわちファイルが何か選択されたら何らかの処理を実行するというものですね。

で、実際に実行している処理がこちら↓

reader.readAsText(e.target.files[0]);

ここで出てくるe.targetとはつまりinput要素のことで、e.target.filesはFileListオブジェクトを意味します。FileLIstオブジェクトにはユーザーが選択したファイルを示すFileオブジェクトが含まれており、複数ファイルを選択していればそれらを一気に扱うこともできるようです。

今回は1ファイルしか選択しない想定なので、Fileオブジェクトがひとつという前提でe.target.files[0]とし、FileListオブジェクトの最初のデータとしてFileオブジェクトを取得しています。そうやって取得したFileオブジェクトをFileReaderのreadAsTextメソッド渡しているというのがこの部分の処理でした。

ちなみに、大体お察しかと思いますがreadAsTextメソッドは読んで字のごとくファイルの内容を文字列として保存するメソッドです。

ファイル読み込み時の処理にはonloadを使う

// ファイルの読み込みが終わったら内容を表示
reader.onload = function(e){
  result.innerText = e.target.result;
};

ここではファイルの読み込みが終わったら、その内容を表示するといった処理をしています。

FileReader.onloadに設定した処理はファイルの読み込みが成功したときに発火します。読み込みが完了したときというのはつまり先ほど説明したreadAsTextメソッドの処理が完了したらということですね。

また、この関数の中のe.targetは変数readerを指しているので、e.target.resultはFileReaderオブジェクトのresultプロパティということになります。resultプロパティはファイルの読み込みが終了したあとに有効となるもので、ここではreadAsTextメソッドの結果、つまりファイルの内容を文字列として格納しています。

なので、それをdomのinnerTextに代入すればファイルの中身を画面上に表示できるというわけです。

jsonファイルならデータとして扱うことも可

読み込んだファイルをjsonファイルであれば、readAsTextメソッドでテキスト化したデータをJSON.parseすることで自由に扱うことも可能です。読み込んだデータをサーバに送信すればインポート機能みたいなものも作れたりするでしょうし、色々と応用が利きそうな気がします。

参考

Youtubeの埋め込み動画をレスポンシブ対応させる方法

Mon, 05 Jun 2017 19:19:08 +0900

Youtubeの埋め込み動画を使ったサイトの構築はよくありますが、画面幅に応じて拡大縮小させる、いわゆるレスポンシブ対応するにはちょっと工夫が入ります。今回はそのやり方を紹介。

max-widthだと上下に余白が出る

動画をレスポンシブ対応させようとしてよくやりがちなのが、画像と同じようにmax-width: 100%;とするやり方。

<div class="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/S5st_BGFpLI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

.video {
  width: 100%;
}

.video iframe {
  max-width: 100%;
}

See the Pen Youtube埋め込み動画レスポンシブデモ1 by diwao (@diwao) on CodePen.

これでも埋め込み動画を縮小させることは可能なのですが、画面サイズが大きくなった時に動画が大きくなっていかないですし、狭めた時にも上下に黒い余白ができてしまったりしてキレイに表示させることができません。

iframeのpositonをabsoluteに

先ほどの問題を解決する方法はちょっと複雑で、iframeの親要素を横幅に対して可変させるように作り、かつiframeをその中めいいっぱい広がるようにしてレスポンシブ対応を実現させます。完成形のコードはこちら↓

<div class="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/S5st_BGFpLI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

.video {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

.video iframe {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

ひとつづつ見ていきましょう。まずiframeの親要素である.videoから。width: 100%;とし、画面の横幅に応じてwidthが可変するようにします。そしてpadding-top: 52.65%;がポイントになるのですが、これは埋め込み動画の高さを確保するための指定です。

上下のpaddingを%で指定した時、その値は親要素のwidthを基準に計算される、という特徴があります（詳しくはこちら → 上下のpaddingとmarginの%指定は親要素の横幅を基準に計算される - diwao日記）。

これを応用すると、画面幅に応じて高さも可変する要素を作ることができまして、今回はそれを使います。 Youtube埋め込み動画の縦横比は16:9 なので、横幅を100%とした時の高さは9/16 * 100 = 56.25%となります。なのでpadding-top:56.25%;で動画の高さが確保できるというわけです。

このままだとpadding-topの分、子要素であるiframeが下に押し出されてしまうので、.videoにpostiion: relative;、iframeにpositon: absolute;とtop: 0;、left: 0;を指定してiframeの位置を.videoの左上に重ねてあげます。

あとはiframeにwidth: 100%;、height: 100%;とすれば、iframeが.videoをぴったりと覆う形となり、期待通りレスポンシブな動きをしてくれるようになるというわけです。

See the Pen Youtube埋め込み動画レスポンシブデモ2 by diwao (@diwao) on CodePen.

分かりやすく説明できている自信はないですが、仕組みを分かってしまえば難しいことではないので、ぜひサイト制作に取り入れてみてください。

大正義

posted with カエレバ

ポルカドットスティングレイユニバーサルシグマ/半泣きビビレコーズ 2017-04-26

Amazon

diwao日記

JavaScriptのオブジェクト（連想配列）をjsonファイルとしてダウンロードする

Blobオブジェクトを作る

ダウンロード用のURLを作る

デモ

参考

息子氏「タミヤロボットスクール先行テスト体験会vol.1」でロボットプログラミングを楽しむの巻

マジカルコンパス主催

イベント概要

ロボットとは何か

ロボットを動かしてみる

じゃんけんゲーム

ここまでGOカート

正式なスクールは来年開講予定

Vue.jsのチュートリアルを進めていたらcomponentのところでハマった話

ハマったところ

解決方法

nvmで不要なバージョンのNode.jsを削除する方法

[CSS] ホバーすると下線がニュっと伸びるアニメーションの作り方

変化させるのは擬似要素

サンプルコード

デモ

静的なサイトにDisqusでコメント欄を設置する

Disqusの利用方法

.htaccessで404ページを設定する

設定方法

Pure CSSを使ってブログのテーマをリニューアルしました

CSSフレームワーク

フォント

アイコン

HTML5の機能でバリデーションを設定し、その結果をJavaScriptで取得する

formに対して実行

input要素を指定して実行

サンプル

参考

Hugoの自作テーマを配布できる形にする

themesディレクトリを使ってなかった

必要なファイルをまとめる

テーマを適用する

Kindleで購入した期間限定 無料お試し版を削除する方法

削除は「コンテンツと端末の管理」から

ChromeのシークレットウインドウでFlashを有効にする方法

[JavaScript] PC内の画像ファイルをブラウザに表示する

readAsDataURLでファイルの内容を取得する

コードとサンプル

参考

[JavaScript] サーバ処理を介さずPC内のjsonファイルを画面に表示する

FileReaderを使う

処理の概要

input要素からFileオブジェクトを取得

ファイル読み込み時の処理にはonloadを使う

jsonファイルならデータとして扱うことも可

参考

Youtubeの埋め込み動画をレスポンシブ対応させる方法

max-widthだと上下に余白が出る

iframeのpositonをabsoluteに

Kindleで購入した期間限定無料お試し版を削除する方法