www.ni4.jp

カテゴリ:MovableType.netの記事一覧

【MovableType.net】TinyMCEでテーブルに設定されるwidthやheightを削除する

ども、どもども。
2020年の仕事納めは昨日でしたが、今日もデスクに向かってます。こんにちは。

MovableType.netのブロックエディタ、これまでもそのカスタマイズなどをいくつか紹介してきましたが、導入した弊社クライアントさんからも大変好評です。

そんなブロックエディタですが、テーブル(表)の作成だけはちょっと面倒なことが…。

MovableType.netのブロックエディタは、TinyMCEが使用されているのですが、このエディタのテーブルって、初期設定や編集中にちょっと罫線に触れてしまうことで、セルの幅とか高さとかが自動でついてしまうことがあるんですよね。
そのような場合はソースコードをちまちまと修正することも多いのですが、それをクライアントさんに強いるのも難しく、とは言えそこをサポートするのも、数が多かったり複雑だったりすると手間が増えてしまいます。

WordPressを利用している場合はTinyMCEの設定変更が可能なようで、それらの情報が共有されていますが、MovableType.netの場合はそれができません。

これをどうにかしたいなーと言うことで、以前作成したテーブルのレスポンシブ対応カスタムブロックを改良してみました。

続きを読む:
【MovableType.net】TinyMCEでテーブルに設定されるwidthやheightを削除する

自分で作ったCSRで取得した独自SSL証明書をインストールしてみた

ども、どもども。
前回の記事では、初めてMacのターミナルでCSRを作ってみたところまでを記事にしていました。

今回はそのCSRで取得申請したSSL証明書をMovableType.netにインストールするところまでを記事にしておこうと思います。
前回の続きなので、使用しているファイル名等は前回の記事そのままとなります。

続きを読む:
自分で作ったCSRで取得した独自SSL証明書をインストールしてみた

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

ども、どもども、西山です。
この記事は、Movable Type Advent Calendar 2020、11日目の記事です。

このアドベントカレンダーも今年で9回目!
第1回からワタシも参加していて、第4回となる2015年からはワタシが企画させてもらっています。
参加していただいたMT::Loverな皆さん、ありがとうございます!

さて、本ブログの今年のネタですが、もう毎年恒例となりましたMovableType.net Dashboard Utilityのバージョンアップ(12月9日リリース、ver 0.5.0)についてご紹介します!
MovableType.netに今年実装されたブロックエディタについて書こうかとも思ったのですが、アドベントカレンダーならこっちだよなと言うわけで、ブロックエディタについては他の記事もあわせてご覧ください。
ちなみに、今回のバージョンアップでも「ブロックエディタが追加されたからこそ」という機能がありますよ!

2020.12.15
version 0.5.1 をリリースしています。
テンプレート編集時に保存できない不具合が出ていました!失礼しました。
ご指摘いただいた天野さん、ありがとうございました!

Dashboard Utilityは、MovableType.netの管理画面を使いやすくするChromeエクステンション(無償)で、過去5年間ちょっとづつバージョンアップをしています。
昨年、まとめ記事を書きましたので「どんなことができるか」はこちらをご覧ください。

現在、40名ほどの方にご利用いただいているみたいです。
ありがとうございます!
では、さっそく今回のバージョンアップ内容の紹介へ参りましょうー!

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

MTDDC Meetup TOKYO 2020に参加、セッションを担当しました!

こんにちは、どもども。
2020年10月10日(土)にオンライン開催されたMTDDC Meetup TOKYO 2020に参加、そして登壇してきました!

当日はおよそ340名の参加申込となる大変大きなビッグイベントになりました。
オンライン開催ということで全国各地から参加できたおかげか、参加者数は過去最大の300名ほどだったようです。すごい!

Zoom ウェビナーを使用して2トラック並行開催、TechnologyトラックとStrategyトラックで合計18セッションが行われました。
私はTechnologyトラック 17時〜に「遂にキタ!MTはMTのブロックエディタはイノベーションを起こすのか」と題してお話させていただきました。

て…、Technology…と最初は思ったのですが、なんとかお役目を果たすことができました(苦笑)
今回はそのセッション内容のフォローアップを書いておこうと思います。

続きを読む:
MTDDC Meetup TOKYO 2020に参加、セッションを担当しました!

【MovableType.net】同じフォルダに含まれる下層ページをウェブページ内で一覧表示するカスタムブロックを作ってみた

ども、どもども、西山です。

先日、Movable Typeユーザーが主催するイベント MTDDC Meetup TOKYO 2020 に登壇し、セッションを担当してきました。
こちらのセッションに関するフォローアップ記事はまたあらためて書こうと思いますが、今日はその中でもご紹介した「カスタムブロックで作ってみたシリーズ第3弾」を記事にしようと思います。

第1弾:YouTube動画埋め込み時のブロックエディタの見た目をカスタムスクリプトで解決してみた
第2弾:テーブルのレスポンシブ対応を選択できるカスタムブロックを作ってみた

Movable Typeのウェブページ内にその下層ページを一覧表示する

コーポレートサイトなどを構築する際、このような構造になった「インデックスページ」を作成する機会も少なくないと思います。

会社案内という親ページの中に、その下層となる3つのページ「会社概要」「代表あいさつ」「支店所在地」へのリンクを設けるページです。
今回は、このようなインデックスとなる親ページをMovableType.netで作ってみようと思います。

続きを読む:
【MovableType.net】同じフォルダに含まれる下層ページをウェブページ内で一覧表示するカスタムブロックを作ってみた

【MovableType.net】テーブルのレスポンシブ対応を選択できるカスタムブロックを作ってみた

ども、どもども。
MovableType.net大好き、西山です。

相変わらずMovableType.netのブロックエディタを研究している日々。
今回は「テーブル(表)のレスポンシブ対応」を考えてみました。

ブロックエディタに限らず、いわゆるWYSIWYGエディタを使用すると、テーブルのレスポンシブ対応って面倒ですよね。
すべて同じ対応・表示方法なら困らないですが、いくつかパターンを用意しようと思うと、WYSIWYGエディタだけでは実現できないことも多いです。(htmlソースに手を加えなきゃならない)
HTMLに明るい方であればそれでも良いのですが、そのような知識がない方でも同じように使えると便利です。

MovableType.netで実現するそれ以外の方法として思いつくのは、それぞれのパターン別にカスタムブロックを用意する方法ですね。
ブロックエディタを使用する前提で考えると、そのパターンは多くて2〜3種類かと思うので、私も最初はそれで考えていました。
MovableType.netのカスタムブロックは、任意のブロック(ex. div.hoge)でそのブロックを囲むことができたり、カスタムブロックそのものに任意のclassを設定できたりするので十分に対応できます。

ただそんな中、シックス・アパートさんの記事「ソースコードを表示するブロックの作り方」を見ていて、これと同じようにどのパターンでテーブルをレスポンシブ対応するか、パターンを選択できるメニューを表示して、テーブルのカスタムブロックを1つにまとめることができたら解決できるなと考えました。

というわけで、今回は私がやってみたカスタムブロックを紹介しようと思います。

続きを読む:
【MovableType.net】テーブルのレスポンシブ対応を選択できるカスタムブロックを作ってみた

【MovableType.net】カスタムブロックはいくつまで作れるのか、そしてショートカットにはいくつまで登録できるのか

ども、どもども。
MovableType.net大好き、西山です。

MovableType.netのブロックエディタ、特にカスタムブロックがすごく便利だと思っていろいろとテストしている中で、ふと気になったことが…

カスタムブロックって、いくつまで作れるんだろう?
そして、そのショートカットはいくつまで登録できるのだろう?

あれ…気になりませんか?
私は気になりました(笑)

というわけで、公式サイトのマニュアルを見る限り特に制限は書いていないので、実際に試してみることに。

続きを読む:
【MovableType.net】カスタムブロックはいくつまで作れるのか、そしてショートカットにはいくつまで登録できるのか

【MovableType.net】ブロックエディタの表示設定を変えて使いやすくしてみた

ども、どもども。
MovableType.net大好き、西山です。

先日の記事では、MovableType.netのブロックエディタの見た目を「カスタムブロック」と「カスタムスクリプト」で調整してみたことを書きました。

その後もいろいろと「より使いやすく、実際の出力と同じ見た目にしたい」と思い、試しているところです。

そんな中、今日は「ブロックエディタの表示設定を変更してより使いやすいエディタ」にしてみようと思います。
ごくごく簡単な設定だけのことではありますが、エディタが使いやすくなりました。

続きを読む:
【MovableType.net】ブロックエディタの表示設定を変えて使いやすくしてみた

【MovableType.net】YouTube動画埋め込み時のブロックエディタの見た目をカスタムスクリプトで解決してみた

ども、どもども。
しばらくご無沙汰しておりました、西山です。

以前、Movable Typeのブログ記事に埋め込むYouTube動画をレスポンシブ対応するという記事を書いたことがあります。
この方法は今現在もこのブログでも使っていて、こんな感じでレスポンシブ対応しています。

いい感じ。

ただこのブログでも利用しているMovableType.netなどでは、リッチテキスト形式を利用している場合、埋め込んだYouTube動画が記事編集画面では以下のような感じで表示されてしまうんですよね…。

エディタ画面

せっかくのリッチテキスト形式(実際に表示されるページとほぼ同じ見た目にできる)なのに、これはすごく残念。

でも大丈夫!
今年6月にMovableType.netでリリースされたブロックエディタを使用すると、記事編集画面でもきちんとプレビューできるようになります。

記事編集画面を表示側と同じCSSで装飾できるエディタCSSと組み合わせれば、ほんとに「見たまま」の編集ができるようになるので、この記事ではブロックエディタとカスタムブロック、カスタムスクリプトを使用して「記事編集画面でも実際の画面と同じように見えるYouTube動画の埋め込み方法」をまとめてみようと思います。

なお、レスポンシブ対応については事前にこの記事と同じように実施している前提となっていますので、そちらもあわせてご覧ください。

続きを読む:
【MovableType.net】YouTube動画埋め込み時のブロックエディタの見た目をカスタムスクリプトで解決してみた

MovableType.netで記事(ウェブページ)を関連付けしてみた

ども、どもども

本ブログでも利用しているMovableType.net、新たな機能が追加されました。

これまでソフトウェア版のMovable TypeではMTAppjQueryを利用して実装していた同機能、これがMovableType.netでも利用できるようになったのは良いニュース。
この機能の具体的な利用例は以下でも紹介されています。

というわけで早速試してみました!

続きを読む:
MovableType.netで記事(ウェブページ)を関連付けしてみた

ブログ記事の目次をJavaScriptで自動生成してみた

ども、どもども。

先日、ブログデザインをリニューアルしたときから記事の中に目次をつけたいと思っていたので、この週末にやってみました。

当初、JavaScriptでゼロからチャレンジしてみようと思っていたのですが、調べてみるとjQueryのプラグインなどもすでにあったので、今回はそちらを利用することに。

今回使用したのはこちら。
なんと、2014年の記事!(小粋空間さん、いつもお世話になっております)

ブログ記事の目次については賛否両論ありますが、ワタシもここ最近になってnoteを読むことが増えたり技術系のブログを読んでいるときに「目次って便利だな」と思うようになった感じです。

利用方法は配布元サイトにも書いてありますが、今回設置した手順をまとめておこうと思います。

続きを読む:
ブログ記事の目次をJavaScriptで自動生成してみた

[まとめ]DashBoard Utilityの詳細解説!

こんにちは。
この記事は、Movable Type Advent Calendar 2019の13日目の記事です。
一つ前の記事は、宮永さんの DockerでMovable Type for AWSを驚くほど簡単に無料SSL化する です。

---

今年もAdvent Calendarの季節がやってまいりました。
2012年からスタートして、今年で8回目、私も毎年参加しています。

2016年にはMovableType.netで複数のウェブサイトを開発・運営する際に便利に使えるMovableType.net DashBoard Utility(Chrome拡張機能/無償)を公開し、そこから4年、少しづつバージョンアップをしてきました。

2019年12月11日現在、25名の方にご利用いただいております。
多いのか、少ないのか、微妙な数字ですが(苦笑)

今年の夏にリリースされた「サイトサーチ」にも、もちろん対応しています。
https://movabletype.net/sitesearch/

さて、そんな感じで機能追加をしてきたこのエクステンションですが、現在では以下のような機能を持っています。

  1. 各ウェブサイト/フォームのパネルが開閉式になり、高さが極端に狭められる
  2. 新しくウェブサイトを作るためのリンクが最上部へ移動する
  3. 新しく作成したウェブサイトが最上部に追加される
  4. ウェブサイトの順序を任意に変えられる
  5. パネルの開閉、ウェブサイトの順序をCookieに保存できる(1年/変更の都度延長)
  6. ダッシュボードから直接、ウェブサイト/ブログのテンプレート編集画面へ移動できる
  7. ファイルマネージャ内で画像のサムネイルを表示する
  8. MT.netフォーム、サーチサービスにも対応

私がセミナーなどに登壇する際、このエクステンションもご紹介することが多いのですが、一つ一つの機能を紹介する機会もなく、弊社のスタッフでさえ「え、そんな機能があったのですか!(標準機能だと思ってた)」なんて事があるので、今日はそれら機能についてスクリーンショットを混ぜながら、まとめてご紹介しようと思います!

続きを読む:
[まとめ]DashBoard Utilityの詳細解説!

MovableType.net Dashboard Utility ver0.4.50リリース!

ども、どもども。西山です。
今年も残すところあと2週間ちょっととなりましたね。
1年があっという間です...。

というわけでこの記事は、Movable Type Advent Calendar 2018の12日目の記事になります。

またかと思われる方もいるかも知れませんが、今年もMovableType.net Dashboard Utilityをバージョンアップさせましたよ!(3年連続!)
今年11月、MovableType.netの新サービス「MovableType.net フォーム」がリリースされていた際も少しバージョンアップしていたのですが、その際は特にリリースなどを書かなかったので、今回まとめてご紹介しちゃいます!

MovableType.net Dashboard Utilityはウェブブラウザ「Chrome」の拡張機能で、MovableType.netで複数(それも割と多く)のウェブサイトを管理されている方にぴったりなエクステンションです。
Chromeストアから無料でダウンロードできるので、気になる方はぜひ使ってみてくださいね。

続きを読む:
MovableType.net Dashboard Utility ver0.4.50リリース!

MT東京-45でセッションを担当してきました!

ども、どもども。
去る3月10日、渋谷のロフトワークCOOOP10で開催された「【MT東京-45】進化するMovableType.net事例特集&なかなか聞けないお金事情」にて、セッションを担当してきました。

DSC02487.jpg

数ヶ月前になりますが、MT東京の藤さんにイベント登壇依頼をいただき、今回のテーマがMovableType.netで、ワタシも普段からよく利用しているサービスだったこともあってもちろん承諾。
どんな内容がいいですかねーって感じで相談している中で、「おそらくMovableType.netを利用してウェブサイト構築を請け負っている制作会社さんの参加が多くなるだろう」「他の制作会社がどんな感じ(費用感・利用ケース)で請け負っているのか知りたいのでは」ということにクローズアップして構成しようという話になりました。

続きを読む:
MT東京-45でセッションを担当してきました!

MovableType.net Dashboard Utilityのバージョンアップ

ども、どもども、西山です。
この記事はMovable Type Advent Calendar 2017の13日目の記事です。
昨年のこの企画で、MovableType.netのダッシュボードを使いやすくするChromeエクステンションを公開しました。

それから1年、今年はこのエクステンションをぷちバージョンアップし、version 0.3.0をリリースしました!
MovableType.netをご利用の方、特にウェブサイト制作会社さんなど、クライアントのウェブサイトを多数管理している方にご利用いただきたいエクステンションです。

続きを読む:
MovableType.net Dashboard Utilityのバージョンアップ

MovableType.net Dashboard Utility 作りました。

screen05.jpg

ども、どもども、西山です。
この記事はMovable Type Advent Calendar 2016の14日目の記事です。

さて、皆さんはMovableType.netというサービスをご存知でしょうか?
詳細は公式サイトに任せるとして、ざっくり簡単に言ってしまうと、私の大好きなMovable Typeを安価でメンテナンスフリーで安心して利用できちゃうサービスです。
ソフトウェア版やクラウド版と機能面での差異はあるものの、このサービス独自の機能などもあり特に今年1年は多くのお客さまに導入させていただきました。
弊社開発実績はこちらにて

このMovableType.netは2015年2月に正式公開されたのですが、それから今までの約2年間であれよあれよと新機能が追加になっています。
例えば、当初は搭載されていなかったテンプレート編集画面のシンタックスハイライト機能。
2015年12月末にChromeエクステンションで私が作成していたのですが、それもめでたく2016年10月には本体にも標準機能として実装されました。
(私が作ったエクステンションも独自機能があるのでまだ公開しております)

そんなわけで、弊社で新規にウェブサイトを構築する際にも、MovableType.netをご提案する機会が増え、そして導入していただくケースも増えてきました。
ところが...どんどんクライアントさんのサイトをMovableType.netで構築すればするほどある問題が。

それが「MovableType.net、ダッシュボードがどんどん使いづらくなる問題」でした。

続きを読む:
MovableType.net Dashboard Utility 作りました。

SyntaxHighlight for MovableType.netリリース、そしてGitHubで公開。

ども、どもども。
2016年もいよいよスタートです。
今年もよろしくお願いします。

皆さん、MovableType.netって使ってますか?
私は個人的にも好きで、弊社案件でも使い始めています。

非常に良いサービスなんですが、まだサービス開始から1年ほどということで、いくつか要望みたいなものがあります。
そのうちの1つに「テンプレート編集画面で、HTML/MTMLがシンタックスハイライトされないので見づらいのをなんとかしたい」というのがありました。
うちのスタッフさん(Webデザイナー1年生)がテンプレート編集を頑張っているのを横目に見てて、シンタックスハイライトされていればもっと使いやすいんだろうな~と考えていたのです。

そこで、そのシンタックスハイライトを実現するChromeエクステンションを作ってみました!
Chromeにインストールしてもらうと、下のスクリーンショットのようにソフトウェア版のMovable Typeと同じようにシンタックスハイライトしてくれます。

Syntax Hightlight for MovableType.net

Syntax Hightlight for MovableType.net

続きを読む:
SyntaxHighlight for MovableType.netリリース、そしてGitHubで公開。

MovableType.netのデザインをGitHub連携でやってみる with SourceTree & Brackets

こんにちは、西山です。
ここのところ更新が滞っている感じですが、皆さんいかがお過ごしでしょう(汗)

さて、今日は「MovableType.netのデザインをGitHub連携でやってみる with SourceTree & Brackets」と題して備忘録を...。
上手く行ったことはこうやって書き記しておかないと、後で自分がわからなくなりそうで(笑)

各サービス/アプリケーションについては、その紹介を割愛させていただきますのでご了承ください。

MovableType.net
GitHub
SourceTree
Brackets

ではさっそく行ってみましょうー!
今日の手順はこちら

  1. GitHubでアカウントを作成する
  2. SourceTreeでローカルリポジトリを作成する
  3. MovableType.netでGit連携する
  4. 実際にコミット/プッシュしてみる
  5. BracketsでMTMLにシンタックスハイライトを適用する

続きを読む:
MovableType.netのデザインをGitHub連携でやってみる with SourceTree & Brackets

アクセスの多い記事