www.ni4.jp

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

カスタムスクリプトと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で作る

このブログでもダークモードに対応してみました!

ども、どもども。
このブログも運営し始めてもうすぐ7年になろうとしています。
その前身となるブログなども含めると、もう20年以上、このように書いていることになります。

さすがにここまで長く運営していると、世の中も変わってきます。
というわけで、少し前から対応しているウェブサイトやアプリも増えた「ダークモード」に、このブログも対応してみました!
なんだか大事のように書いていますが、やってみたかったというのが本音ですね(苦笑)

この記事では、その手順とか対応内容をご紹介したいと思います。
それではさっそく参りましょうー!

続きを読む:
このブログでもダークモードに対応してみました!

2020年の振り返りと2021年の抱負的なこと

ども、どもども。

今日は1月3日、2021年がスタートしてから3日めです。
弊社の年末年始休暇は明後日5日までとなっており、6日から通常業務がスタートしますが、その前に昨年の振り返りと今年の抱負的なことをまとめておこうと思います。

2020年のジャクスタポジション

昨年は新型コロナウイルスの感染拡大により、多くの業界に影響があった年でした。
弊社も例外ではなく少なからず影響があったのですが、9月の決算では幸いにもほぼ例年通り(前期に比べると減)の売上を確保することができました。
一緒に仕事をしてくれるメンバーの頑張りはもちろん、このような状況下でも弊社を信頼しご依頼いただけたクライアントさんあってのことで、本当にありがたいことです。

昨年4月からは「出社を原則としない働き方」を取ることとなり、こちらもそれまでとは大きく変わったことの1つでした。
ただ、2013年に法人化するまでの9年間はリモートワーク(当時の言い方ならSOHO)で仕事をしていたこと、また2019年秋からはリモートワークを実施できる体制を整えつつあったことから、大きな混乱なく移行することができたと思います。

このような環境の変化が多かった年でしたが、会社的には大きな影響もなく無事に1年を終えられたことを嬉しく思います。

また、個人的には社外ウェブチームへのコンサルタント/ディレクターとしての参加や、ウェブメディアへの寄稿記事執筆など新しい経験や挑戦がいくつかできた年でもありました。
このブログでも記事にしていますが、MovableType.netのブロックエディタに比較的早い段階から触れ、その発表の機会(MTDDC Meetup TOKYO 2020)をいただけたのも嬉しかったですね。

2021年のジャクスタポジション

昨年の決算ミーティング(決算終了後に行う社内ミーティング)で、今後弊社がどのような取り組みをしていくべきかという話し合いができました。

  • Movable Typeに強い会社であること
  • EC(Eコマース)関連に長けた会社であること
  • 構築に至るまでの仕事(企画や提案)が丁寧であること
  • 構築後のサポートに重きをおいていること
  • 既存クライアントとの取引が長く関係性が良いこと
  • 協業パートナーに恵まれていること
  • 提案と費用に関するバランスの説明がまだまだ十分ではないこと
  • フロントエンドエンジニアリングが手薄であること(協業パートナーの協力が大きい)
  • 自社ウェブサイトが古いこと(汗)
  • 社長のキャラクターをもっと活かすこと(苦笑)

2021年はこれらの良い点/悪い点、あるいは強みと弱みをあらためて意識して実行していく年。
良い点と強みを伸ばすことはもちろん、悪い点と弱みを克服し、クライアントの皆さんに「ジャクスタポジションがいてよかった」と思っていただけるよう努めます。

私たちがやるべき「Webでもっと楽しいリアルを創る」を信条に、2021年もスタートします。
今年もよろしくお願いします。

アクセスの多い記事