どうも、まさとらん（@0310lan）です。
今回は、既存のWebサイトを究極にシンプルなCMSっぽく管理することができる無料のWebサービスをご紹介しようと思います！
このサービスを活用すれば、Webサイトのテキストや画像などの編集、サイトの更新作業などを直感的に誰でも行うことができるようになります。
【 Simpla】
■「Simpla」とは？
まず最初に、「Simpla」がどのようなサービスなのかを実際に見ていきましょう！
以下に、「Simpla」を導入したサンプルサイトがあります。
見た目はごく普通のWebサイトですが、URLの末尾に「#edit」と追記して再読み込みします。
すると、専用の「ログイン画面」が表示されます！
「Simpla」アカウントでログインすると、画面上でそのままコンテンツを編集できるようになります！
（編集できる箇所、できない箇所の設定も可能です）
また、画像を差し替えたり、ズームイン・アウトなどの編集も簡単です。
最後に、「Save」ボタンをクリックすれば、即座にWebサイトへ反映されて編集作業は完了というわけです。
まるで、Wordやパワーポイントで資料を作っているような感覚なので、誰でも手軽に作業を進められるのが特徴でしょう。
「Simpla」のダッシュボードでは、複数のWebサイトのコンテンツを管理することが可能で、チームによる運用も手軽にできるように設計されています。
制作するWebサイト自体は、普通にHTML / CSS / JavaScriptで好きなようにプログラミング可能なので、シンプルでありながらも自由度はかなり高いと思います。
■基本的な導入方法！
さて、「Simpla」のイメージを掴んだところで、Webサイトへどのように導入していけばいいのかを解説していきたいと思います！
まずは、サイトにアクセスしてトップ画面にある「get started free」ボタンをクリックして無料のユーザー登録を済ませましょう。
登録後に、自分の管理画面となる「ダッシュボード」が表示されます。
早速、新しいプロジェクトを作るために、「start a project」ボタンをクリック！
適当な「プロジェクト名」を入力しましょう。
すると「Setup」画面になるので、表示されているコードをコピーします。
このコードを、導入したいWebサイトのHTMLファイルにコピペすれば完了です！
（headタグの一番最後にコピペすればOK…）
導入はこれだけ。簡単ですね！
ここで重要なのは、わずか1行のこちらのコードです！
<script>Simpla('【プロジェクトID】');</script>
たった1行のJavaScriptですが、これを記述するだけで「テキスト」や「画像」などのコンテンツを、「Simpla」のサーバーに保存・削除する作業をプログラミング不要で自動化してくれるようになります。
■編集可能な範囲を設定しよう！
さて、基本的な導入が完了したので、URLの末尾に「#edit」を追記して再読み込みをすれば「ログイン画面」が表示されるはずです。
ただし、Webサイトのどの部分を編集可能にするかを設定していないので、現時点ではログインができてもコンテンツは編集できない状態です。
そこで、どの部分を編集可能にするかを設定するために、「simpla-text」と「simpla-img」という2つの新しいHTMLタグを利用します。
<!-- テキストを編集可能にするタグ --><simpla-text></simpla-text><!-- 画像を編集可能にするタグ --><simpla-img></simpla-img>
使い方は非常に簡単で、例えば「テキスト」を編集可能にするには、すでに「h1」や「p」タグなどで囲まれている部分に「simpla-text」タグを追加するだけです！
<h1><simpla-text sid=”title”>サンプルサイト</simpla-text></h1><p><simpla-text sid=”main-text”>テキストテキストテキスト</simpla-text></p>
「simpla-text」タグを挟み込むだけなので簡単ですが、ポイントは「sid名」を指定しているところです。
これは、CSSのクラス名のようにどんな名前を指定してもいいのですが、同じ「sid名」を指定するとテキストの内容も同じになるという特徴があるので、必ず異なる「sid名」にしておきましょう。
画像については、「img」タグを「simpla-img」タグに置き換えるだけです。
<!-- 置き換え前 --><imgsrc=”画像のパス”><!-- 置き換え後 --><simpla-img sid=”picture1”></simpla-img>
画像の場合も同じように「sid名」を指定します。
また、画像についてはログイン後の「編集モード」にすることでグレーカラーの四角が表示されるので、クリックして画像ファイルをアップロードします。
あとは、編集したいコンテンツ部分に「simpla」タグをどんどん追記していくだけです。
つまり、「simpla」タグが記述された箇所はログイン後に編集ができるようになり、「simpla」タグが無い箇所はログイン後も編集できないというわけです。
■ちょっとだけ高度な使い方！
ここまで解説した内容だけで、「Simpla」を充分に使いこなせるようになっていると思います。
ただ、他にも便利な機能を数多く搭載しているので、ほんの一部ですがピックアップしてご紹介しておきます！
まず、同じ「sid名」だとコンテンツが同じになってしまうので、異なる「sid名」を付けるように先ほど説明しましたが、実はこれを回避する方法が1つ用意されています。
それが「simpla-block」というタグを使う方法で、特定のコンテンツをブロック単位に分けることができるようになります。
例として、「simpla」タグを含む以下のようなHTMLがあったとします。
<div><simpla-text sid="title">画像タイトル</simpla-text><simpla-img sid="image"></simpla-img></div><div><simpla-text sid="title">画像タイトル</simpla-text><simpla-img sid="image"></simpla-img></div>
divタグで2つのコンテンツに分けていますが、「sid名」がどちらも同じなので「テキスト」も「画像」も同じモノになってしまいます。
ところが、ここで「simpla-block」を活用することで、「sid名」が同じでも異なるコンテンツを保存することができるようになるのです。
使い方は以下のとおり！
<div><simpla-block sid=”first-contents”><simpla-text sid="title">画像タイトル</simpla-text><simpla-img sid="image"></simpla-img></simpla-block></div><div><simpla-block sid=”second-contents”><simpla-text sid="title">画像タイトル</simpla-text><simpla-img sid="image"></simpla-img></simpla-block></div>
このように「simpla-block」タグで囲い込むことで、それぞれのブロック内で同じ「sid名」を使っていても、異なるコンテンツを作成することができるようになるわけです。
似たようなコンテンツが並ぶ時など、「sid名」が増えすぎて混乱しそうなケースで有効に活用できると思います。
（simpla-blockタグのsid名は異なるモノを指定する必要があります）
さらに、「simpla」タグで記述されたコンテンツは、JavaScriptで操作することも可能です！
よく使うメソッドとしては「Simpla.get()」と「Simpla.set()」が用意されています。
「Simpla.get()」を使うと、コンテンツの「sid名」や「テキストデータ」などをJSONで取得することができます。
Simpla.get('【sid名】')
.then(function(data) {
// 指定した【sid名】のコンテンツデータをJSONで取得
console.log(data);
})
「Simpla.set()」を使うと、任意の「sid名」が付けられた「simpla」タグのコンテンツを書き換えることができます。
Simpla.set('【sid名】', {
id: '【sid名】',
// ここでテキストを書き換えられる
text: 'ここにテキストを入力'
})
.then(function(data) {
// 書き換え後のコンテンツデータをJSONで取得
console.log(data);
})
ただし、「Simpla.set()」はログイン処理後に実行する必要があるので、サーバー側（Node.js）で記述するのが一般的でしょう。（詳細は公式ドキュメントを参照）
これらの機能を活用すると、例えば「simpla-block」の「sid名」をプログラムで動的に変更して、表示するコンテンツを差し替えるような処理も簡単に実現させることができますね。
「simpla」タグを利用したサンプルサイトのソースコードを以下のリンクから閲覧することができるので、ぜひ参考にしてみてください！
■JavaScriptやHTML/CSSの講座も今だけ無料！動画でプログラミングが学べるレッスン
paizaは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を、新サービスとして独立オープンいたしました。
これを記念して、2017年2月12日までの期間限定で【全ての動画が無料で見放題】＆【演習問題を解いてツイートするだけでAmazonギフト券が当たる】キャンペーンを実施中です。
特に今回記事の中で使用しているJavaScriptやHTML/CSSの講座は、普段は有料となっております。ぜひ無料公開中のこの機会にごらんください！
↓詳しくはこちら
■まとめ
「Simpla」は、複数のプロジェクトを無料で作成することができるので、多数のWebサイトに「simpla」タグを追記して管理することができるのも魅力の1つだと言えます。
また、プロジェクトに任意のユーザーを招待して共同で運用することも可能だし、活用次第ではブログのようなコンテンツにも対応できるでしょう。
まだまだ開発途上のサービスですが活発にアップデートも行われており、「ロードマップ」や「ドキュメント」なども整いつつあります。
シンプルにWebコンテンツを管理したい人や、複数人でサイトを運用する必要がある場合などは、ぜひ「Simpla」を試してみることをオススメ致します！
