Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

2ページ目 | a-blog cms

【a-blog cms】組み込みJSの今後

ただの願望ですが組み込みJSが今後こうなって欲しいという要望を以下にまとめてみました。

欲しい機能一覧

  • config.jsの上書き機能の強化
  • スクロールイベントやリサイズイベントの追加機能
  • Browserifyに対応
  • 独自のプラグインを入れやすくする
  • フロント側でもa-blog cmsと同じように使えるテンプレートエンジン

「【a-blog cms】組み込みJSの今後」の続きを読む

【a-blog cms】SetTemplate SetRenderedを使った新しいサイト制作

SetRendered

通常だと同じモジュールを何度も実行しないと実現できないような表示を実現する際に効果を発揮します。例えば、下の図のように、ユニットを画面の右側、もしくは左側、もしくは全体に表示したい場合、SetRenderedは非常に有効な手段です。



「【a-blog cms】SetTemplate SetRenderedを使った新しいサイト制作」の続きを読む

プレゼンテーション用ライブラリ(Talkie.js)を使ってa-blog cmsのテーマを作ってみた

これは、a-blog cms Advent Calendar 2015の4日目の記事となります。

いつもプレゼンを作る時に、@ahomuさんの作成したスライド用ライブラリTalkie.jsを使わせていただいているのですが、毎回新しいプレゼンを作るたびにフォルダごと複製するのがめんどくさくなったのでa-blog cmsで管理してみる事にしました。
そこで今回テーマを作ったので、配布します。誰かに使っていただけたら幸いです。unit.htmlをちょこっと書き換えたくらいのシンプルなテーマです。
Talkie.jsの詳しい使い方や、解説は下記のリンクをご覧下さい。


見た目

一覧ページ


作成したプレゼン(エントリー)一覧が並ぶシンプルなページです。

プレゼンページ(詳細ページ)


インストール方法

  1. Zipファイルをダウンロード
  2. テーマディレクトリにテーマを設置
  3. メンテナンスプログラムよりデータをインポート

1. Zipファイルをダウンロード

まずは、下のファイルをダウンロードしてください。中にテーマフォルダと、インポート用データが入っています。


ファイルを開く

talkieテーマ

2. テーマディレクトリにテーマを設置

ダウンロードしたZipファイルを展開すると、下の図のようにthemesフォルダの中に、talkieテーマが入っていますのでそれを、ご使用されているCMSのthemesディレクトリに入れてください。


3. メンテナンスプログラムよりデータをインポート

3.1 setupフォルダにインポート用のフォルダを設置

ダウンロードしたフォルダーのbinフォルダー内にtalkieというフォルダがあるので、そのフォルダを下の図のようにa-blog cmsをダウンロード時に使用したsetupフォルダのbinフォルダの中に設置します。


3.2 setupフォルダにアクセス

setupフォルダのプログラムにアクセスしてください。
例えば、setupフォルダをsetup_にリネームしている場合、「ドメイン名/setup_/index.php」より、メンテナンスプログラムにアクセスできます。
アクセスできたら下のように、インポート実行画面に移動します。


その後、インポート先のブログを選択し、インポートするブログ名として「talkie」を選択します。その後、「インポートを実行する」というボタンをクリックしてください。


これでプレゼンテーション用のテーマのインストールは完了です。

使い方

このスライドを操作するための便利なコマンドを紹介します。

  1. フル画面にする
  2. 編集用ボックスの表示、非表示
  3. ページおくり
  4. ポインター表示

1. フル画面にする

Fキーを押す事で全画面にする事が出来ます。

2. 編集用ボックスの表示、非表示


スペースキーを押す事で上の図の編集用ボックスの表示、非表示ができます。

3. ページおくり

十字キーを押すか、スライドの右下にあるベージャーをクリックする事で次のページに遷移させることができます。

4. ポインター表示

Bキーを押す事で、下のようなポインターを表示する事が出来ます。


スライドの編集方法

  1. 編集画面への移動
  2. スライド一枚分はユニットグループ1つ分
  3. マークダウンを使った編集
  4. ソースコードの編集

1. 編集画面への移動

下記の図のように、スライド左上の「変更」ボタンを押す事でエントリーの編集画面に移動できます。


2. スライド一枚分はユニットグループ1つ分

編集画面


表示画面


上記のようにユニットグループ1つ分がスライド一枚分になっています。

スライドの種類は、下の画像のようにタイトルソースコードリストに分かれています。タイトルを表示する際は「タイトル」を選択し、ソースコードを表示する際は「ソースコード」、リストを表示する時は「リスト」を選択するのがいいでしょう。


マークダウンを使った編集

Talkie.jsはマークダウンに対応していますので、テキストユニットの種類を「自由入力」に設定してマークダウンで書いていただけます。

4. ソースコードの編集

下の図のユニットの追加ボタンより、編集したい言語を選択します。


あとは、いつも通りユニットに表示したいソースコードを入力するだけです。

おわりに

a-blog cmsのエクスポート機能を使えばテーマの配布も簡単に行えますね。次回はテーマの配布方法等もブログに書ければと考えています。
明日は@suzuki_curryさんです。よろしくお願いします。


a-blog cmsではじめてモジュールを作ってみた

早速なんですが、最近はa-blog cmsでモジュールを作ることを覚えました。
今回は、どのバナーモジュールを使うかエントリーのカスタムフィールドで選べるようにしたいとおもいバナーモジュール一覧を表示するモジュールを作ってみました。
今回はそのメモの記事となります。
まずは実際に作ったモジュールから紹介します。

実際に作ったモジュール

今回作ったモジュールでは下のソースのようにループを使ってバナーモジュール一覧を表示できるようにしています

<!-- BEGIN_MODULE AdminBanner -->
<ul>
<!-- BEGIN banner:loop -->
<li>
モジュールID名 {module_identifier}<br/>
モジュールにつけた名前 {module_label}
</li>
<!-- END banner:loop -->
</ul>
<!-- END_MODULE AdminBanner -->

では、早速モジュールをどのように作成するのかを解説していきます。

PHPを編集する場所

a-blog cmsでモジュールを作成する場合はa-blog cmsのパッケージ >> php >> ACMS >> User >> GETフォルダの中にphpファイルを置いて作っていきます。
今回はAdminBanner.phpというファイルを設置しました。

PHPファイルの中身

class ACMS_User_GET_AdminBanner extends ACMS_GET
{
    function get()
    {
//テンプレートインスタンス作成
        $Tpl    = new Template($this->tpl, new ACMS_Corrector());
//DBインスタンスを作成
        $DB = DB::singleton(dsn());
//モジュールを選択対象に
        $SQL = SQL::newSelect('module');
//モジュールIDを取得したい
        $SQL->addSelect('module_identifier');
//モジュールにつけた名前も取得したい
        $SQL->addSelect('module_label');
//バナーモジュールから取得したい
        $SQL->addWhereOpr('module_name','Banner');
//SQL文取得
        $q = $SQL->get(dsn());
//DBをSQL文で検索してその結果を$bannersに格納
        $banners = $DB->query($q, 'all');
         foreach ($banners as $banner){
//バナーのオブジェクトをテンプレートに追加
              $Tpl->add('banner:loop',$banner);
         }
        return $Tpl->get();
    }
}

クラス名の先頭にACMS_User_GET_をつけてください。
このように書くと、AdminBannerモジュールでバナーモジュールのモジュールIDや名前が取得できます。
意外とモジュールは簡単に作れます。プログラマの方には嬉しいのではないでしょうか?
みなさんも是非チャレンジしてみてください!!

参考



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド