テキストユニットの設定に拡張フィールドを追加する

カスタマイズすることで、テキストユニットの設定に拡張欄を追加できます。「テキストユニットに独自のclass属性を設定したい」とは違い、それぞれのテキストユニット固有の設定を付与することができます。

たとえば、以下の画像ではid属性を追加できるように設定しました。



設定方法

設定をするには管理画面とテンプレート側の設定が必要になります。

管理画面側の設定

管理画面>コンフィグ>編集設定の順にページを移動し、テキストタグセレクトの項目に「拡張」という入力欄があります。この入力欄には、エントリー編集時の入力欄に適応したいラベルを設定してください。

「拡張」の入力欄に値が入っていると、エントリー編集ページで新しく入力欄が表示されます。




テンプレート側の設定

/themes/オリジナルのテーマ/include/unit.html を修正します(※オリジナルのテーマに/include/unit.htmlがない場合は、systemテーマからコピーしてください)。

{extend_tag}という変数を適応したいテキストタグセレクトに追加してください。たとえば、h2要素にid属性を付与したい場合は以下のように記述してください。

<!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h2><!-- END h2 -->

※最新バージョンではh2,h3,h4,h5要素にはデフォルトで/include/unit.htmlにid属性を適用するための記述が行われています。

「テキストユニットの設定に拡張フィールドを追加する」方法は以上となります。確認すると、エントリー編集時に入力した値が反映されているはずです。

X(旧Twitter)アカウントを使ったログイン・サインアップ

X(旧Twitter) APIを使用してログイン・サインアップする機能があります。この機能を利用することで簡単にa-blog cmsへログインできる様になります。またサインアップ機能(読者登録)も対応していますので、読者登録を実装されている場合は有効なカスタマイズになります。

X(旧Twitter)APIの設定

Xアカウントを使ったSNSログインのための準備として、a-blog cms の 管理ページ>コンフィグ>ログイン設定 にあるX(旧Twitter)欄の「Consumer Key」と「Consumer Secret」の2つの情報が必要になります。この2つの情報は、 独自のTwitterアプリを作成することで入手できます。


API Keyと API Secretの設定画面

API Keyと API Secretの設定画面

アプリの作成手順

この手順は2016年05月現在のものです。Twitter側の仕様変更がされる場合がありますのでご注意ください。

  1. Twitter のアプリケーション登録ページ( https://apps.twitter.com )から、申請を行う必要があります。この時点でログインしているアカウントが表示や投稿に関連づけられます。画面右側の「Create New App」から新しいアプリケーションの作成を行います。

Twitter Application Managementの画面

Twitter Application Managementの画面


2.Application Detail の各欄を入力します。 Name、Descriptionにはわかりやすい名前と概要を入力し、Websiteには対象となるa-blog cmsのブログURLを入力してください。 Callback URLには以下の内容を入力してください。

対象となるa-blog cmsのブログURL/callback/signin/twitter.html

画面下部の規約に同意して登録を完了してください。


アプリケーション作成画面

アプリケーション作成画面


3.アプリケーションの作成が完了すると、情報の確認や設定の変更ができます。以下の内容を変更してください。

Application Settings内「Access level」

基本のアクセス形式です。 (modify app permissions)のリンクからデフォルトは「Read & Write」ですが、SNSログインは「Read only」で実行できます。


SNSログインは「Read only」で実行できます

SNSログインは「Read only」で実行できます


Keys and Access Tokens

a-blog cmsとの連携には、このタブで表示される「Consumer Key (API Key)」と「Consumer Secret (API Secret)」が必要になりますのでメモをしておいてください。


Keys and Access Tokensの画面

Keys and Access Tokensの画面


a-blog cms 側の設定

SNSログインのためのa-blog cms側での設定は大きく3つあります。

  • APIキーの設定
  • SNSログインのための設定
  • ユーザーごとの設定

1. APIキーを設定

APIキーは 管理ページ>コンフィグ>ログイン設定 から設定できます。


APIキーの設定画面

APIキーの設定画面


2. SNSログインのための設定

ブログ全体でのSNSログイン機能と対象についての設定は 管理ページ>コンフィグ>ログイン設定 から行います。

SNSログイン機能 のチェックで該当ブログでの機能を有効化します。SNSログイン使用権限 では、SNSログイン機能が使えるユーザー権限を設定します。


機能設定画面

機能設定画面


3. ユーザーごとの設定

「2. SNSログインのための設定」でブログでのSNSログイン機能を有効にすることで、 該当ブログに所属する各ユーザーのプロフィール変更画面 にSNSログインのための項目が表示されるようになります。

https://example.com/mypage/update-profile/

SNSで認証(または認証解除)することで、ログイン情報とこのユーザーが関連づけされます。ログイン状態がユーザーに関連づけされますので、この設定は管理者が変更するのではなく、各ユーザーが個別に行うものとなります。


プロフィール変更画面でSNSと関連づけます

プロフィール変更画面でSNSと関連づけます


認証がされている場合は「認証」ボタンが「認証解除」に変わって表示されます。各サービスの認証ボタンを押した時、サービスにログインしていない場合は、各サービスの認証画面が表示されます。ここでログインすることで、このユーザーでのa-blog cmsのSNSログインが有効になります。

ログインするには

ここまでの設定が行われていれば、ユーザーID、パスワードを入力しなくても、SNSログインボタンからログインできるようになります。ログイン画面を表示すると、通常のユーザーID、パスワードの入力欄の下に、Xのログインボタンが表示されます。


管理ログイン画面の場合

管理ログイン画面の場合


一般サインイン画面の場合

一般サインイン画面の場合

Facebookアカウントを使ったログイン・サインアップ

Facebookによるログイン機能は、将来廃止予定になります。

Facebook APIを使用してログイン・サインアップする機能があります。この機能を利用することで簡単にa-blog cmsへログインできる様になります。またサインアップ機能(読者登録)も対応していますので、読者登録を実装されている場合は有効なカスタマイズになります。

facebook for developersの設定

Facebookアカウントを使ったSNSログインのための準備として、a-blog cmsの 管理ページ>コンフィグ>ログイン設定 にあるFacebookの「Application ID」と「Appliction Secret」の2つの情報が必要になります。この2つの情報は、 独自のFacebookアプリを作成することで入手できます。


Facebook API のキー設定画面

Facebook API のキー設定画面

注意:Facebookアプリの作成には、Facebook開発者登録が必要です。開発者登録がされていない場合には https://developers.facebook.com より事前にご登録ください。

アプリの作成手順

この手順は2016年05月現在のものです。Twitter側の仕様変更がされる場合がありますのでご注意ください。

1.新規アプリを作成画面へ移動します。上部ナビゲーションのマイアプリから「新しいアプリを追加」を選択すると、モーダルウィンドウでプラットフォームの選択画面が表示されます。ここでは「ウェブサイト」を選択します。


facebook for developersの画面

facebook for developersの画面


ウェブサイトを選択します

ウェブサイトを選択します


2.Quick Start for ウェブサイトの画面から、新たに作成するAppの名前(任意のもの)を入力して「新しいFacebookアプリIDを作成」をクリックすると、次の画面へ移動します。


新しいFacebookアプリIDを作成します

新しいFacebookアプリIDを作成します


3.連絡先メールアドレス、対象となるサイトに適したカテゴリを選択して「アプリIDを作成」をクリックして次の画面へ移動します。


Create a New App IDの画面

Create a New App IDの画面


4.「Tell us about your website」のSite URLにFacebookアカウントでのログインを行うサイトのURLを入力します。


ログインを行うサイトのURLを入力します

ログインを行うサイトのURLを入力します


5.アプリの登録ができました。画面下部の「Next Steps」の文中にある「Skip to Developer Dashbord」リンクからダッシュボードへ移動します。


「Skip to Developer Dashbord」リンクからダッシュボードへ移動します

「Skip to Developer Dashbord」リンクからダッシュボードへ移動します


6.ダッシュボード画面ではアプリID とapp secret が確認できます。app secret は非表示になっていますので、 App Secret 欄右側の「表示」で表示して確認してください。


ダッシュボードページ

ダッシュボードページ


これで設定に必要な 「Application ID」「Appliction Secret」 が取得できました。 これらの情報のa-blog cmsへの設定は後述します。

a-blog cms 側の設定

SNSログインのためのa-blog cms側での設定は大きく3つあります。

  • APIキーの設定
  • SNSログインのための設定
  • ユーザーごとの設定

1. APIキーを設定

FacebookのAPIキーは 管理ページ>コンフィグ>ログイン設定 から設定できます。プロパティ設定画面の「ウェブサービス」からFacebook アプリケーションの各情報を登録します。


ログイン設定画面

ログイン設定画面


2. SNSログインのための設定

ブログ全体でのSNSログイン機能と対象についての設定は 管理ページ>コンフィグ>ログイン設定 から行います。

SNSログイン機能 のチェックで該当ブログでの機能を有効化します。SNSログイン使用権限 では、SNSログイン機能が使えるユーザー権限を設定します。


ログイン設定画面

ログイン設定画面


3. ユーザーごとの設定

「2. SNSログインのための設定」でブログでのSNSログイン機能を有効にすることで、 該当ブログに所属する各ユーザーのプロフィール変更画面 にSNSログインのための項目が表示されるようになります。

Facebookログインボタンは、 Facebookで認証(または認証解除)することで、ログイン情報とこのユーザーが関連づけされます。ログイン状態がユーザーに関連づけされますので、この設定は管理者が設定するのではなく、各ユーザーが個別に行うものとなります。


プロフィール変更画面でSNSと関連づけます

プロフィール変更画面でSNSと関連づけます


認証がされている場合は「認証」ボタンが「認証解除」に変わって表示されます。各サービスの認証ボタンを押した時、サービスにログインしていない場合は、各サービスの認証画面が表示されます。ここでログインすることで、このユーザーでのa-blog cmsのSNSログインが有効になります。

ログインするには

ここまでの設定が行われていれば、ユーザーID、パスワードを入力しなくても、SNSログインボタンからログインできるようになります。ログイン画面を表示すると、通常のユーザーID、パスワードの入力欄の下に、Facebookのログインボタンが表示されます。


管理ログイン画面の場合

管理ログイン画面の場合


一般サインイン画面の場合

一般サインイン画面の場合