Multi Vitamin & Mineral

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

【TIPS】CSS のみで開閉するメニューを作る

モバイル用ページのヘッダーによくあるハンバーガーメニュー。 三 です。クリックするとメニューが表示するヤツです。この開閉を JavaScript を使わずに、CSS だけで実現したいと思いまして、その TIPS の紹介です。 JavaScript を使った方が簡単かも知れま…

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

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

【はてなブログ用】カテゴリーを階層化するブログパーツを作りました【多段階層OK】【脱jQuery】

2021/03/22 : スクリプトを修正しました。内容は変更履歴をご参照ください。 サイドバーのカテゴリー部分を階層化するパーツを作りました。 はてなブログ用のカテゴリーパーツは既に何人かの方が実装されていましたが、オリジナルな実装を作成しました。多段…

inliner で JavaScript も CSS も画像も1つのHTMLファイルにできるって、マ?

「inliner」というツールの紹介です。 HTML が参照している JavaScript、 CSS 、画像などの外部ファイル、それらをまとめて1つの HTML ファイルにしてくれるツールです。 このツール、ご存知でしたか? 私は全然知らんかったです。 ニッチなツールだけれども…

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

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

nodist の利用を諦めた! そしてアンインストールが難しい!

ここ数年 nodist という Windows 用の Node.js のバージョンを管理できるツールを使っていました。大変お世話になっておりました。が、本日をもって利用を諦めました。 nodist のアンインストールはいくつか注意点があるなぁと思い、この記事を書きました。…

【TIPS】Windows の「npm」で「error cb.apply is not a function」を解消した話(nodist の利用は諦めた!)

error cb.apply is not a function というエラーに悩まされていたのでその共有です。 Windows 10 で Node.js をインストールしている前提のお話になりますのでご了承ください。 調べた中で出てきいくつかの解消方法をかき集めてまとめたので、どれかにヒット…

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

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

HTML 内のスペースや改行による「ズレ」を除去する TIPS

HTML 内のスペースや改行により「ズレ」が発生することがあります。これを除去する TIPS の紹介です。 この記事は、私が遭遇した問題と解決策の共有です。数ある「ズレ」の要因の一つであり、一つの解決方法の紹介になります。この文章を読んでいただいてい…

目次と見出しに入れ子の連番を振る(はてなブログ改造計画)

目次と見出しに入れ子の連番を追加する方法です。 見出しに「1-1」や「2-3-1」といった章や節にあたるような番号を付加し、読んでいる位置を分かりやすくすることが目的です。 変更内容 目次の変更 見出しの変更 補足)はてなブログは通常 h3, h4, h5 が使わ…

見出し(header)のデザインを変更(はてなブログ改造計画)

見出しのデザインを変更する方法です。ここで言う見出しとは <h3>...</h3> などのタグを指します。まあ、 CSS をちょい足ししただけですけど。 変更内容 補足)はてなブログは通常 h3, h4, h5 が使われるようです 変更方法 変更手順 追加CSS 説明 変更内容 記事内の見…

レスポンシブに対応する(はてなブログ改造計画)

レスポンシブに対応する方法です。 とは言え、ゼロからレスポンシブ対応は大変ですので、レスポンシブのテーマを利用することを前提に、そのレスポンシブの機能を利用する設定を追加する方法について書いています。 ですので、今回行うレスポンシブは、スマ…

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

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

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

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

貼り付けた画像に枠と影を追加(はてなブログ改造計画)

記事中に貼り付けた画像に枠と影をつけようかな、と思ったので、今回はそう改造する方法です。 変更方法 変更手順 追加CSS 変更結果 説明 変更方法 記事中に貼り付けた画像を対象として枠と影をつけます。 変更手順 管理画面から以下のようにたどります。 デ…

強調文字に蛍光マーカーを引く(はてなブログ改造計画)

強調文字が太字だけだと目立ちっぷりが足りないので、蛍光マーカーを引いたような見た目に改造する方法です。 変更方法 変更手順 追加CSS 変更結果 説明 変更方法 エディタの「B」ボタンで強調した部分の装飾です。 Markdown で書くと **強調** の部分に当た…

当サイトのURLが変更になりました。はてなブログの独自ドメイン化の話

URL が変わりました 当ブログのURLが変更になりました。 旧)https://hiranoon.hatenablog.com 新)https://multimineral-tech.com/ 旧 URL は、当面は新URLにリダイレクトされます。しばらくはどちらからもアクセスできますが、しばらく後は新 URL のみとな…

React with TypeScript プロジェクトの Material-UI でレイアウトを作成する

前回は Material-UI のデザインの変更を行いました。今回はその続きとして Theme をカスタマイズする元となるレイアウト作成を行います。ソースコードは前回の記事を踏まえていますのでその点ご了承ください。(といって、踏まえないでも読めてしまうように…

React with TypeScript プロジェクトの Material-UI でデザインをカスタマイズする

前回は Material-UI のコンポーネントを利用するところまでやりました。今回はその続きになります。ソースコードも前回の記事を踏まえていますのでその点ご了承ください。(といって、踏まえないでも読めてしまうとは思いますが。) multimineral-tech.com …

React with TypeScript プロジェクトに Material-UI を導入してみる

React with TypeScript のプロジェクトにて、 Material-UI を使い始めるまでの方法について書いていきます。 簡単な管理画面(ダッシュボード)を作成して完了としたいのですが、当該記事では Material-UI を利用する環境を用意して終えることにします。利用…

React で TypeScript を使う環境を構築する手順(いつもどおり VSCode に ESLint と Prettier を添えます。)

React の開発環境を作る。 JavaScript ではなく TypeScript を使いたい。という場合の環境構築手順メモです。利用するのは VSCode 。 ESLint と Prettier も使ってコードのチェックやフォーマットを実行してくれるようにしておきました。 React TypeScript E…

Windows 10 の WSL2 上で動く Docker を導入する手順

Windows 10 に Docker を導入するための手順をまとめました。 Docker は WSL2 上で動かす前提の説明になっています。 導入は結構手間です。インストーラーの Next ボタンをポチポチってだけではないのは分かってましたが、意外に面倒だと思いました。 Virtua…

IntelliJ IDEA に CheckStyle と PMD と SpotBugs を導入してコードを自動でチェックしてもらう

IntelliJ IDEA で Java 開発をするにあたり、コードチェックを自動で行いたいと思います。そのためのツールの導入と簡単な実行までを記載しました。 チーム開発での運用や、CIと絡めた話までは手を出していません。今回は簡単に使ってみるところまでのお話と…

IntelliJ IDEA の Spring Boot プロジェクトで実行可能モジュール(jar)を生成する

IntelliJ IDEA で Spring Boot の開発をする手順を書きました。 multimineral-tech.com 今回はこの記事の補足記事です。そこから実行可能な本番モジュールとなる Jar ファイルを生成する方法とその実行方法を説明しています。 尚、当該記事の内容は、バージ…

IntelliJ IDEA の設定をしていくよ

IntelliJ IDEA で Java の開発をする前提として、以下に設定すべき内容をメモしていきます。 人それぞれ好みは色々あろうかとは思いますが、この記事は私がやってみた内容のメモ的なものですのでご了承ください。私は、他の方々の記事を参考に、自分の設定を…

IntelliJ IDEA で Spring Boot をはじめてみるよ

IntelliJ IDEA で Spring Boot をはじめる手順を説明します。 IntelliJ IDEA は用意されている前提で、 Spring Boot のプロジェクトを用意し、起動し、簡単な RESTful API アプリを作成して稼働確認を行うところまで書いています。 プロジェクトの用意と起動…

IntelliJ IDEA のインストールと簡単な使い方

IntelliJ IDEA のインストールから簡単な使い方の説明です。 インストールの話がメインで、そこに新規プロジェクトを作ってちょっと動かしてみる方法をおまけで付けたような記事になっています。 インストール 方法1 : IntelliJ IDEA のみをインストール ダ…

Markdown 利用者には Typora を布教したい。 Typora の設定と使い方

Markdown 利用者には Typora を布教したい。 ということで、私が便利に利用させていただいている Typora というアプリを布教させていただくという、そういう記事になります。 Typora とは インストール Typora の使い勝手 良いところ 悪いところ Typora の設…

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

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

React with TypeScript さらっと一通り知ってみる

プロジェクトの作成 create-react-app eslint の導入 Prettier の導入 eslint の設定 VSCode の設定 参考 基本の書き方 TSX を記述する 関数コンポーネント 関数コンポーネントで状態を扱う(Hooks で State を使う) useState は2つの値を返却する Hooks の…