Multi Vitamin & Mineral

Multi Vitamin & Mineral です。プログラムに関することを書いております。

JavaScript

「カスタムデータ属性(data-*)」と「script タグへの JSON 埋め込み」のススメ【JavaScript で扱うデータを HTML に埋める方法2選】

ブラウザに表示されているデータは HTML 上にあり、 JavaScript から取得できるます。これはいいんです。が、ブラウザに表示されないが、JavaScript で扱いたいデータがあった場合は HTML のどこに書くのがよいのでしょう? というのが今回のテーマです。 方…

ES6 を IE11 でも動くよう変換したい。そうだ、 Babel を使おう!

IE11 でも動く JavaScript に変換したい! ES2015(=ES6) 以降の JavaScript を変換して ES5 にダウングレードする方法です。この記事で利用しているのは Babel のバージョン7です。 なお、本記事ではあえて Babel 以外のツールは含めないようにしています。 …

記事のトップに更新日時も表示する【脱jQuery】【脱sitemap.xml利用】【オリジナル】(はてなブログ改造計画)

記事のトップに更新日時も表示する方法です。 すでにたくさんの方が同様の記事を書いていますが、なんやかんやでオリジナルな実装になりました。 こちらを使いませんでした 変更内容 仕様 変更方法 HTML, JavaScript の変更手順 追加 HTML, JavaScript CSS …

上部にカテゴリーのリンクを含んだグローバルメニューを追加(はてなブログ改造計画)

ページの上部にグローバルメニューを追加する方法です。別の記事で実施方法を書きましたが、当ブログはカテゴリーを3段まで使っています。グローバルメニューでは2段まで表示させています。 カテゴリーの記事はこちらでした。 multimineral-tech.com こちら…

サイドバーのカテゴリーを階層化してパンくずを設置する(はてなブログ改造計画)

カテゴリーを階層化する方法です。以下の2点が変わります。 サイドバーのカテゴリー欄が階層構造になる。 記事上部にパンくずリストが追加される。 尚、カテゴリー欄が階層構造だけ対応し、パンくずリストは追加しないことも可能です。 こちらを使いました …

JavaScript の Promise をサクッと知っておく

はじめに Promise の目的 Promise の基本構造 Promise の基本的な使い方(形式1) 関数1 : 時間が掛かる処理 関数2 : 関数1の resolve が呼び出す処理 実行結果 エラーが発生した場合の処理を追加する(形式2) 関数3(その1) : 関数1の reject が呼び出す…