A: ポストインクルードで読み込んできたコンテンツにMasonryレイアウトを適応する
a-blog cmsにはACMS.addListenerという特定のイベントに対して処理を挟み込めるAPIが用意されています。 このAPIを使うことにより、エントリーのユニットの追加時やカスタムフィールドグループの項目を増やした時など特定のタイミングで任意の処理を挟み込むことができます。 例えば、ポストインクルードで読み込んで来...
ハンズオン一覧
B: 外部コンテキスト挿入機能とカスタムフィールドを使ってカテゴリー分けをしてみよう
このハンズオンでは外部コンテキスト挿入機能（ctx）とエントリーのカスタムフィールドを使用してカテゴリー分けをする方法を紹介しています。 通常ではa-blog cmsの標準のカテゴリー設定でカテゴリー分けを行いますが、カスタムフィールドを使うことでURLコンテキストに依存せずにカテゴリーを分けることができます。...
C: ポストインクルードを使ってページ遷移しないカスタムフィールド検索を実装する
今回は、カスタムフィールドの検索結果を別ページとして移動させず、その場で表示される方法を紹介します。 このハンズオンで使っている機能 カスタムフィールド ポストインクルード 少しJavaScriptを書くことになります。JavaScriptで複雑なことはしないため、HTMLとJavaScriptの基礎な知識があれば大丈夫です。 デフォ...
D: スクロールを予測させるテーブルユニットを作ってみよう
先日弊社で新しいOSS（ScrollHint）を公開しました。このJavaScriptを使うと下のデモようにコンテンツが表示エリアをはみ出した時に、そのコンテンツに対してスクロール可能領域にボックスシャドウをかけ、さらにコンテンツが表示エリアに入った瞬間にスクロールを促すためのアイコンが表示されます。 Col1 Col2 Col3 ...
E: ちょっとリッチなテキストユニットを作ってみよう
Ver. 2.8 からテキストユニットにLiteEditorという弊社が独自に開発したJavaScriptライブラリが使用されるようになりました。 テキストユニット（LiteEditor）拡張方法基礎知識 テキストユニット（LiteEditor）のボタンは一からボタンを作っていくことや既にあるボタンに対して新しくボタンを追加することもできます。 ...
静的HTMLサイトからCMSのテーマを作ってみよう（Ver.2.8）
a-blog cms は、CMS を利用していない HTML ファイルで作られたサイト ( 静的 HTML サイト ) を、PHP のコード ( <?php 〜 ?> ) を書くことなく、CMS を利用して日々更新できるようなサイトを用意する事が可能です。 静的 HTML ファイルから、CMS で利用できるようなテンプレートファイルを作るための一連の作業「...
beginner2018のテーマをマルチブログ化する方法
a-blog cms に標準で用意されているテーマbeginner2018は 1つのブログと複数のカテゴリーでサイトを構成しています。コンテンツ毎に記事を書くユーザーを分けたり、少し規模の大きなサイトを作る場合にはマルチブログ化する必要が出できます。また、マルチブログ化したとしてもテーマは共通部分が多くテーマの継承機能に...
F: 公開予定記事をリストに表示する
このハンズオンでは公開予定記事をリストに表示する方法を紹介しています。最終的な完成図は以下の図のようになります。 エントリーリストやエントリーサマリーで非公開の記事が表示できたら簡単に実装できそうですが、デフォルト機能では実装できません。 そこで今回のカスタマイズでは、エントリーリスト上に表示する...
G: @extendsを使ってテンプレートを最適化してみよう
Ver. 2.8.0 よりテンプレートを継承できる機能が追加されました。 このハンズオンでは、継承機能（@extends）を使ってテンプレートをわかりやすくて管理しやすい形にしていきます。 1. ハンズオン用にテスト環境を用意する HTMLファイルを修正しながら実際に動作の確認をするため、Ver. 2.8.0 以上の a-blog cms がイン...
H: a-starter-kitを使ってスムーズに開発環境を整えよう！
このハンズオンでは、アップルップルが受託案件を始めるときに使用しているスターターキット「 a-starter-kit」の使い方と解説をします。 このスターターキットを使うと、ウェブサイト制作で使用する a-blog cms 用のテンプレートがあらかじめ用意されており、またCSS, JavaScriptのビルド環境が整っていますので、すぐ...