www.ni4.jp

ウェブサイト制作会社の
ディレクター社長が
思ったままに書くブログ

MovableType.net Dashboard Utility ver0.6.0 リリースしました!

ども、どもども。
今年もアドベントカレンダーの季節がやってまいりました!
Movable Typeでは今年10年目となります。
いつも参加してくれる皆さん、そしてこの記事をご覧の皆さん、ありがとうございます!

この記事は「Movable Type Advent Calendar 2021」11日目の記事で、ここ数年恒例となっている「MovableType.net DashBoard Utility」の新バージョンリリース記事となります!

…の予定だったのですが(お詫び)

この記事を準備したのが12月9日(木)17時、その直前にChromeウェブストアに新バージョンをアップロードし、審査に入ったものの、12月11日(土)16時現在、まだ審査が終わらず公開されていません!!(汗)
そのため、以降は「近日リリースされる新バージョン」の紹介としてご覧ください…

追記)2021年12月24日(金)にリリースされました!

続きを読む:
MovableType.net Dashboard Utility ver0.6.0 リリースしました!

【MovableType.net】画像アップロード時にネイティブLazy-load対応にする

ども、どもども。
この記事は 「Movable Type Advent Calendar 2021」 3日目の記事です。

ここ数年、ウェブページの表示速度向上があらゆる場面で取り上げられています。
そんな中、手軽な対応の1つとして「画像の遅延読込」がありますが、2年ほど前にはGoogle Chrome ブラウザがJavaScriptを使用せずにこれに対応できる「ネイティブLazy-load」に対応して話題になりました。

imgタグのHTML中に loading="lazy" 記述するだけで、最近のブラウザであれば自動的に遅延読込をしてくれるのが便利ではありますが、Safariの対応がもう少し先になりそうなので、現在はJavaScriptと併用している感じが多いのかなと思います。

世界的に利用者の多いCMS「WordPress」では、画像をアップロードした際に自動的に loading="lazy" を記述してくれるようですが、すべての画像に一律で入れてしまうのはちょっと慎重になったほうが良いという話もありますね。

というわけで、私が普段から利用している MovableType.net でも画像アップロード時に loading="lazy" を任意に付与できるようにカスタムブロックを作ってみたので、この記事ではそちらをご紹介したいと思います!

続きを読む:
【MovableType.net】画像アップロード時にネイティブLazy-load対応にする

カスタムスクリプトとmt:BlockEditorBlocksの違い

ども、どもども。
昨日、2021年11月13日(土)に開催されたMTDDC Meetup TOKYO 2021で「カスタムブロック作成手順のベタープラクティス」と題してセッションを担当させていただきました。

その際のスライド資料はこちら

スライドだけではわかりにくいかと思います(汗)
参加者の方々には後日アーカイブ動画が配信されると思いますので、そちらでもご覧ください。

Movable Typeのブロックエディタは、昨年MovableType.netへ実装され、今年はソフトウェア版Movable Typeでも利用できるプラグインが提供されるなど、今とても注目されている機能の1つです。
今回のセッションではブロックエディタで利用できる「カスタムブロックの利用方法」についてお話したのですが、このカスタムブロックには2つの利用方法、カスタムスクリプトとmt:BlockEditorBlocksがあり、今回はカスタムスクリプトを中心にお話させていただきました。

まだ登場から日が浅いこともあり、それぞれの違いや利用シーンについてぼんやりした印象をお持ちの方も多いと思います。
実際、セッション後のAsk The Speaker(質疑応答)でも以下のような質問がありました。

カスタムスクリプトとmt:BlockEditorBlocksを同じプロジェクト内で使い分けることはありますか?
mt:BlockEditorBlocksを利用するシチュエーションというのはどういうときですか?

そこでこの記事では、その質問に対する回答の補足というカタチで「カスタムスクリプトとmt:BlockEditorBlocksの違い」を、私の解釈でご案内したいと思います。
間違っている部分もあるかもしれないので、詳細は公式サイトなどでもご確認くださいね。

続きを読む:
カスタムスクリプトとmt:BlockEditorBlocksの違い

WYSIWYGエディタでリストの入れ子を作る

ども、どもども。
私、Movable Typeをかれこれ18年ほど利用しております。
そんなわけで、Movable Type 5.2から標準搭載されたTinyMCE(WYSIWYGエディタ/リッチテキストエディタ)とも、かれこれ8年以上の付き合いとなります。

TinyMCEはとても機能豊富なので、Movable Type以外にもさまざまなソフトウェアで利用されており、私が愛用しているMovableType.netでももちろん利用できます。

ただ、大変便利なTinyMCEですが、「入れ子状のリストを作る方法」をつい先日まで知りませんでした!(汗)
入れ子状のリストとは、こんな感じのものです。

  • 和食メニュー
    • 寿司
    • 天ぷら
    • そば
  • 洋食メニュー
    • カレーライス
    • ハンバーグ
  • 中華メニュー
    • ラーメン
    • 餃子
    • 回鍋肉

これができることを知るまでは、恥ずかしながら「TinyMCEでは入れ子状のリストが作成できません!」と言い切っていました…ほんとごめんなさい…

やっとそれを知ったので、今日はその便利な使い方をまとめておこうと思います。

続きを読む:
WYSIWYGエディタでリストの入れ子を作る

書斎DIY第2弾!自作カーテン式グリーンバック

ども、どもども。
ここ1年ちょっとの間に、Zoomなどを使用したオンラインミーティング(WEB会議)の機会が増えましたね。
私も自宅書斎で仕事をするようになり、ほぼ毎日のようにオンラインミーティングをしています。

セミナーなどもオンラインで開催されるようになり、事前収録することも増え、私も今年6月に初めて自宅書斎で収録するという経験をしました。
その時に使用した機器やノウハウはシックス・アパートさんのブログにまとめられています。

この収録をするにあたって設置したのがグリーンバック。
Zoomなどでバーチャル背景を使う人も多いと思うので、自宅にグリーンバックを設置することも増えたと思います。
先日、私の書斎に設置したグリーンバックをシックス・アパートさんのブログでご紹介いただいたのですが、今日はもう少し詳しくご紹介しようと思います。

続きを読む:
書斎DIY第2弾!自作カーテン式グリーンバック

Movable Type 誕生から20年!

ども、どもども。
ここ最近も慌ただしくお仕事させていただいてます。
先日は法人第8期も無事に終わり、忙しくも楽しい日々。

そんな中、もう1週間前になりますが、2021年10月8日(金)に Movable Type が誕生から20周年を迎えました。
シックス・アパートさん、おめでとうございます!

この画像はシックス・アパートさんのブログから転用させていただきました。

Movabe Typeは2004年の創業当時から利用しているCMSソフトウェアで、これがなければ私の仕事もこうはなっていなかったと思えるプロダクトです。
私が利用し始めたのはversion2.661で、その後すぐにversion3がリリースされ、仕事でも利用するようになりました。
このソフトウェアでほんとにいろんなウェブサイトを作ってきましたね。

続きを読む:
Movable Type 誕生から20年!

Homebrewを使おうとしたら「Git must be installed and in your PATH!」とエラーが出てしまった

ども、どもども。
昨年12月〜今年1月にかけ、いわゆる黒い画面(ターミナル)を使ってOpenSSLのインストールやSSL証明書のCSR作成SSH接続のための鍵ペア作成など「それっぽいこと」をやっていたワタシ。

その後はあまり利用する機会が無かったのですが、今進めているウェブサイト構築で動画のHLS配信をする必要があって、そのために必要となるffmpegをインストールするため、久々に黒い画面を起動しました。
参考にしたのはこちらの記事。

Homebrewなら前回も使ったし問題ないだろう…と思ったのですが、いざやってみるとHomebrewが動きませんでした。
いったいなにが(汗)

調べた結果、最終的に上手く動かせてffmpegもインストールできたので、今回はその原因と対処方法をまとめておこうと思います。(またいつか自分が必要になりそう…)

続きを読む:
Homebrewを使おうとしたら「Git must be installed and in your PATH!」とエラーが出てしまった

StripeのPayment Linksはホントに5分以内でクレジットカード決済を導入できるのか

ども、どもども
弊社でクレジットカード決済を導入する際、一番に候補に挙げているクレジットカード決済サービス「Stripe」
そのStripeの新しい利用方法「Payment Links」を試してみました。

Stripe Payment Links: リンクを作成し、どこでも販売できます。所要時間は 5 分以下です。

5分以下でクレジットカード決済を導入?!マジすか
というわけで、さっそく作ってみることに。

続きを読む:
StripeのPayment Linksはホントに5分以内でクレジットカード決済を導入できるのか

DIYで書斎改造、木材加工と塗装はナシの方向で!

ども、どもども。
4ヶ月ぶりです、こんにちは。

この1年、久しぶりに自宅書斎からリモートワークで仕事をするようになったのですが、3畳半しかない書斎はモノで溢れて仕事をする環境としては褒められた状況ではありませんでした。
そこでGWの連休を使って断捨離と書斎改造をやろうと思い立ち、狭い上に収納がない書斎に壁面収納を自作することに。
構想から完成までおよそ1ヶ月、初めてのDIY備忘録をまとめようと思います。

Do It Yourself…とはいえ、道具もないし塗料を使えるような場所もないので、材料のカットなどはホームセンターで、また材料はすべて塗装済みのものを用意することを条件にスタートしました。

材料の一覧とだいたいの費用

近所のホームセンターや100円ショップで揃えた材料はこんな感じ。

塗装済み2x4木材(2本/カット込み) 4,186円
塗装済み有孔ボード(1枚/カット込み) 3,443円
石膏ボード用有効ボード留め具・フックほか 2,595円
チャンネルサポート(120mm/2本) 2,376円
ラブリコアジャスター(2セット) 2,194円
棚受け(2本) 1,182円
棚板(1枚) 811円
カードホルダー(2種) 1,754円
その他、有孔ボード用フックやネジなど 3,000円(くらい)

以上で、だいたい20,000円(税込)くらいになりました。

続きを読む:
DIYで書斎改造、木材加工と塗装はナシの方向で!

SSH接続するための秘密鍵と公開鍵をMacで作る

ども、どもども。
ここ最近のブログ記事はテクニカルな内容が多い…
ワタシもウェブ屋さんなんだなと実感しています(笑)

さて。
ウェブサイトの構築業務をしていると、こういう依頼を受けることはないでしょうか

  • サーバーにはSSH接続(SFTP鍵認証)でアクセスして欲しい
  • そのためにSSHキーを用意して知らせて欲しい

ワタシも何度かこのような連絡を受けて対応していますが、正直なところSSH接続(というか黒い画面)にはまだ慣れていない部分もあり、毎回ビクビクしながら対応しています(笑)

先日もSSHキーを用意して欲しいと連絡を受け準備したのですが、そのときに実施した手順やちょっとしたコツ?のようなものを、将来の自分のためにまとめておこうと思います。

いろいろと経緯なども書いていますが、サクッと作り方を知りたい場合は【秘密鍵/公開鍵作成のコマンドと手順】だけ読むと良いかもしれません。
なお、ちょっと説明が怪しい部分もあると思うので、その辺りはご了承くださいね(汗)

続きを読む:
SSH接続するための秘密鍵と公開鍵をMacで作る

アクセスの多い記事