www.ni4.jp

【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動画埋め込み時のブロックエディタの見た目をカスタムスクリプトで解決してみた

45日間のリモートワーク生活をやってみた

Photo by Andrew Neel on Unsplash

ども、どもども。

2020年5月31日、新型コロナウィルス感染症の拡大防止のための緊急事態宣言が解除され、まだまだ予断は許さないものの、日常が少しづつ戻ってきました。

北海道で2度めの緊急事態宣言が始まる少し前、北海道・札幌市の緊急共同宣言をうけ、弊社では4月14日から5月6日までのリモートワーク推奨期間へと入りました。
その後、全国的な緊急事態宣言が5月7日以降も延長されることになり、弊社でも5月31日までこれを続けることになります。

弊社ではもともとメンバーの複数名がWork From Home(WFH/自宅勤務)中心で活動していたこと、他のメンバーにも週に2回の自宅勤務を可能とする体制があったこと、ワタシ自身が創業後10年近く自宅事務所であったこともあり、各メンバーへのヒアリングでも「普段どおりに仕事ができている」と、特に混乱なく移行することができました。

というわけでこのブログ記事では、この45日間ほどを振り返り、ワタシあるいは弊社が取り組んできたWFHの感想や今後の改善点、仕事環境や利用しているツールなどをまとめてみようと思います!

続きを読む:
45日間のリモートワーク生活をやってみた

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

ども、どもども

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

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

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

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

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

ども、どもども。

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

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

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

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

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

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

コロナ禍を乗り切る Survive The Corona キャンペーンへの想い

今、日本全国で話題になっているコロナ禍、政府から出された緊急事態宣言も5月末までの延長が決まり、さまざまなメディアでも連日報じられ、その影響は計り知れない状況と思います。
不要不急の外出を控えるなど日常生活にも多大な影響が及んでおりますが、特に事業者の皆さまにとっては甚大な影響が出ているものと思います。

そのような中、弊社にもなにかできることはないかと考えた結果、4月21日から5月末までを予定したネットショップ構築支援キャンペーン「Survive The Corona」を実施することになりました。

このキャンペーンでは以下のサービスを提供いたします。

  1. 弊社製品 SKELETON CARTを利用し、短期間・低予算でネットショップを構築
  2. ライセンス費用(30,000円税別)を6ヶ月間据え置き、後払いにて対応
  3. 必要に応じて、ドメイン・サーバー等の手配を無償にて代行
  4. 構築・設置作業等を無償にて代行
  5. クレジットカード決済導入を無償にて代行
  6. 契約期間6ヶ月後は弊社との契約続行に関わらず自身での継続運営が可能

キャンペーン詳細については上記の特設ページをご覧いただくこととして、今日はなぜこのキャンペーンを始めようと思ったのか、どのように利用してもらいたいか、そしてこのキャンペーンへの想いを書き起こしておこうと思います。

続きを読む:
コロナ禍を乗り切る Survive The Corona キャンペーンへの想い

ブログデザインをリニューアルしました

ども、どもども。

このブログ、今から6年ほど前の2014年3月にスタートて以来、ずーっと同じデザインのままでしたが、このたびやっとリニューアルしました!

構想からまる2日、思い立ったが吉日とばかりに勢いで。
でも、思ったほど時間はかからなかったな、という感じ。

  • ブログのレイアウトや構成はこれまでと同じでOK
  • 記事への導線はSNS投稿からのリンクと検索エンジンからで、90%超の直帰率
  • トップページへのアクセスはほとんどない(過去1年で約1.5%)
  • テンプレートは2種類あれば十分
  • デザインはBootstrapとFontAwesomeで十分
  • Movable TypeからMovabeType.netへの移行で簡単

こんな感じの構想ができていたので、着手から完了まではほんとにすぐでした。
むしろ、トップページのメインビジュアルをどうするかで半日くらい悩むほど…どうでもいいのに(そして結局なにもいれないことに笑)

GWの連休中ではあるけれど、ほかにすることも無いしね(苦笑

というわけで、今後ともこのブログをお楽しみください!

Stripeのチームメンバーでアカウントを共有する

スクリーンショット 2020-04-23 0.00.40.png

ども、どもども。
ここ最近、弊社ではクライアントのウェブサイトでクレジットカード決済を導入する際、Stripeを導入することが多いです。
弊社では自社製品 SKELETON CART を開発・販売していますが、それにこの決済サービスを組み込んだ新バージョンも近々リリースする予定です。

さて、そんなStripeですが、クライアントさんからの依頼で導入する際、ちょっと面倒なことがあります。
このサービスでは、アカウントのサインインに2段階認証を利用することが前提になっていて、1つのアカウント(メールアドレスとパスワード)をクライアントさんと開発者(弊社)で共有することが難しいのです。
普通に考えたら、パスワードを共有するなんてのは好ましくないのはわかりますが、では導入の初期設定時はどうしたら良いんだろう?と考えていました。

ちなみに、公式サイトのサポートにはその方法が書かれているのですが、ウェブ上には具体的にその部分を説明した記事などがなかったので、今日はその部分について解説したいと思います。

続きを読む:
Stripeのチームメンバーでアカウントを共有する

アクセスの多い記事