デザイン on Blogenist -ブロゲニスト-

【Windows環境】ローカルにForge版Stable Diffusion Web UIをインストールしてみた【AIイラスト】

Tue, 03 Dec 2024 17:59:38 +0900

Stable Diffusion ForgeをWindowsのローカルにインストール

今回はWindows環境にStable Diffusion WebUI Forgeをインストールしてみようと思います♪

【Homebrew】「unknown or unsupported macOS version: :dunno」が出た場合の原因と対処方法【瞬殺】

Fri, 01 Mar 2024 19:03:17 +0900

Homebrewでエラーが発生

OSアップデートが起因？

MacのOSを久々に更新し、Homebrewコマンドを実行したところ、unknown or unsupported macOS version: :dunnoというエラーが発生するようになりました。

【簡単実装】Formの入力情報をCookieに保存・読み取りを簡単に行う事が出来る「jQuery Cookie」の使い方まとめ

Thu, 19 Oct 2023 21:55:50 +0900

フォームの入力情報をCookieに保存して手間を省きたい

作業効率化を測る

業務システムを利用している際に、選択項目のCSV出力機能などで「フォームの入力情報をCookieに保存して次回もデフォルトで選択した状態で表示してほしい」、と言う要望がたまにあると思います。

【一工夫が大事】WordpressのEmbed機能でいい感じのリンクを追加する方法

Tue, 28 Mar 2023 16:01:45 +0900

別の記事を紹介したい

テキストリンクは効果が弱い

Wordpressで記事を書いている際、関連する自サイトの記事や参考にさせて頂いた別サイトの記事を紹介したい場合があると思います。

その場合に、単純にaリンクで紹介するだけではイマイチ読者にクリックしてもらうことが出来ないと思います。

【Windowsエクスプローラー】一眼で撮影した10BitのMP4動画のサムネが出ない原因(簡易表示)と出す方法【α7S3の動画のサムネを出したい】

Thu, 16 Feb 2023 16:52:05 +0900

α7S3撮影した動画のサムネが出ない

動画編集作業がしづらい

筆者はα7S3を持っており旅行先の動画や普段の動画はそちらで撮影をしています。

そして、いざPCに取り込み動画編集をする際に、Windowsエクスプローラー上で簡易サムネになってしまいサムネイルが正しく表示されない点にずっと使いづらさを感じていました。

【おすすめWYSIWYGエディター】Bootstrapベースの「Summernote」でフォームパーツをツールバー付きのリッチなUIにしてみた【無料で爆速】

Mon, 21 Jun 2021 16:44:57 +0900

導入が楽チンでFormをWYSIWYG化

先日、フォームのテキストボックスやインプットボックスをリッチなUIにして欲しいというお話を受けました。

おそらくエクセルやワードのようなツールバーが付いているWYSIWYGエディターの事を指しているようだったので、ライブラリ選定をしていたところ、無料で使いやすそうなやつを見つけたので今回はそちらの導入方法を備忘録として記事にしてみようと思います。

【ドキュメントをGit管理可能】mermaid.jsでフローチャートやシーケンス図をマークダウン管理しよう【UML】

Mon, 29 Mar 2021 18:21:49 +0900

MD形式でシーケンス図を描きたい

専用ツールは使いたくない

皆さんはシステム開発をする際にシーケンス図を書いていますでしょうか？

様々なシステムと連携する際に、それぞれの処理フローを明確にするためにはシーケンス図を書く事がとても大事ですよね。

【最強のYouTuber向け一眼レフ】Sonyのα7s3が暗所もいけちゃうつよつよカメラだった件【キャンパーにもぴったり】

Sun, 14 Feb 2021 20:51:58 +0900

遂にフルサイズ機をゲット！

APS-Cの上が欲しくなってしまった

筆者は以前からCanonのAPS-Cの一眼レフを使っていました。

もちろん、十分な画質でしたし軽くて使い勝手も良かったので特に不満はなかったのですが、キャンプや暗所での撮影をする際にややノイズや明るさの面が気になっていました。

【グッバイAndroidStudio】VSCodeでKotlinの開発を快適に行うための設定まとめ【コード補完】

Sat, 19 Dec 2020 00:23:10 +0900

VSCodeで開発しよう

先日、Kotlinの開発環境構築方法をご紹介しました。

今回はVSCodeを使ってKotlinをコーディングするための設定をご紹介しようと思います♪

【テーマ・ソース変更必要無し】固定追尾サイドバーをプラグインぽちぽちだけで実装出来ちゃう「Q2W3 Fixed Widget for WordPress」が最強だった件【Wordpress】

Sat, 05 Dec 2020 17:48:17 +0900

自動追尾サイドバーを導入しよう

プラグインだけで完結

先日、functions.phpやテンプレートファイルに手を入れる事なく、プライグインだけでサイドバーのウィジェットを自動追尾スクロール化する方法を発見したのでご紹介しようと思います♪

【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】

Sat, 17 Oct 2020 19:32:35 +0900

お尻が疲れない神クッション

座り疲れを解消したい

長時間、PC作業などをする方の中には座りっぱなしでお尻が痛くなる方がいると思います。

筆者も開発やらゲームやらで1日の半分以上ゲーミングチェアに座っているので、座り疲れがよく発生しますorz

【ドキュメントをMarkdownでGitHub管理】MkDocsで生成されるHTMLのレイアウトをカスタマイズする方法まとめ【グッバイExcel・PowerPoint】

Sun, 05 Jul 2020 22:56:45 +0900

MkDockのカスタマイズしよう

前回、MarkdownでかけるMkDocsをご紹介しました。

今回は生成されるドキュメントのカスタマイズを試してみようと思います！

【グッバイエクセル/パワポ/スプレットシート】ドキュメントをマークダウンでかけるMkDocsが最強過ぎた【Github管理可能】

Tue, 30 Jun 2020 19:57:47 +0900

ドキュメントをマークダウンで書ける時代がやってきた

オフィスソフトでのドキュメント管理はもう嫌だ！

システム開発やサイト制作をしている際、必ず仕様書や設計書を作成し場合によっては納品する必要がありますよね。

昨今では、基本的にExcelやPowerPoint、GoogleスプレットシートやGooleスライドで作成や保守をする事が多いと思いますが、
これがまた悪い文化
何ですよねorz

【AdobeFonts】アドビCCを契約していれば無料で使えるハイクオリティフォントのインストール方法【デザイン/YouTuber】

Fri, 19 Jun 2020 17:36:50 +0900

高クオリティフォントをフォトショップやイラレ使おう

どのフォントを使えば良いか問題

動画編集やデザインなどの仕事をしている際に、テキストフォントをどうすれば良いか迷う事は多くあると思います。

フォントのデザインもさる事ながら、商用利用可否のライセンス周りもややこしいですよね。。。orz

【Adobe Premiere Pro】動画像やテキストを画面の端や任意のフッテージに揃えて配置する方法【AfterEffecrtsの整列ツールに近づかせる】

Sat, 06 Jun 2020 15:34:58 +0900

シーケンス内で画像や動画、テキストを綺麗に整列したい

PemiereProでは素材の整列機能がない？

YouTubeやSNSに投稿する動画を作成する際に、AfterEffectsではなくPremiereProを使っている方も多いと思います。

【AfterEffects】アルファチャンネル付きの背景透過の動画を簡単に書き出す方法【動画編集】

Sat, 23 May 2020 21:51:13 +0900

アフターエフェクトで背景透過動画を出力したい

YouTubeや趣味で動画編集をしている際に、背景が透過している動画を書き出して素材として使いたいという事があると思います。

そんな方のために、AdobeのAfterEffectsを使って背景が透過した動画を書き出す方法をご紹介しようと思います♪

【まとめて一瞬測定】BPM Analyzerでmp3やmp4のリズムを測る方法【Windows10/MacBook】

Fri, 01 May 2020 21:11:32 +0900

音楽ファイルのBPMを測定してみよう

音楽編集や動画を作っている際に、仕様している楽曲ファイルのBPMが気になる場合がありますよね。

今回はBPMを簡単に測れるBPM Analyzerを使ってBPMを測定してみようと思います♪

【デュアルディスプレイ】一つのモニターに出力するHDMIを簡単に切り替える方法【MacBook Pro/Windows10】

Mon, 27 Apr 2020 23:45:06 +0900

SwitchやPS4とパソコンでモニターを使い回す

出力を簡単に切り替える便利アイテム

前回、デュアルディスプレイの有効性のご紹介とオススメディスプレイについてご紹介する記事を執筆しました。

Amazon HUANUO モニターアーム 2画面デュアルディスプレイアームガススプリング式 17～27インチ対応耐荷重2-6.5kg グロメット式＆クランプ式 VESA100*100 (ブラック)

Amazon BenQ モニターディスプレイ GW2480 23.8インチ/フルHD/IPS/ウルトラスリムベゼル/DisplayPort,HDMI,VGA端子/ブライトネスインテリジェンス搭載

[adsense-responsive]

今回は、一つのPCモニターをHDMIケーブルを抜き差しする事なく出力を切り替える事が可能になるオススメアクセサリーを購入してみたのでご紹介しようと思います♪

【作業効率アップ】BenQのモニターをサブディスプレイにしてみたら快適空間が出来上がってしまった【ゲーミングPC】

Wed, 22 Apr 2020 20:34:24 +0900

デュアルディスプレイを導入

作業効率化を求めてお金を生贄に召喚

テレワークで自宅にてPC作業をしたりPCゲームをしたり動画編集等をしている際に、画面が1つだけだと作業効率が悪いと感じる事はありませんか？

【Wordpress】jpegoptimを使ってサーバー上のJPEG画像ファイルをまとめて圧縮する方法【便利】

Sat, 04 Apr 2020 23:07:53 +0900

EC2サーバーやMacにあるJPG画像を圧縮するしたい

大きい画像はメリットよりデメリットが多い

Wordpressなどでブログを運営していると画像等をアップロードする際に、なるべく綺麗な画像を乗せたいという気持ちで画像ファイルが大きいままアップロードをしてしまう事が多いと思います。

【JavaScript要らず】HTML5で追加されたbuttonタグのformaction属性でSubmit先のURLを簡単に変更する方法【たった1行】

Thu, 26 Mar 2020 19:13:39 +0900

フォームのポストをボタンによって動的に切り替えたい

JavaScriptで上書きするのが一般的だった

HTMLでフォームを作成している場合、要件によっては通常のサブミットとは別のURLにフォーム内容を送信したい場合があると思います。

そんなとき、今までは以下のようにjQueryなどのJavaScriptを使ってボタンが押下された際にformのURLを動的に書き換えた上でsubmitする、といった方法が一般的でした。

【オススメのパスポートケース】日本人にぴったりな葛飾北斎の富嶽三十六景「凱風快晴」のデザインケース【海外旅行】

Fri, 13 Mar 2020 23:56:33 +0900

日本人にぴったりなパスポートケース

先日、ツイッターで話題になっていた葛飾北斎の富嶽三十六景「凱風快晴」をモチーフにしたパスポートケースを実際に購入してみました！

葛飾北斎の富嶽三十六景「凱風快晴」をモチーフにしたパスポートカバーが話題です。パスポートの赤色を活かしたデザインになっているのですが、ご覧のとおりとってもかっこいいんです…！ pic.twitter.com/gNTb5PAN0K
— BuzzFeed Japan (@BuzzFeedJapan) February 21, 2020

Amazon Akafuji あかふじパスポートカバーパスポートケース

開封の儀

包装

パスポートケースはこんな感じで包装されています。

【コスパ最強】ELEGIANTのUSBタイプのPCスピーカーが使い勝手抜群でオススメ【Amazon】

Sat, 07 Mar 2020 19:18:19 +0900

高音質でコンパクトなPC用スピーカー

PCディスプレイを購入した際に、スピーカーが搭載されていないタイプのディスプレイだと後から気づく場合があります。

安価の製品だったりゲーミングモニターの場合はよくありますね。

【簡単丸ごとコピー】Updraft Plusでサイトやブログをローカル環境に復元(リストア)コピーする方法【Wordpress】

Wed, 29 Jan 2020 00:24:42 +0900

Wordpressのバージョンアップをローカルで試したい

Wordpressを使ってサイトやブログを構築している場合、実際にインターネット上に公開しているサーバー上で稼働させていたり、本番以外の検証・開発サーバーを構築せずに運用しているケースが多いと思います。

【実機動作確認】iPadのWebレイアウトを開発者ツールでデバッグする方法【小技】

Sat, 11 Jan 2020 16:20:42 +0900

iPadでのページレイアウトを確認しよう

サイト制作をしていると、様々なブラウザやOSでのレイアウトを気にしないといけませんよね。

ただ、iPadなどのタブレット端末の場合は開発者ツールをPCブラウザのように簡単に使ってみる事が出来ないので不憫に感じる事があると思います。

【Google Maps Platform】FlutterでGoogleMapAPIを使う方法【iOS/Android】

Wed, 04 Dec 2019 00:05:09 +0900

FlutterでGoogleMapを表示してみよう

前回、Flutterアプリの開発環境構築についてご紹介しました。

今回は、GoogleMapAPIを使って地図を表示するところまで試してみようと思います。

【このファイルタイプは】wordpressで一部のSVGだけアップロード出来ない問題の原因と解決方法【セキュリティの観点から許可されてません】

Fri, 25 Oct 2019 19:46:40 +0900

Wordpressで特定のSVG画像だけアップロード出来ない

このファイルタイプはセキュリティの観点で許可されていません

先日、いつも通りWordpressの記事に対してドラッグ&ドロップでSVG画像を追加しようとしたところ、以下のようなエラーが出ました。

【Vue-CLI 3系】Quasarでアイコンが表示されない場合の原因と解決方法まとめ【マテリアルアイコン/FontAwesame/MDI】

Sat, 19 Oct 2019 18:32:05 +0900

アイコンが出ない助けて！！！

表示されない

Quasarを使ってWebシステムやサイトを構築している際に、ドキュメントに「マテリアルアイコン以外にもFontAwesameやMDIなどをサポートしているよ！」という記載があったので使ってみようと思ったところ表示されませんでした。

【ボタン配置】PWAアプリのインストールダイアログをJavaScriptで制御しよう【beforeinstallprompt】

Sun, 29 Sep 2019 00:32:33 +0900

PWAのインストールボタンを配置しよう

先日、WebサイトのPWA化についてご紹介しました。

ただ、何も設定していないと、初回訪問時にインストールダイアログが出現しますが、ここでインストールを行わないとこのダイアログが当分出てこなくなってしまいます。

それだと、かなり使い勝手が悪いので、今回は自動で表示されるインストールダイアログを制御し、ボタンを押したタイミングでインストールを行うようにJavaScriptを使って改修してみようと思います。

【baseUrl】Vue-CLI3でルートディレクトリ以外にデプロイしたい場合のURLを置き換える方法【publicPath】

Wed, 25 Sep 2019 23:22:24 +0900

Vueプロジェクトをサブディレクトリにデプロイしたい

サイトなどを製作している場合、基本的にはhttp://localhost/{アプリケーション}の形で開発及び動作確認を行うと思います。

そして、いざ実装が終わりデプロイするぞ！！となった場合、レアケースですが、
「ルートじゃなくてサブディレクトリに配置して。」
と言われる事が稀にあります。笑

【Vue.js】Vue-CLI3でBootstarp-vueを導入する方法【デザインフレームワーク】

Mon, 23 Sep 2019 14:40:29 +0900

VueアプリでBootstrap4を導入したい

管理システムや簡易なWebサイトを開発する際、そこまでデザインにこだわる必要がなく、とはいえ自分でCSSを作り込む時間をかけたい場合にUIフレームワークを導入することになると思います。

【TypeScript】Vuetifyを入れた際の「implicitly has an 'any' type.」のビルドエラーの原因と解決方法【Vue-cli3】

Sat, 21 Sep 2019 14:32:16 +0900

VuetifyでTypeScriptエラー

Vue-cli3で簡単に導入可能

Vue-cli3を利用すると、簡単にプロジェクトにVuetifyを導入することが可能になります。

vue add vuetify

📦 Installing vue-cli-plugin-vuetify...

yarn add v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify@0.6.3
info All dependencies
└─ vue-cli-plugin-vuetify@0.6.3
✨ Done in 2.79s.
✔ Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀 Invoking generator for vue-cli-plugin-vuetify...
📦 Installing additional dependencies...

yarn install v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...

success Saved lockfile.
✨ Done in 4.77s.
⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify

【簡単瞬殺】vue-cliでpugを導入して記述量を半分以下に減らす方法【Electron】

Wed, 11 Sep 2019 22:22:57 +0900

PugでVue.jsを書こう

Pugについては以前ご紹介しています。

今回はVue-cliを利用して、ElectronプロジェクトにPugを導入する方法をご紹介します。

【Vue.js】Electronのタイトルバーを消す方法【ドラッグ移動も対応】

Mon, 09 Sep 2019 23:01:37 +0900

Electronアプリのタイトルバーを消したい

Electron製のアプリケーションを作るとデフォルトではこのように、アプリケーション名がタイトルバーに表示されます。

しかし、正直なところデザイン的にはタイトルバーは表示されなくても良い情報なので消したいですよね。

【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法

Sun, 08 Sep 2019 21:02:13 +0900

VueのUIフレームワークは「Quasar」で決まり

沢山あって迷う問題

先日、Vue.jsを使う中で、UIフレームワークを何にするかで悩みました。

Vuetify やBootstrap-Vue 、Buefy 、Element などなど、様々なものがありますが、その中でもQuasarがダントツで使いやすい&コンポーネントの数が膨大だったので使ってみる事にしました。

【自作デスクトップアプリ】Electronにアイコンを設定する方法【Vue.js】

Fri, 06 Sep 2019 22:51:15 +0900

アプリケーションアイコンを設定しよう

前回、Electron + Vue-cliを用いた環境構築方法についてご紹介しました。

今回はビルド時にアプリケーションアイコンを指定する方法をご紹介します。

【SwaggerUIはもう古い？！】今時のイケてるデザインなAPIドキュメントツール「ReDoc」の導入方法と使い方【簡単】

Sun, 21 Jul 2019 20:22:14 +0900

SwaggerUIにつぐ新たな勢力

以前、Swaggerに関する記事をご紹介しました。

そして、先日SwaggerUIに取って代わりそうな新たなUIツールを発見したのでご紹介しようと思います。

【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

Thu, 13 Jun 2019 22:44:59 +0900

おさらい

前回は、Nuxt.jsプロジェクトでsassを取り扱えるようにカスタマイズしました。

今回はpugを使えるようにカスタマイズしていこうと思います♪

【sass導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

Wed, 12 Jun 2019 23:55:56 +0900

おさらい

前回までで、ローカルでのサーバー起動・動作確認まで行うことが出来ました。

今回は、プロジェクトへのsassの導入を進めていこうと思います。

【ゲーミングキーボード】程よい打鍵感が癖になる「Logicool ロジクール G PRO テンキーレス」がオススメ【PUBG・フォートナイト・ApexLegends】

Fri, 10 May 2019 18:04:20 +0900

初めてのゲーミングキーボードを購入したった

打鍵感が心地良い

筆者は今まで、安価のBluetooth対応のキーボードを使ってFPSやPC作業をやってたのですが、ガチめにFPS等をやっている人に話を聞くと、やっぱりゲーミングキーボードを買うだけでも操作性が上がり、立ち回りがうまくなると言われました。

【SpringBoot2】リクエストの処理時間をログに出力する方法【AbstractRequestLoggingFilter】

Thu, 09 May 2019 20:16:54 +0900

リクエストの所要時間をログに出そう

前回、SpringBoot2のCommonsRequestLoggingFilterと言う既存Filterを用いたリクエスト情報のログ出力についてご紹介しました。

【SpingBoot2】LogbackのログをJson形式にする方法【CloudWatch】

Mon, 06 May 2019 16:44:40 +0900

Json形式で見やすくしよう

Logbackをそのまま利用していると、基本的には一行のテキストで、Formatパターンに沿ったログが出力されると思います。

こんな感じ。

[INFO ] [2019-05-04 12:41:26.322] [o.a.catalina.core.StandardService] - Starting service [Tomcat]

【さらばER図設計作業】docker-composeで「SchemaSpy」でデータベースのドキュメントを自動生成するやり方【DBリバースエンジニアリング】

Sat, 20 Apr 2019 18:16:22 +0900

DBの設計書、保守するのめんどくさい問題

皆さんはシステム開発を行う際にDB設計をしたことはありますでしょうか？

データベースの種類はOracleやMySQL、PostgreSQL、MariaDBなど様々な種類がありますが、リレーショナルDBであれば基本的には設計の仕方は変わりません。

【マイクロサービス】流行りのSpring Boot 2 + Gradle + Java8でマルチプロジェクトな個人開発をしていこうレイヤー構造化編【DDD(ドメイン駆動設計)】

Wed, 10 Apr 2019 22:42:07 +0900

土台は整ったのでAPIモジュールとして動かそう

前回の記事では、APIとして最低限動くところまでご紹介しました。

今回はレイヤー構造を整えていこうと思います。

【2019年3月更新】月間1万PV達成記念！ブログ初心者が誰の手も借りずに無料のWordpressテーマを使って雑記型のIT・技術ブログで月間1万PV達成【道のりと内容まとめ】

Mon, 07 Jan 2019 01:03:34 +0900

遂に達成

月間1万PV

2017年08月14日に記念すべき(?)1記事目を投稿してから早1年4ヶ月。

遂に2018年11月のPV数が1万を超え、一つの目標だった月間1万PVを達成することができました。

【瞬殺解決】Photoshopでレイヤーが「インデックス」と表記されレイヤー追加やデザイン編集が全く出来なくなった場合の原因と解決方法【初心者にありがち】

Thu, 20 Dec 2018 14:50:02 +0900

編集が出来なくなった！

ブログ用の画像をいつも通りPhotoShopで編集しようと思ったところ、レイヤーの追加や編集が無効化されており、何も出来ない状態となってしまいました。。。

【AMP For WordPress】WordpressのAMPプラグインで出力されるページのレイアウトやデザインをcssでカスタマイズしよう【templatesファイル】

Tue, 18 Dec 2018 22:16:32 +0900

AMPページのレイアウト調整

残るはデザイン調整

連日のAMP記事祭りもこれで区切りになると思います。

今回は、AMPプラグインで出力された記事の不要な出力の除去と、デザインをAMP専用のCSSを用意してカスタマイズしてみようと思います。

【AMP For WordPress】AMPページにAmazonJSのリンクの画像や商品情報が表示されない場合の原因と対処方法【デザイン調整】

Sun, 16 Dec 2018 18:19:26 +0900

Amazonの商品リンクが見にくい。。。

果てしなきAMP対応

連日のAMP関連の記事となります。

前回まではGoogleAnalyticsとGoogleAdsenseのAMP対応をご紹介しました。

そして、今回はAmazonの商品リンクに対するカスタマイズをご紹介致します。

【コピペで瞬殺】ブログ記事に使えるキーボードボタン風のデザインをCSSで作ってみた【サンプル】

Wed, 12 Dec 2018 22:17:17 +0900

キーボードボタンを表現したい

ITやブログ、プログラミング関連の記事を書いている際に、どうしてもキーボードボタンやショートカットについて説明する事があるのですが、その際に文字だけだと直感的にわかりにくい文面になってしまいますよね。orz

【簡単マルチアイコン作成】SVGやPNGから様々なアイコンファイルをまとめて自動生成してくれる「icon-gen」をnpmでインストールして幸せになろう【使い方】

Fri, 30 Nov 2018 15:20:40 +0900

アイコン画像を作りたい

レトロなやり方はやめたい

Webサイト制作をしていると、ほぼ100%の確率でfaviconを作成することになると思うのですが、このfaviconの作成方法について、以外と確立されていないのが現状です。

【Hyper】イケてて使いやすいターミナル環境を作るためのオススメプラグインまとめ【Electron】

Sun, 07 Oct 2018 15:48:04 +0900

カスタマイズしてみよう！

Hyperに関する記事を続けて2記事ほど投稿しました。

インストールがまだの方はこちらを参考にしてみてください。

そして今回はプラグインを使ったカスタマイズについてご紹介致します。

【文字化け対策】Zsh等でプロンプトの表示をカスタマイズしてる際にHyperで発生する文字化けの修正方法【Source Code Pro for Powerline】

Sat, 06 Oct 2018 12:11:07 +0900

文字化けが発生

先日、カスタマイズ性の高いElectron製ターミナルアプリの「Hyper」をご紹介しました。

その中で、筆者のようなZshとpreztoを使ってプロンプトの表示をカスタマイズしている際に文字化けが発生する可能性があります。

【遊び心満載】SpringBootの起動時の出力を任意の画像やアイコンに差し替える機能が面白い【謎の技術】

Tue, 02 Oct 2018 21:56:27 +0900

見慣れぬ新機能

先日、とある案件で「Spring Boot」を使いたいという相談を受けていたため、ドキュメントや様々な技術ブログを漁っていたところ、面白そうな記述を見つけました。

【無料】ハイクオリティでマテリアルデザインチックなアイコンの「ElegantThemes」を使ってみよう

Mon, 27 Aug 2018 12:03:32 +0900

オススメ無料アイコンをまた発見

以前、無料アイコンをご紹介する記事を投稿しました。

そして、また良さそうな無料アイコンセットを見つけましたのでご紹介します♪

【ブログ向けアイコン】旅行関連のアイコンを無料で配布している「tympanus」がオススメな件【可愛い】

Fri, 24 Aug 2018 12:09:11 +0900

ワンランク上のデザインへ

アイコンに助けを求めるべし

皆さんはアイキャッチ画像やサムネイル画像を自分で作ったりしていますでしょうか？

筆者は自分で作成しているのですが、デザインセンスが無いととても簡素なデザインになってしまい、あまり効果をなさないですよね。。。orz

【デザイン向上】Wordpressのカテゴリにアイコンを設定出来る「Easy Category Icon」【プラグイン】

Tue, 21 Aug 2018 19:41:29 +0900

カテゴリーにアイコンをつけたい

複数カテゴリーの記事を執筆しているブログでは、Wordpressのウィジェット機能を使ってサイドバー等にカテゴリメニューを表示していると思います。

アップロードしたSVGのサムネを表示させる方法

Mon, 20 Aug 2018 12:29:07 +0900

SVG画像のサムネが出ない問題

アップロードは可能になった

以前、以下の記事にてWordpressの管理画面からSVG画像をアップロード出来るように修正を行いました。

あとはサムネを表示したい

しかし、今のままだとアップロードとブログ側での表示は出来るようになりましたが、管理画面側でサムネが表示されていない状態です。

【使いやすさ向上】Wordpressの管理画面のCSSを変える方法

Sun, 19 Aug 2018 20:35:24 +0900

管理画面のCSSを変更したい

基本的にはいじる事は無い

Wordpressを使っている方は、基本的にサイト側のCSSを調整するためにテーマ内のstyle.cssを編集することがあると思います。

【瞬殺】WordpressでSVG画像がアップロード出来ない場合の解決方法

Sat, 18 Aug 2018 15:39:13 +0900

あれ、SVGがアップロード出来ないぞ？

アップロードエラー

先日、自作のSVG形式のアイコンファイルをブログで使用しようと管理画面からメディアのアップロードを試いたところ、以下のようなエラーが出てアップロードが出来ませんでした。

【便利すぎる】InstagramにAdobe Lightroomから直接投稿できるプラグイン「LR/instagram」

Fri, 17 Aug 2018 21:48:22 +0900

アップロードがめんどくさい

毎回に書き出してアプリからアップロードは大変

写真が趣味の方は、最近ですとInstagramにアップロードして周囲に公開している方は多いのではないでしょうか。

しかし、Instagramにアップロードするために毎回ファイルに買い出してからアップロードをしていると思います。
この作業、地味にめんどくさいですよね。。。。

【炎上回避】APIドキュメントはSwaggerで定義すると幸せになれる説

Sat, 04 Aug 2018 14:56:41 +0900

Swagger

What’s??

皆さんはSwaggerをご存知でしょうか？

Swaggerとは、RESTful APIのAPIドキュメントを生成するためのオープンソースのフレームワークのことです。

「Open API Initiative」という団体がRESTful APIのインターフェイスの記述をするための標準フォーマットを推進しており、その団体が考え出した規格のひとつがSwaggerです。

【簡単便利】Webフォントで有名なGoogle Fontsの導入方法と使い方まとめ【Webデザイン】

Mon, 16 Jul 2018 23:38:49 +0900

Google Fontsは有能

古き良き(?)文化

皆さんはWebデザインを行う際に、テキスト画像(文字だけの画像)を使っていたりしますか？

昔に作られたホームページでは、メニュー名や人物名のテキスト画像を書き出して、imgタグで読み込ませている手法をよく見かけます。

【おすすめテーマ】Wordpressのメディアブログ向け無料テーマ「LION MEDIA」の導入方法

Thu, 03 May 2018 14:05:10 +0900

LION MEDIA?

What’s?

LION MEDIAとは、無料で利用出来るWordpress用のテーマファイルです。

SEO最適化やレスポンシブ、表示高速化などがしっかり対応されていてとても使いやすいテーマとなっています。

【ブロガー初心者向け】Wordpressのテーマ周りを理解してみよう【必須知識】

Wed, 02 May 2018 20:15:18 +0900

Wordpressのテーマ

テーマ？

Wordpressをインストールすると、デフォルトでは以下のようなTwenty Seventeenというテーマが設定されていると思います。

【便利さに脱帽】Philips Hue ブリッジで照明器具をスマートホーム化してみた

Tue, 17 Apr 2018 00:06:46 +0900

おさらい

前回の記事ではAmazon Echo Plusと付属のPhilips Hueを連携して操作をしてみました。

今回はPhilips Hueの別製品を購入したので、こちらのセットアップ方法をまとめてみました。

【Twitter向けOGP】Twitterでブログリンク内容を綺麗に表示させる方法

Sat, 24 Mar 2018 06:18:41 +0900

OGPとは

ブログ記事をTwitterやライン等でシェアする事はよくあると思います。

しかし、その際にWordpressの記事側で正しくとある設定をしていないと正しく記事が表示されず、見た目がダサくなってしまいます。
例えば、Twitterだと以下のようになってしまいます。

綺麗にレイアウトを整えるための設定が何も入っていないので、ただのリンク文字列になってしまいます。

【お便利AWS】S3バケットで静的サイトホスティングをしてみよう

Sun, 18 Mar 2018 15:26:25 +0900

静的サイトを公開したい

サーバー借りるのは負担

Wordpressではなく、単純なHTML/JS/CSSのみで静的なサイト(LP等)を作って公開したいけど、そのためだけにサーバーを借りるのは勿体ない！と思ってらっしゃる方は少なくないと思います。

【秒殺】After Effectsの言語を日本語から英語に変える方法

Sat, 17 Mar 2018 10:52:52 +0900

言語を変えたい

CCでAdobe製品をインストールすると、基本的に日本語メニューの状態でインストールがされると思います。

しかし、英語環境のメニューに慣れている方や、利用しているテンプレートのエクスプレッションが英語環境前提で記述されていると、日本語環境のAfterEffectsだとエラーになってしまう事があります。

【キャッシュ対策】WordpressのCSSにクエリパラムを付与しての変更を即時反映させる方法【更新日時をつける】

Sat, 10 Mar 2018 19:49:22 +0900

CSSを変更したのに変更が適用されない

あれ？変わらない・・・

Wordpress等でブログを作成している場合、レイアウトを調整するためにCSSファイルの内容を変更しても、すぐに反映されない事があると思います。

【便利ショートカット】After Effectで急にフッテージのバウンディボックスが出ない時の対象方法

Mon, 05 Mar 2018 21:52:08 +0900

バウンディボックスは便利

バウンディボックスとは？

AfterEffectsで動画編集をしている際に、タイムライン上に配置した素材を選択しドラッグ&ドロップで配置を決めたりサイズを変更したりすることがあると思います。

【訪問者様は神】CSSで投稿記事内の画像を見やすくしよう

Wed, 28 Feb 2018 22:15:50 +0900

アップロードした画像の境界線が分かりにくい。。。

筆者はIT技術系のHowTo記事を多く挙げているため、よく作業時のキャプチャ画像等を記事に添付しています。

しかし、使用しているWordpressテーマによってはテキスト部分と画像の境界線が分かりにくく、結果として記事が読みにくく感じてしまう場合があります。

【見た目を整えよう】WordpressにFontAwesomeを導入して使ってみよう

Thu, 22 Feb 2018 22:53:21 +0900

FontAwesomeとは？

FontAwesome(フォントオーサム)とは、様々なデザインのアイコンをWebページ上で自由に使うことが出来る無料のツールキットです。
このツールキットを使えば、色やサイズを自由に変えてアイコンをブログ記事に追加することが可能になるので、ブログの見た目をいい感じにすることが可能です。

【CC2017版】AfterEffectsで書き出したファイルをEncoreを使ってDVDに焼く方法

Tue, 21 Nov 2017 22:22:45 +0900

DVDの必要性

結婚式の余興の動画などを作っていると、作成した動画をDVDに焼く必要が出てきます。

もちろん、新しい式場ではPCを直接繋げて流したり、USBメモリーに動画データを入れて渡すだけでも良いところもありますが、まだ少数派でしょう。

【ソースコードの埋め込み】Wordpressでコードを綺麗に表示してくれる「Crayon Syntax Highlighter」プラグイン

Tue, 31 Oct 2017 00:32:01 +0900

ソースコードの埋め込み

ソースコードを記事に埋め込みたい場合、プラグイン等を入れていないとすごく質素な感じになってしまいます。

また、様々な言語によってシンタックスハイライトが異なるので、それを自前で表現するのはとても大変です。

【Wordpressの目次をお洒落に】Table of Contents Plusのレイアウトの修正方法

Fri, 27 Oct 2017 22:56:05 +0900

Table of Contents Plus

おさらい

以前、コチラの記事に「Table of Contents Plus」というWordpressに目次機能を自動追加してくれるプラグインを紹介しました。

プラグインをインストールし、ルールに則って記事を作成するだけで目次機能が追加されるので非常に便利です。

【解凍ソフトの決定版】macでのrarファイルを解凍するなら「The Unarchiver 」

Sun, 22 Oct 2017 17:51:50 +0900

ZIPファイル以外の解凍が出来ない！

ネットでデザイン素材集をダウンロードすると、たまにZIP形式以外に圧縮されている場合があります。

macではデフォルトではこのrar形式の圧縮ファイルの解凍が出来ないので、別途解凍用のソフトをインストールする必要があります。

【便利】macでFont Bookを使ってフォントをまとめてインストールする方法

Sat, 21 Oct 2017 14:26:37 +0900

一つ一つインストールするめんどくささ

デザインの仕事などをやっていると有料のフォントパックを購入する事が多々あります。

国乳すると、多くのttf/otfファイルをインストールする必要があるのですが、Finderから一つ一つインストールするのは非常に大変です。

商用利用OKのフリーイラストの大御所！無料で使い放題の「いらすとや」さん♪

Sat, 26 Aug 2017 17:01:32 +0900

フリーイラストについて

ブログ等をやっているとヘッダー画像や記事で使用する画像を作りたくなることが多々あります。

しかし、画像なんか自分で作れないよ〜orz。。。なんて方が多いと思います。

そういう時はネット上でフリーのイラスト素材を使わせてもらうことで良い画像を作ることが出来ます。

デザイン on Blogenist -ブロゲニスト-

【Windows環境】ローカルにForge版Stable Diffusion Web UIをインストールしてみた【AIイラスト】

Stable Diffusion ForgeをWindowsのローカルにインストール

【Homebrew】「unknown or unsupported macOS version: :dunno」が出た場合の原因と対処方法【瞬殺】

Homebrewでエラーが発生

OSアップデートが起因？

【簡単実装】Formの入力情報をCookieに保存・読み取りを簡単に行う事が出来る「jQuery Cookie」の使い方まとめ

フォームの入力情報をCookieに保存して手間を省きたい

作業効率化を測る

【一工夫が大事】WordpressのEmbed機能でいい感じのリンクを追加する方法

別の記事を紹介したい

テキストリンクは効果が弱い

【Windowsエクスプローラー】一眼で撮影した10BitのMP4動画のサムネが出ない原因(簡易表示)と出す方法【α7S3の動画のサムネを出したい】

α7S3撮影した動画のサムネが出ない

動画編集作業がしづらい

【おすすめWYSIWYGエディター】Bootstrapベースの「Summernote」でフォームパーツをツールバー付きのリッチなUIにしてみた【無料で爆速】

導入が楽チンでFormをWYSIWYG化

【ドキュメントをGit管理可能】mermaid.jsでフローチャートやシーケンス図をマークダウン管理しよう【UML】

MD形式でシーケンス図を描きたい

専用ツールは使いたくない

【最強のYouTuber向け一眼レフ】Sonyのα7s3が暗所もいけちゃうつよつよカメラだった件【キャンパーにもぴったり】

遂にフルサイズ機をゲット！

APS-Cの上が欲しくなってしまった

【グッバイAndroidStudio】VSCodeでKotlinの開発を快適に行うための設定まとめ【コード補完】

VSCodeで開発しよう

【テーマ・ソース変更必要無し】固定追尾サイドバーをプラグインぽちぽちだけで実装出来ちゃう「Q2W3 Fixed Widget for WordPress」が最強だった件【Wordpress】

自動追尾サイドバーを導入しよう

プラグインだけで完結

【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】

お尻が疲れない神クッション

座り疲れを解消したい

【ドキュメントをMarkdownでGitHub管理】MkDocsで生成されるHTMLのレイアウトをカスタマイズする方法まとめ【グッバイExcel・PowerPoint】

MkDockのカスタマイズしよう

【グッバイエクセル/パワポ/スプレットシート 】ドキュメントをマークダウンでかけるMkDocsが最強過ぎた【Github管理可能】

ドキュメントをマークダウンで書ける時代がやってきた

オフィスソフトでのドキュメント管理はもう嫌だ！

【AdobeFonts】アドビCCを契約していれば無料で使えるハイクオリティフォントのインストール方法【デザイン/YouTuber】

高クオリティフォントをフォトショップやイラレ使おう

どのフォントを使えば良いか問題

【Adobe Premiere Pro】動画像やテキストを画面の端や任意のフッテージに揃えて配置する方法【AfterEffecrtsの整列ツールに近づかせる】

シーケンス内で画像や動画、テキストを綺麗に整列したい

PemiereProでは素材の整列機能がない？

【AfterEffects】アルファチャンネル付きの背景透過の動画を簡単に書き出す方法【動画編集】

アフターエフェクトで背景透過動画を出力したい

【まとめて一瞬測定】BPM Analyzerでmp3やmp4のリズムを測る方法【Windows10/MacBook】

音楽ファイルのBPMを測定してみよう

【デュアルディスプレイ】一つのモニターに出力するHDMIを簡単に切り替える方法【MacBook Pro/Windows10】

SwitchやPS4とパソコンでモニターを使い回す

出力を簡単に切り替える便利アイテム

【作業効率アップ】BenQのモニターをサブディスプレイにしてみたら快適空間が出来上がってしまった【ゲーミングPC】

デュアルディスプレイを導入

作業効率化を求めてお金を生贄に召喚

【Wordpress】jpegoptimを使ってサーバー上のJPEG画像ファイルをまとめて圧縮する方法【便利】

EC2サーバーやMacにあるJPG画像を圧縮するしたい

大きい画像はメリットよりデメリットが多い

【JavaScript要らず】HTML5で追加されたbuttonタグのformaction属性でSubmit先のURLを簡単に変更する方法【たった1行】

フォームのポストをボタンによって動的に切り替えたい

JavaScriptで上書きするのが一般的だった

【オススメのパスポートケース】日本人にぴったりな葛飾北斎の富嶽三十六景「凱風快晴」のデザインケース【海外旅行】

日本人にぴったりなパスポートケース

開封の儀

包装

【コスパ最強】ELEGIANTのUSBタイプのPCスピーカーが使い勝手抜群でオススメ【Amazon】

高音質でコンパクトなPC用スピーカー

【簡単丸ごとコピー】Updraft Plusでサイトやブログをローカル環境に復元(リストア)コピーする方法【Wordpress】

Wordpressのバージョンアップをローカルで試したい

【実機動作確認】iPadのWebレイアウトを開発者ツールでデバッグする方法【小技】

iPadでのページレイアウトを確認しよう

【Google Maps Platform】FlutterでGoogleMapAPIを使う方法【iOS/Android】

FlutterでGoogleMapを表示してみよう

【このファイルタイプは】wordpressで一部のSVGだけアップロード出来ない問題の原因と解決方法【セキュリティの観点から許可されてません】

Wordpressで特定のSVG画像だけアップロード出来ない

このファイルタイプはセキュリティの観点で許可されていません

【Vue-CLI 3系】Quasarでアイコンが表示されない場合の原因と解決方法まとめ【マテリアルアイコン/FontAwesame/MDI】

アイコンが出ない助けて！！！

表示されない

【ボタン配置】PWAアプリのインストールダイアログをJavaScriptで制御しよう【beforeinstallprompt】

PWAのインストールボタンを配置しよう

【baseUrl】Vue-CLI3でルートディレクトリ以外にデプロイしたい場合のURLを置き換える方法【publicPath】

Vueプロジェクトをサブディレクトリにデプロイしたい

【グッバイエクセル/パワポ/スプレットシート】ドキュメントをマークダウンでかけるMkDocsが最強過ぎた【Github管理可能】

【マイクロサービス】流行りのSpring Boot 2 + Gradle + Java8でマルチプロジェクトな個人開発をしていこうレイヤー構造化編【DDD(ドメイン駆動設計)】