Clik here to view.
Youtubeの埋め込み動画をレスポンシブ対応させる方法
Youtubeの埋め込み動画を使ったサイトの構築はよくありますが、画面幅に応じて拡大縮小させる、いわゆるレスポンシブ対応するにはちょっと工夫が入ります。今回はそのやり方を紹介。max-widthだと上下に余白が出る動画をレスポンシブ対応させようとしてよくやりがちなのが、画像と同じようにmax-width: 100%;とするやり方。<div class="video">...
View Article[JavaScript] サーバ処理を介さずPC内のjsonファイルを画面に表示する
jsonといえばajaxで受け取ってフロントでゴニョゴニョするデータというイメージだったのですが、ローカルから読み込んでフロントだけで扱うこともできるんですね。割と最近知って色々使い所ありそうだなと思ったのでメモっておこうと思います。FileReaderを使うざっくりとサンプルを作ってみました。PC内jsonファイルを選択すると、そのファイルの中身を表示するというものです。ソースコードはこちら。&l...
View Article[JavaScript] PC内の画像ファイルをブラウザに表示する
前回の記事では、PC内のjsonファイルを読み込んで画面に表示するという処理をつくってみました。[JavaScript] サーバ処理を介さずPC内のjsonファイルを画面に表示する -...
View ArticleClik here to view.
ChromeのシークレットウインドウでFlashを有効にする方法
調べたけどなかなか情報が見つからなかったのでメモ。ChromeのシークレットウインドウでFlashを実行させる方法です。Chromeの設定画面(chrome://settings/)を開く画面下の「詳細設定を表示…」をクリックプライバシーという項目の「コンテンツの設定…」ボタンをクリックちょっと下にスクロールするとFlashという項目があるので、そこにある「例外の管理…」ボタンをクリック「Flash...
View ArticleClik here to view.
Kindleで購入した期間限定 無料お試し版を削除する方法
Kindleの期間限定無料お試し版でつい色んなマンガをDLしてしまう……あるあるじゃないでしょうか。無料で読んでみて、面白かったら続きを買うってジャッジできるのでありがたいのですが、ひとつだけ困ったことがあります。それは期間を過ぎたら読めなくなってしまう、のはまあ当然だと思うのですが、読めない状態のままサーバ上にその書籍のデータが残り続けること。これが邪魔で消したいなと思ったのですが、やり方ちょっと...
View ArticleHugoの自作テーマを配布できる形にする
このブログはHugoという静的サイトジェネレータで構築しています。テーマも自作しているのですが、よくよく調べたらテーマをちゃんと管理できてなかったみたいなので、いろいろその辺の構造などを見直しました。以下、やったことをメモ。themesディレクトリを使ってなかったHugoでテーマを使うときは、ルート直下にある「themes」というディレクトリの中にテーマファイルを置き、「config.toml」で使...
View ArticleClik here to view.
HTML5の機能でバリデーションを設定し、その結果をJavaScriptで取得する
HTML5ではフォーム機能が大幅に拡張されていて、標準機能だけでもそれなりのバリデーション（入力チェック）を実装できます。標準機能でバリデーションを設定した際、そのバリデーションが通っているかどうかで処理を分岐させたい、ということはよくあると思います。その時に使えるのがJavaScriptのcheckValidityメソッドです。formに対して実行checkValidityメソッドはform要素に...
View ArticleClik here to view.
Pure CSSを使ってブログのテーマをリニューアルしました
思い立ってブログのテーマをリニューアルしました。前回は完全自作だったけど今回はCSSフレームワークを使ってみました。Bootstrapくらいしか使ったことなかったけど色々あるんですね。CSSフレームワークCSSフレームワークと一括りにしてみても、その中身は千差万別。いろんなコンポーネントを兼ね備えた壮大なやつもあれば、必要最低限のスタイルだけに絞ったシンプルなやつもあります。このブログだと全然本格的...
View ArticleClik here to view.
.htaccessで404ページを設定する
Hugoでテーマを作ると自動的に404.htmlという404エラー用のhtmlファイルが生成されます。こいつは読んで字のごとく404エラー、つまりサイト上で存在しないURLにアクセスされた時に表示するページのことです。このファイルを表示させるための設定方法はいくつかありますが、今回は.htaccessで設定してみました。設定方法.htaccessファイルをエディタで開いて次の一文を追記します。Err...
View ArticleClik here to view.
静的なサイトにDisqusでコメント欄を設置する
このブログはHugoという静的サイトジェネレータを使って運営しています。完全に静的なHTMLなのでページの表示などは早いのですが、その反面サーバ処理を必要とする動的なコンテンツは用意されていません。具体的にいうと、WordPressや一般的なブログサービスなら簡単に設置できるメールフォームや人気記事、コメント欄といったパーツは、Hugoの標準機能には存在していなかったりします。そんな静的なサイトでも...
View ArticleClik here to view.
[CSS] ホバーすると下線がニュっと伸びるアニメーションの作り方
メニューなどをホバーするとボーダーがアニメーションしつつニュっと伸びていく演出、最近よく見かけますよね。ちょっとした小技なんだけど、見かけると「お、やるじゃん」と思わせるアイツ。今日はこれの作り方を書いてみたいと思います。変化させるのは擬似要素このアニメーション、実現する方法はいろいろあると思うのですが、今回は::after擬似要素を使う形でやっていきます。コードの説明に入る前に、どうやってアニメー...
View ArticleClik here to view.
nvmで不要なバージョンのNode.jsを削除する方法
nvmでインストールするNode.jsのバージョンを間違えてしまった。あるあるですね。そのまま残しておいても害があるわけではないですが、かといって意味もないので削除してキレイにしておきましょう。削除方法はターミナルで下記のコマンドを実行するだけでOKです。$ nvm uninstall 削除したいバージョン 例えば、v5.4.1を削除したい時は$ nvm uninstall...
View ArticleClik here to view.
Vue.jsのチュートリアルを進めていたらcomponentのところでハマった話
ここ最近管理画面系のサイトを作ることが多く、そろそろフレームワークでも導入したいなという気持ちが高まってまいりました。ReactやAngularをバリバリ使いこなせたら素敵だなと思いつつも、実際にそれらが必要になるほど大規模な開発ってあまりないんですよね。もっと簡易的なもので事足りちゃう。というわけでVue.jsのお勉強を始めたのですが、しょっぱなのチュートリアルで詰まったところがあったので、同じよ...
View ArticleClik here to view.
息子氏「タミヤロボットスクール先行テスト体験会vol.1」でロボットプログラミングを楽しむの巻
子供向けのプログラミング勉強会「タミヤロボットスクール先行テスト体験会」に息子と一緒に参加してきました。参加したといっても主役は子供なので親の私は見てるだけ。キャタピラのついたラジコンみたいなロボットをプログラミングで動かすっていう、キッズならワクワクすること間違いなしのやつ。案の定、息子めちゃ楽しんでました。イベントのダイジェスト動画（20秒くらい）作ってみたのでよかったらどうぞ。マジカルコンパス...
View ArticleClik here to view.
JavaScriptのオブジェクト（連想配列）をjsonファイルとしてダウンロードする
JavaScriptだけでファイルのダウンロードなんてできっこない、そういうのはバックエンドの領分でしょ。そう思っていた時期が私にもありました。しかし先日、実はできるということがわかったので、今回はJavaScriptだけでjsonファイルをダウンロードするのに挑戦したいと思います。応用すれば複数のapiからデータを取得して、jsで合体させてから1ファイルとしてダウンロードなんてこともできてしまう！...
View Article