Ver. 2.0.0.3

CPI向け a-blog cms（通常版）ダウンロード

Ver. 2.0.0.3 CPI新規インストール

a-blog cms利用約款

このa-blog cms利用約款（以下「本約款」といいます）は、使用者(個人または法人)と有限会社アップルップル (以下「アップルップル」といいます)の間における、a-blog cms、関連するソフトウェア部品群、並びにドキュメント（以下「本ソフトウェア」といいます）に関する約款です。

第1条【ライセンス】

使用者は、本約款の定めに従い、本ソフトウェアを利用できるライセンスを有するものとします。使用者は、本ソフトウェアを1台のサーバー上に存在する1つのウェブサイトにインストールすることができます。

第2条【禁止事項】

使用者は、次の各号に定める行為を行ってはなりません。

  1. 本ソフトウェアから派生するソフトウェアを制作すること
  2. 本ソフトウェア又はその複製を如何なる形態においても、第三者に販売、譲渡、ライセンス供与、開示、その他の方法による移転等第三者が使用できるようにすること
  3. 本ソフトウェアの改造、翻訳、逆コンパイル又は逆解析（リバース・エンジニアリング）を、法律上認めている範囲を超えて行うこと及びそれを試みること
  4. 本ソフトウェア上の権限の表示又は商標を変更すること
  5. 本ソフトウェアを公序良俗に反したコンテンツとして使用すること

アップルップルは、本ソフトウェアに関する全ての権利（全ての知的財産権を含む）を保有し、本約款において明示的には許諾していない本ソフトウェアに関する全ての権利をも保有します。

第3条【著作権表示】

アップルップルは、本ソフトウェアを使用するに使用者に対してバナー及びテキストでの著作権表示を強制することはしません。ただし、著作権がアップルップル以外にあると誤認させる行為一切を禁じます。 a-blog cmsが生成するHTMLドキュメントには、下記のコードがHEAD要素内に追加されます。

<meta name="generator" content="a-blog cms" />

第4条【技術サポート】

本ソフトウェアの利用に関して、電話でのサポートは提供されません。
質問、要望を含めた無償サポートは、ウェブサイト上のフォーラムでのみ行われますが、開発元によるサポートを保証するものではありません。 有償でのメールサポートとして、スタンダードライセンスに対して「年間メールサポート」が、プロフェッショナル、エンタープライズライセンスに対して「年間メンテナンス」が別途契約として提供されます。これらはサービスの契約期間中有に専用メールフォームから契約ドメインの「インストール及びアップデートについて」「テーマ、モジュールなどのカスタマイズについて」「エントリー投稿などの使用方法について」「その他、a-blog cmsの操作に関連するもの」についての質問を受け付けるものとなります。 なお、有償無償を問わず、サポート対象は現行バージョンから2メジャーバージョン前までのものとします。バージョンの定義は、製品バージョンナンバーの小数点第一位をメジャーバージョンとします。

第5条【無担保・無保証】

本ソフトウェアは、現状有姿の状態で提供され、明示的にも黙示的にも、何らの担保及び保証するものではありません。アップルップル及びその供給者は、その商品性、特定目的への適合性及び第三者の権利を侵害していないことを黙示的に担保・保証することを含み、明示的であると黙示的であるとを問わず、如何なる種類の担保・保証をも行うものではありません。 本ソフトウェアの品質、性能、インストール、使用に伴うプログラム・エラー、装置の損傷、データやソフトウェア・プログラムの消失、不稼動及び中断等一切のリスクは、使用者の負担とします。本ソフトウェアの使用に関する適切性の判断は、使用者自身の責任で行うものとし、その使用による一切のリスクは、使用者の負担とします。

第6条【責任制限と免責】

使用者は、アップルップルが損害発生の可能性を事前に通知した場合は勿論それ以外の場合であっても、利益の逸失、信用の失墜、不稼動、データ使用不能等に起因する損害並びにその他顕在化していない損害を含み直接的、間接的、偶発的、例外的、結果的若しくは懲罰的損害に関して、アップルップルは一切の責任を負わないことを明示的に理解し同意します。また、使用者はアップルップル及びその他のパートナーを　使用者による本ソフトウェアの使用から及びその他本ソフトウェアに関わり発生する如何なる直接的、間接的、偶発的、例外的、結果的、懲罰的損害についての責任から一切免責することに同意します。

第7条【プログラム・サービス・約款の改訂および提供の終了】

アップルップルは、アップルップルのウェブサイトにて公示することにより、本ソフトウェア並びに本約款を変更することができるものとします。また、アップルップルは本約款並びにアップルップルの提供するサービスを、書面による通知のあるなしにかかわらず、終了することができるものとします。 プログラムは基本的にバージョンナンバーの小数点第一位をメジャーバージョンとし、発表日から2年間または次メジャーバージョンの発表のいずれか先に訪れる日まで、小数点第三位をバージョンナンバーとしたバグフィックスおよびセキュリティフィックスリリースを行います。 発表日から2年間が経過または次メジャーバージョンが発表されたプログラムに対してはバグフィックスおよびセキュリティフィックスリリースを提供しません。

第8条【一般規定】

本規約は、日本国法に準拠するものとします。 本ソフトウェア利用に際して、訴訟の必要が生じた場合には、名古屋地方裁判所を第一審の専属管轄裁判所とします。

動的フォームの動的項目と静的項目の共存

動的フォームの入力フォームと確認画面のテンプレートをカスタマイズすることでHTMLのカスタムフィールドを埋め込むこともできます。例えば、お名前のフォーム項目は必ずフォームに必要だから予め固定のカスタムフィールドにするだとか、都道府県の項目はいれたいけど都道府県を入力フォームから入れていくのは大変だったりします。動的フォームの項目を一部HTMLで記述されたカスタムフィールドにすることができます。

HTMLで記述されたカスタムフィールドを埋め込む

動的フォームにHTMLで記述されたカスタムフィールドを埋め込むときは動的フォームパーツの上か下に埋め込むことになります。動的フォームのパーツの間にHTMLのカスタムフィールドを埋め込むことができず、順番を自由に設定することはできません。
例えば都道府県のHTMLのカスタムフィールドを埋め込んでみましょう。

入力フォームに埋め込む

動的フォームの入力フォームのテンプレート /themes/system/include/form/input.html をご利用のテーマにコピーしてきます。
/themes/ご利用のテーマ/include/form/input.html

Form2_Unitモジュールのcolumn:loopの外にHTMLで記述されたカスタムフィールドを記述してください。

<tr>
  <th>都道府県</th>
  <td>
  <select class="formSelect" name="pref_code">
    <option value="" selected="selected">選択してください ▼</option>
    <option value="北海道"\{pref_code:selected#北海道\}>北海道</option>
      
    <option value="青森県"\{pref_code:selected#青森県\}>青森県</option>
    <option value="岩手県"\{pref_code:selected#岩手県\}>岩手県</option>
    <option value="宮城県"\{pref_code:selected#宮城県\}>宮城県</option>
    <option value="秋田県"\{pref_code:selected#秋田県\}>秋田県</option>
    <option value="山形県"\{pref_code:selected#山形県\}>山形県</option>
    <option value="福島県"\{pref_code:selected#福島県\}>福島県</option>
    <option value="茨城県"\{pref_code:selected#茨城県\}>茨城県</option>
    <option value="栃木県"\{pref_code:selected#栃木県\}>栃木県</option>
    <option value="群馬県"\{pref_code:selected#群馬県\}>群馬県</option>
      
    <option value="埼玉県"\{pref_code:selected#埼玉県\}>埼玉県</option>
    <option value="千葉県"\{pref_code:selected#千葉県\}>千葉県</option>
    <option value="東京都"\{pref_code:selected#東京都\}>東京都</option>
    <option value="神奈川県"\{pref_code:selected#神奈川県\}>神奈川県</option>
    <option value="新潟県"\{pref_code:selected#新潟県\}>新潟県</option>
    <option value="富山県"\{pref_code:selected#富山県\}>富山県</option>
    <option value="石川県"\{pref_code:selected#石川県\}>石川県</option>
    <option value="福井県"\{pref_code:selected#福井県\}>福井県</option>
    <option value="山梨県"\{pref_code:selected#山梨県\}>山梨県</option>
      
    <option value="長野県"\{pref_code:selected#長野県\}>長野県</option>
    <option value="岐阜県"\{pref_code:selected#岐阜県\}>岐阜県</option>
    <option value="静岡県"\{pref_code:selected#静岡県\}>静岡県</option>
    <option value="愛知県"\{pref_code:selected#愛知県\}>愛知県</option>
    <option value="三重県"\{pref_code:selected#三重県\}>三重県</option>
    <option value="滋賀県"\{pref_code:selected#滋賀県\}>滋賀県</option>
    <option value="京都府"\{pref_code:selected#京都府\}>京都府</option>
    <option value="大阪府"\{pref_code:selected#大阪府\}>大阪府</option>
    <option value="兵庫県"\{pref_code:selected#兵庫県\}>兵庫県</option>
      
    <option value="奈良県"\{pref_code:selected#奈良県\}>奈良県</option>
    <option value="和歌山県"\{pref_code:selected#和歌山県\}>和歌山県</option>
    <option value="鳥取県"\{pref_code:selected#鳥取県\}>鳥取県</option>
    <option value="島根県"\{pref_code:selected#島根県\}>島根県</option>
    <option value="岡山県"\{pref_code:selected#岡山県\}>岡山県</option>
    <option value="広島県"\{pref_code:selected#広島県\}>広島県</option>
    <option value="山口県"\{pref_code:selected#山口県\}>山口県</option>
    <option value="徳島県"\{pref_code:selected#徳島県\}>徳島県</option>
    <option value="香川県"\{pref_code:selected#香川県\}>香川県</option>
      
    <option value="愛媛県"\{pref_code:selected#愛媛県\}>愛媛県</option>
    <option value="高知県"\{pref_code:selected#高知県\}>高知県</option>
    <option value="福岡県"\{pref_code:selected#福岡県\}>福岡県</option>
    <option value="佐賀県"\{pref_code:selected#佐賀県\}>佐賀県</option>
    <option value="長崎県"\{pref_code:selected#長崎県\}>長崎県</option>
    <option value="熊本県"\{pref_code:selected#熊本県\}>熊本県</option>
    <option value="大分県"\{pref_code:selected#大分県\}>大分県</option>
    <option value="宮崎県"\{pref_code:selected#宮崎県\}>宮崎県</option>
    <option value="鹿児島県"\{pref_code:selected#鹿児島県\}>鹿児島県</option>
      
    <option value="沖縄県"\{pref_code:selected#沖縄県\}>沖縄県</option>
  </select>
  <input type="hidden" name="field[]" value="pref_code" />
  </td>
</tr>

HTMLで記述されたカスタムフィールドの都道府県が追加されました。カスタムフィールドの変数が認識されるように変数の前にバックスラッシュ（\）でエスケープをします。

確認画面に項目を追加する

フォームの確認画面にも追加したHTMLのカスタムフィールドを追加してください。
Form2_Unitモジュールのcolumn:loopの外にHTMLで記述されたカスタムフィールドを追加します。
/themes/ご利用のテーマ/include/form/confirm.html

先ほど追加した都道府県の場合は以下のようになります。こちらもカスタムフィールドの変数にエスケープして記述します。

<tr>
  <th>都道府県</th>
  <td>\{pref_code\}</td>
</tr>

メールのテンプレートに項目を追加する

入力フォームと確認画面にHTMLで記述されたカスタムフィールドを追加してきました。追加したHTMLで記述されたカスタムフィールドの変数をメールのテンプレートにも記述する必要があります。メールのテンプレートもご利用のテーマにコピーしてきてからカスタマイズをしてください。

/themes/ご利用のテーマ/include/form/body.txt
/themes/ご利用のテーマ/include/form/adminbody.txt

追加する場所はForm2_Unitモジュールの外に追加してください。
メールのテンプレートはカスタムフィールドの変数にエスケープは必要ありません。

メールアドレス  : {email}<!-- BEGIN_MODULE Form2_Unit -->
<!-- BEGIN column:loop --><!-- BEGIN text -->
{label}  : \{form-unit-{utid}\}<!-- END text --><!-- BEGIN textarea -->
{label}  : \{form-unit-{utid}\}<!-- END textarea --><!-- BEGIN radio -->
{label}  : \{form-unit-{utid}\}<!-- END radio --><!-- BEGIN select -->
{label}  : \{form-unit-{utid}\}<!-- END select --><!-- BEGIN checkbox -->
{label}  : <!-- BEGIN\ form-unit-{utid}:loop -->\{form-unit-{utid}\} <!-- END\ form-unit-{utid}:loop --><!-- END checkbox -->
<!-- END column:loop --><!-- END_MODULE Form2_Unit -->
都道府県  : {pref_code}

このような方法で動的フォームにHTMLで記述されたカスタムフィールドを埋め込むことができます。

補足

ver 2.6.1.0よりradio,select,checkboxのループ内にて項目の連番変数 {i} を出力するように追加されました。
下記サンプルコードを参考にしてください。内容は一部抜粋しています。

 <!-- BEGIN radio -->
 <tr>
  <th><label>{label}</label></th>
  <td class="acms-radio">
   <!-- BEGIN radio#val:loop -->
   <label class="acms-form-radio"><input type="radio" name="form-unit-{utid}" value="{value}"\{form-unit-{utid}:checked#{value}\}>
   <i class="acms-ico-radio"></i>
   {value}:{i}
   </label><!-- END radio#val:loop -->
  </td>
 </tr><!-- END radio -->

レスポンシブイメージでユーザーの閲覧環境に最適な画像を表示しよう

このハンズオンではa-blog cms で実装するときに、srcset属性やpicture要素を使ってレスポンシブイメージでユーザーの閲覧環境に最適な画像を表示する方法をご紹介します。

レスポンシブイメージとは？

まずはレスポンシブイメージについておさらいしましょう。

普段、Retinaディスプレイへの画像表示の対応はどうしていますか？スマートフォンでも大きなPCのRetinaディスプレイ用の画像を読み込んでいたりしないでしょうか。 レスポンシブイメージを使えば、画像の幅、高さ、ピクセル密度をブラウザが判断して、最適なサイズで読み込ませることができます。

レスポンシブイメージを使う際には大きく2つの方法があります。

  • 画像解像度の変更（resolution switching）
  • アートディレクション(art direction)

画像解像度の変更（resolution switching）

レスポンシブイメージを使用したい用途が「画像解像度の変更」だけなら、img要素とsrcset属性を組み合わせた方法がおすすめです。たとえば、全く同じ構図の写真を高解像度のディスプレイと通常のディスプレイどちらにも表示したい場合に有効です。

同じ縦横比だけれど、画像の大きさを変更できる

画像解像度の変更のイメージ図

HTMLの記入方法

<img srcset="画像のパス 記述子,
	     画像2のパス 記述子,
	    画像3のパス 記述子"
     src="フォールバック画像のパス"
     sizes="メディアクエリー（任意） 表示サイズ,
	    画像2のメディアクエリー（任意） 画像2の表示サイズ,
	    画像3のメディアクエリー（任意） 画像3の表示サイズ"
     alt="代替テキストを入力してください">
属性 説明
srcset 画像パスと記述子の間には半角スペースを、次の画像を指定するときには「,」を入力します
src 記入した画像がsrcset属性に対応していないブラウザで使用されます
sizes 記述子を「w」に設定したときのみ使用可能。表示サイズを指定します（※「%」は単位に使用できません）。任意でメディアクエリーを使用できます。

srcset属性に使用できる記述子には2種類あります。

記述子 記述方法 説明
幅デスクリプタ w 画像の固有サイズをブラウザに伝える。
ピクセル密度デスクリプタ x 高解像度のディスプレイをサポートする。（記述例：1x、1.5x、2x...など）

記述子がなかった場合は、1xが使用されます。

HTMLの記入例

<img srcset="img.png 400w,
	     img@2x.png 900w,
	     img@3x.png 1200w"
     src="img_fallback.png"
     sizes="(max-width: 479px) 100vw, 50vw"
     alt="代替テキストを入力してください">
<img srcset="img.png 1x,
	     img@2x.png 2x,
	     img@3x.png 3x"
     src="img_fallback.png"
     alt="代替テキストを入力してください">

アートディレクション(art direction)

レスポンシブイメージを使用したい用途が、「画角を変更したい」なら、picture要素+srcset属性を組み合わせた方法がおすすめです。たとえば、小さなスクリーンでは写真が全体的に小さくなって人物の顔がよく見えなかったり、文字が潰れてしまう場合に画角を変更して表示することが可能になります。

画角を変更する。たとえば、メイン部分にフォーカスするなど

アートディレクションのイメージ図

HTMLの記入方法

要素 説明
picture とくに特別な属性などは記述しない。source要素の親要素。
source video要素などにも使われている要素。srcset属性が使用可能。picture要素の子要素。
img srcset属性が使えないブラウザでフォールバック画像として使用される。picture要素の子要素。 
<picture>
	<source media="メディアクエリー"
		srcset="画像1のパス 表示サイズ,
			画像2のパス 表示サイズ,
			画像3のパス 表示サイズ">
	<source media="メディアクエリー"
		srcset="画像4のパス">
	<img src="フォールバック画像のパス" alt="代替テキストを入力してください">
</picture>

img要素以降にsource要素を書いた場合、以降のsource要素は無視されてしまいます。img要素はpicture要素内で一番最後に記述します。

HTMLの記入例

<picture>
	<source media="(max-width: 479px)"
		srcset="img.png 400w,
			img@2x.png 900w,
			img@3x.png 1200w">
	<source media="(min-width: 480px)"
		srcset="img@3x.png">
	<img src="img.png" alt="代替テキストを入力してください">
</picture>

picture要素では、以下のようにtype属性を指定しSVGやWEBPなどの画像に対応している環境で読み込むことも可能です。

<picture>
	<source type="image/svg+xml" srcset="img.svg">
	<source type="image/webp" srcset="img.webp">
	<img src="img.png" alt="代替テキストを入力してください">
</picture>

画像生成でImageMagickに対応しました

ImageMagickに対応

a-blog cms では画像処理にGDライブラリを使用して画像生成を行っていたのですが、 生成後の画像が綺麗じゃないとの意見を頂いて 次のバージョン2.1（2014/05/26現在）からimageMagickに対応します。

改善点

ImageMagickにした事により以下の改善がみられました。

  • 白色が綺麗に出力されるように（特にGDでのgif画像で白がうまく出力できなかった）
  • GDに比べてくっきりするように

実際の出力ファイル

画像1

画像2

画像3

注意事項

ImageMagickを使用するにはImageMagickのPHP 拡張モジュールがインストールされている 必要があります。使用できない場合はGDを使用して画像生成を行います。

Ver. 2.0.1

a-blog cms（通常版）ダウンロード

Ver. 2.0.1 CPI新規インストール

a-blog cms利用約款

このa-blog cms利用約款（以下「本約款」といいます）は、使用者(個人または法人)と有限会社アップルップル (以下「アップルップル」といいます)の間における、a-blog cms、関連するソフトウェア部品群、並びにドキュメント（以下「本ソフトウェア」といいます）に関する約款です。

第1条【ライセンス】

使用者は、本約款の定めに従い、本ソフトウェアを利用できるライセンスを有するものとします。使用者は、本ソフトウェアを1台のサーバー上に存在する1つのウェブサイトにインストールすることができます。

第2条【禁止事項】

使用者は、次の各号に定める行為を行ってはなりません。

  1. 本ソフトウェアから派生するソフトウェアを制作すること
  2. 本ソフトウェア又はその複製を如何なる形態においても、第三者に販売、譲渡、ライセンス供与、開示、その他の方法による移転等第三者が使用できるようにすること
  3. 本ソフトウェアの改造、翻訳、逆コンパイル又は逆解析（リバース・エンジニアリング）を、法律上認めている範囲を超えて行うこと及びそれを試みること
  4. 本ソフトウェア上の権限の表示又は商標を変更すること
  5. 本ソフトウェアを公序良俗に反したコンテンツとして使用すること

アップルップルは、本ソフトウェアに関する全ての権利（全ての知的財産権を含む）を保有し、本約款において明示的には許諾していない本ソフトウェアに関する全ての権利をも保有します。

第3条【著作権表示】

アップルップルは、本ソフトウェアを使用するに使用者に対してバナー及びテキストでの著作権表示を強制することはしません。ただし、著作権がアップルップル以外にあると誤認させる行為一切を禁じます。 a-blog cmsが生成するHTMLドキュメントには、下記のコードがHEAD要素内に追加されます。

<meta name="generator" content="a-blog cms" />

第4条【技術サポート】

本ソフトウェアの利用に関して、電話でのサポートは提供されません。
質問、要望を含めた無償サポートは、ウェブサイト上のフォーラムでのみ行われますが、開発元によるサポートを保証するものではありません。 有償でのメールサポートとして、スタンダードライセンスに対して「年間メールサポート」が、プロフェッショナル、エンタープライズライセンスに対して「年間メンテナンス」が別途契約として提供されます。これらはサービスの契約期間中有に専用メールフォームから契約ドメインの「インストール及びアップデートについて」「テーマ、モジュールなどのカスタマイズについて」「エントリー投稿などの使用方法について」「その他、a-blog cmsの操作に関連するもの」についての質問を受け付けるものとなります。 なお、有償無償を問わず、サポート対象は現行バージョンから2メジャーバージョン前までのものとします。バージョンの定義は、製品バージョンナンバーの小数点第一位をメジャーバージョンとします。

第5条【無担保・無保証】

本ソフトウェアは、現状有姿の状態で提供され、明示的にも黙示的にも、何らの担保及び保証するものではありません。アップルップル及びその供給者は、その商品性、特定目的への適合性及び第三者の権利を侵害していないことを黙示的に担保・保証することを含み、明示的であると黙示的であるとを問わず、如何なる種類の担保・保証をも行うものではありません。 本ソフトウェアの品質、性能、インストール、使用に伴うプログラム・エラー、装置の損傷、データやソフトウェア・プログラムの消失、不稼動及び中断等一切のリスクは、使用者の負担とします。本ソフトウェアの使用に関する適切性の判断は、使用者自身の責任で行うものとし、その使用による一切のリスクは、使用者の負担とします。

第6条【責任制限と免責】

使用者は、アップルップルが損害発生の可能性を事前に通知した場合は勿論それ以外の場合であっても、利益の逸失、信用の失墜、不稼動、データ使用不能等に起因する損害並びにその他顕在化していない損害を含み直接的、間接的、偶発的、例外的、結果的若しくは懲罰的損害に関して、アップルップルは一切の責任を負わないことを明示的に理解し同意します。また、使用者はアップルップル及びその他のパートナーを　使用者による本ソフトウェアの使用から及びその他本ソフトウェアに関わり発生する如何なる直接的、間接的、偶発的、例外的、結果的、懲罰的損害についての責任から一切免責することに同意します。

第7条【プログラム・サービス・約款の改訂および提供の終了】

アップルップルは、アップルップルのウェブサイトにて公示することにより、本ソフトウェア並びに本約款を変更することができるものとします。また、アップルップルは本約款並びにアップルップルの提供するサービスを、書面による通知のあるなしにかかわらず、終了することができるものとします。 プログラムは基本的にバージョンナンバーの小数点第一位をメジャーバージョンとし、発表日から2年間または次メジャーバージョンの発表のいずれか先に訪れる日まで、小数点第三位をバージョンナンバーとしたバグフィックスおよびセキュリティフィックスリリースを行います。 発表日から2年間が経過または次メジャーバージョンが発表されたプログラムに対してはバグフィックスおよびセキュリティフィックスリリースを提供しません。

第8条【一般規定】

本規約は、日本国法に準拠するものとします。 本ソフトウェア利用に際して、訴訟の必要が生じた場合には、名古屋地方裁判所を第一審の専属管轄裁判所とします。