小粋空間

ナビゲーションをスキップする

MovableType 7の一覧画面で一括編集できる「PowerListingFieldEditorプラグイン（コンテンツデータ対応）」

August 31,2018 12:03 AM
Category：[記事一覧]
Tag：[MovableType, Plugin, PowerListingFieldEditor]
Permalink

MovableType 7の一覧画面で一括編集できる「PowerListingFieldEditorプラグイン（コンテンツデータ対応）」を公開します。

１．機能

本プラグインを利用することで、コンテンツデータ（ユーザ定義のデータ）などを一覧画面から一括編集できるようになります。

デフォルトの一覧画面（クリックで拡大、以下同様）

PowerListingFieldEditor導入後の一覧画面

また、編集したいフィールドは表示オプションを使い、表示・非表示を切り替えることができます。

コンテンツデータで対応するフィールドは現在のところ下記になります。

テキスト
テキスト（複数行）
数値
URL
日付と時刻
日付
時刻
セレクトボックス
ラジオボタン
チェックボックス
埋め込みテキスト
カテゴリ
タグ
画像（複数対応・アップロード可能）

既知の不具合がありますので今後対応していく予定です。

２．プラグインのダウンロード

PowerListingFieldEditorプラグインは下記の公式ページから評価版をダウンロードできます。

PowerListingFieldEditorプラグイン

Comments [0] | Trackbacks [0]

Riot初歩の初歩

August 29,2018 12:03 AM
Category：[Riot]
Tag：[Riot]
Permalink

Riot（ライオット）は、HTMLの中にJavaScriptやCSSを書くことができる、シンプルで洗練されたコンポーネントベースのUIライブラリです。

riot

が一度も触れたことがないのでまったくわからず、ネットで調べても頭にスッと入ってくる情報がなかなかみつかりません。

ということで、簡単なサンプルを使って、Riotの機能について紹介してみます。

１．サンプル

サンプルは、h1要素に「Hello World!!」を表示します。

riot

用意するのは、カスタムタグ（後述）を記述するためのtest.tagと、ウェブページを表示するindex.htmlの2つです。

test.tag

<test>
  <h1>{ opts.title }<h1>
</test>

index.html

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <test></test>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
  <script type="riot/tag" src="test.tag"></script>
  <script>riot.mount('test', { title: "Hello World!!" });</script>
</body>
</html>

2つのファイルは同じディレクトリに配置します。

index.htmlをブラウザで表示すると、前の画像のように「Hello World!!」が表示されます。

以下、Riotの主な機能である「カスタムタグ」と「マウント」の解説です。

２．カスタムタグ

test.tagに書かれた<test>～</test>は、「カスタムタグ」と呼ばれるもので、ユーザインターフェースの構成要素です。ここがアプリケーションの「ビュー」部分を担います。

<test>
  <h1>{ opts.title }<h1>
</test>

カスタムタグの中にscriptタグを書くことができます（サンプルのように省略も可能）。script（ロジック）はHTMLよりも後に記述します。

<test>
  <h1>{ opts.title }<h1>
  <script>
    this.title = opts.title
    console.log(this.title)
  </script>
</test>

scriptタグは省略も可能です。省略した場合、JavaScriptは最後のHTMLタグの直後から始まるものとみなされます。

<test>
  <h1>{ opts.title }<h1>
  this.title = opts.title
  console.log(this.title)
</test>

カスタムタグの中にstyleタグを含めることもできます。

<test>
  <h1>{ opts.title }<h1>
  <style>
    h1 { font-size: 150% }
  </style>
</test>

カスタムタグに標準のHTMLタグを使うこともできますが、方法として推奨されていないようです。

３．マウント

作成したタグは、ページ上（ここではindex.html）でマウントします。マウントすることでカスタムタグの内容がページに反映されます。

まず、カスタムタグと同じタグをページ上の任意の位置に記述します。

<body>
<test></test>
</body>

次に、riot.jsおよび、カスタムタグが書かれたファイルをscriptタグでインクルードします。

<body>
<test></test>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
<script type="riot/tag" src="test.tag"></script>
</body>

そして最後にsrciptタグでmount()を記述します。

<body>
<test></test>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
<script type="riot/tag" src="test.tag"></script>
<script>riot.mount('test', { title: "Hello World!!" });</script>
</body>

mount()の第1パラメータには、マウントしたいカスタムタグ（要素）を記述します。サンプルのカスタムタグは"test"なので、"test"を記述します。

<script>riot.mount('test');</script>

mount()の第2パラメータには、ページに渡したいデータを渡すことができます。サンプルではjsonデータを渡しています。

<script>riot.mount('test', { title: "Hello World!!" });</script>

オプションで渡したデータは、カスタムタグ内の変数optsで参照することができます。Riotの処理はこのようにカーリーブラケットで括るお作法になっているようです。

<h1>{ opts.title }<h1>

これでh1要素の値に「Hello World!!」が埋め込まれます。

chromeでソースを見ると、次のように展開されたカスタムタグがindex.htmlに埋め込まれているのが分かります。

<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css"></style>
  </head>
  <body>
    <test><h1>Hello World!!</h1></test>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js"></script>
    <script type="riot/tag" src="test.tag"></script>
    <script>riot.mount('test', { title: "Hello World!!" });</script>
  </body>
</html>

Comments [0] | Trackbacks [0]