Multi Vitamin & Mineral

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

プログラミング

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 で書くと **強調** の部分に当た…

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 の…

TypeScript の開発環境を作る。VSCode を基本に ESLint と Prettier も添えて。

はじめに VSCode と Node.js の用意 TypeScript のインストール TypeScript のコンパイル eslint の導入 蛇足 Prettier の導入 VSCode のプラグイン はじめに TypeScript の開発環境の作り方です。 「TypeScript をサクッと一通り知る」のサブコンテンツとな…

TypeScript をサクッと一通り知る

TypeScriptとは? なぜ TypeScript ? tsc トランスパイル JavaScript のバージョンに注意 インストールと利用 1. インストールなしに試す 2. グローバルインストール編 3. プロジェクト内で利用編 TypeScriptの基本的な書き方 型 (1) 基本型3つ+型なし (2) …

Visual Studio Code のショートカットキーを覚える

はじめに 基本 サジェスト系 選択系(マルチカーソル) キーワード検索系 編集操作系 行操作系 ファイル内移動系 ファイル移動系 ファイル分割表示系 ファイル名検索系 ファイル編集系 はじめに 個人的に使いそうなものだけまとめました。 上から下まで一度…

Visual Studio Code の最初の設定、基本の操作

はじめに 拡張機能 設定 ユーザーとワークスペース コマンドパレット ショートカットキー その他操作 ファイルのインクリメンタルサーチ プロジェクト内のキーワード検索 ファイル編集操作 ファイルリンクとファイルリンクからのファイル作成 Emmetの利用 cs…

まっさらな Windows でフロントエンド開発環境を構築する 色々インストール編

はじめに インストールするソフトウェア git for windows Visual Studio Code Node.js Ricty Diminished インストールしたものだけでも連携させておく gitbash と VSCode の連携 VSCode にフォント設定をする 変更履歴 2021/02/12 はじめに まっさらな Windo…