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条【一般規定】

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

a-blog cmsでは、位置情報の設定を有効化すれば、エントリーごとに一つの位置情報を登録できるようになっていますが、複数の位置情報を登録することができません。複数の位置情報を登録することができれば、例えばエントリーがイベント記事になっていて、そのイベントが複数会場になっている場合などに便利です。

このハンズオンで行うこと

このハンズオンでは以下の手順で、OpenStreetMapとカスタムフィールドグループを使って、一つのエントリーに複数の会場情報をもたせてみましょう。

1. siteテーマでeventというカテゴリーを作成
2. エントリーの編集画面のカスタマイズ
3. OpenStreetMapを使った表側での表示

1. siteテーマでイベントカテゴリーを作成

管理画面 > カテゴリー より、eventというカテゴリーコードでイベント用のカテゴリーを新規追加します。

2. エントリーの編集画面のカスタマイズ

site2018/admin/entry/field/event.htmlを追加し、以下のようなHTMLを記述します。

<h2 class="acms-admin-admin-title2">マップの焦点の設定</h2>
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>緯度</th>
    <td>
      <input type="text" name="mapDefaultLat" value="{mapDefaultLat}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultLat">
    </td>
  </tr>
  <tr>
    <th>経度</th>
    <td>
      <input type="text" name="mapDefaultLng" value="{mapDefaultLng}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultLng">
    </td>
  </tr>
  <tr>
    <th>ズーム</th>
    <td>
      <input type="text" name="mapDefaultZoom" value="{mapDefaultZoom}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultZoom">
    </td>
  </tr>
</table>
<h2 class="acms-admin-admin-title2">会場一覧</h2>
<div class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <!-- BEGIN VenueList:loop -->
  <div class="sortable-item" style="border-bottom: 1px solid #CCC;">
    <span class="item-handle" style="display:inline-block; padding: 10px;">
      <i class="acms-admin-icon-sort"></i>
    </span>
    <table class="acms-table-entry">
      <tr class="js-open-street-map-editable">
        <th>地図</th>
        <td>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="" value="" class="js-osm-search" size="40" />
            <input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn" />
            <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger acms-admin-float-right"
              value="削除">
          </div>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="venueName[]" value="{venueName}" class="acms-admin-form-width-full" placeholder="会場名">
          </div>
          <div class="acms-form-group">
            <div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
          </div>
          <div class="acms-form-group" style="padding-top: 10px;">
            緯度 <input type="text" name="mapLat[]" value="{mapLat}" size="9" class="js-osm-lat" />
            経度 <input type="text" name="mapLng[]" value="{mapLng}" size="10" class="js-osm-lng" />
            ズーム <input type="text" name="mapZoom[]" value="{mapZoom}" size="10" class="js-osm-zoom" />
          </div>
        </td>
      </tr>
    </table>
  </div>
  <!-- END VenueList:loop -->
  <div class="sortable-item item-template" style="border-bottom: 1px solid #CCC;">
    <span class="item-handle" style="display:inline-block; padding: 10px;">
      <i class="acms-admin-icon-sort"></i>
    </span>
    <table class="acms-table-entry">
      <tr class="js-open-street-map-editable">
        <th>地図</th>
        <td>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="" value="" class="js-osm-search" size="40" />
            <input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn" />
            <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger acms-admin-float-right"
              value="削除">
          </div>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="venueName[]" value="" class="acms-admin-form-width-full" placeholder="会場名">
          </div>
          <div class="acms-form-group">
            <div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
          </div>
          <div class="acms-form-group" style="padding-top: 10px;">
            緯度 <input type="text" name="mapLat[]" value="" size="9" class="js-osm-lat" />
            経度 <input type="text" name="mapLng[]" value="" size="10" class="js-osm-lng" />
            ズーム <input type="text" name="mapZoom[]" value="" size="10" class="js-osm-zoom" />
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="clearfix" style="padding: 10px;">
    <input type="button" class="item-insert acms-admin-btn-admin acms-admin-float-right" value="追加">
  </div>
</div>


<input type="hidden" name="@VenueList[]" value="mapLat">
<input type="hidden" name="field[]" value="mapLat">
<input type="hidden" name="@VenueList[]" value="mapLng">
<input type="hidden" name="field[]" value="mapLng">
<input type="hidden" name="@VenueList[]" value="mapZoom">
<input type="hidden" name="field[]" value="mapZoom">
<input type="hidden" name="field[]" value="@VenueList">
<input type="hidden" name="@VenueList[]" value="venueName">
<input type="hidden" name="field[]" value="venueName">

以下のようなOpenStreetMapの地図登録UIがカスタムフィールドグループとして表示されたらカスタマイズ成功です。

3. OpenStreetMapを使った表側での表示

site2018/include/field/entry_event.htmlを作成し、以下のように記述します。

<!-- BEGIN_SetRendered id="map-markers" -->
<!-- BEGIN VenueList:loop --><!-- BEGIN VenueList:glue -->|<!-- END VenueList:glue -->{mapLat},{mapLng}<!-- END VenueList:loop -->
<!-- END_SetRendered -->

<!-- BEGIN_SetRendered id="map-messages" -->
<!-- BEGIN VenueList:loop --><!-- BEGIN VenueList:glue -->[[:split:]]<!-- END VenueList:glue --><p>{venueName}</p><!-- END VenueList:loop -->
<!-- END_SetRendered -->

<div class="entry-container">
	<div class="js-open-street-map"
		data-multiple="true"
		data-lat="{mapDefaultLat}"
		data-lng="{mapDefaultLng}"
		data-zoom="{mapDefaultZoom}"
		data-markers='<!-- GET_Rendered id="map-markers" trim="1" -->'
		data-messages='<!-- GET_Rendered id="map-messages" trim="1" -->'
		style="width: 857px; height: 400px;"
	></div>
</div>

エントリーのカスタムフィールドにマップの焦点の設定と、2つの地図情報を登録してください。 以下、カスタムフィールドの登録例です。

最終的に、以下のようにテンプレートに2つピンが立っていることが確認できたらハンズオン成功です。

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条【一般規定】

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

画像のカスタムフィールドを生成

タイトル、name要素、通常サイズ、altの入力、tinyサイズ、largeサイズ、squareサイズなど細やかに設定することができます。

また、「フロント側のリサイズ機能を使用する」という項目にチェックを入れることで、画像のブラウザ上でのリサイズを可能にするソースコードを生成します。 これを使うことで、通常だとそのままアップロードができないサイズの画像もアップロードできるようになります。例えば、デジタルカメラで撮影したような容量の大きい画像をブラウザ上でリサイズしてサーバーにアップロードすることができるということです。

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムフィールドグループを選択します。

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムユニットを選択します。

あとは、カスタムフィールドの作り方と同じです。 typeとタイトル、フィールド名を入力します。 それぞれの項目に応じた項目に対して、値を入力して[生成]ボタンを押すとカスタムフィールドのHTMLが生成されます

他にもカスタムフィールドメーカーには下記のような便利な機能が用意されています。

「オプション」という項目をクリックすると、下の図のように変換と、入力チェックのためのフィールドが出現します。

はじめに、「変換」ですが、これを使うことで例えば「大文字」で登録されたアルファベットを「小文字」に変換したりするためのソースコードを生成可能です。「参照」と書かれたボタンを押していただくと下の図のようにモーダルウィンドウが現れますので、その中から変換したい項目を選択してください。変換のフィールドには複数の値を登録することも可能です。

つづいて「入力チェック」ですが、こちらは入力された値を指定した条件でチェックできます。もし条件に沿わない値が入力された場合、再度入力を促すことができます。 下の例は、あるフィールドに対して値が入力されていない場合に、「値を入力してください」というメッセージを表示する際のサンプルです。

その他にも、文字数チェックや、URLチェックなど様々な条件で値を判定することができます。「値」の欄には文字数チェックにおいて最大文字数を入れたり、正規表現マッチで、正規表現を入れたりする際に使用します。

また、下の図のように、「入力用ソース」、「プレビュー」、「出力用ソース」と書かれたタブのあるボックスから、プレビューを選択していただくと、下の図のように実際に出力されたソースがどのような見た目になるのかを確認することができます。

これは、カスタムフィールドに入力された値の結果をテーブル形式で表示したい時に使用します。 例えばお問い合わせのフォームにて、入力された値をお客様に確認してもらうためのソースコードとして役にたちます。

下の図のように、「acms-admin.cssを使用する」という項目にチェックを入れることで、a-blog cmsの管理画面で使用されているクラスが施されたソースコードを生成できます。 これにチェックを入れていないと、全くクラスの施されていないソースコードが生成されます。