Horic Design

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

7ページ目

使われていないモジュールIDを調べるためにgulpのpluginを作った

a-blog cmsの話ですが、サイトにモジュールIDが100個ほど存在すると、どれが現在サイトで使っている物でどれが使っていない物なのかが把握しづらくなります。昔使っていて今は使っていないモジュールIDなどもきっとあるのではないでしょうか?
これまで、モジュールIDを使っているかいないかをSublimeTextを使ってthemesディレクトリの中を検索していましたが、それでもこれだけ大量にあると大変になってきました。
そこで今回作成したのが、str-finderというgulpのプラグインです。
これを使うと以下のように、どこのファイルでその文字列が使われているかという事を抜き出してくれます。
また文字列が見つからない場合は[not Found]と出力されます。
以下は出力結果例です。

name,path
categoryList,moduleid.csv
categoryList,blog2015/index.html
categoryList,cart@blog2015/order.html
categoryList,site2015/include/module/category/list.html
categoryList,system/admin/tooltip/config/category/list.html
categoryEntrySummary,moduleid.csv
categoryEntrySummary,site2015/include/module/category/summary.html
categoryEntrySummary,system/admin/tooltip/config/category/entry-summary.html
testtestEntrySummary,not Found

また、[notFoundOnly]というオプションを使えば、見つからなかった文字列だけをリスト化して表示してくれます。

testtestEntrySummary,not Found
steelydylanModuleField,not Found
SearchField,not Found

インストール方法

コマンドラインで以下のように入力するだけでダウンロードできます。

npm install str-finder

使い方

以下がソース例になります。今回の例では、moduleid.csvというファイルから、dist.csvというファイルを出力しています。

gulpfile.js

var gulp = require("gulp");
var finder = require("str-finder");
var rename = require("gulp-rename");
gulp.task('module_search',function(){
     gulp.src("./moduleid.csv")
          .pipe(finder({dir:"themes",notFoundOnly:false}))
          .pipe(rename({basename:"dist",extname:".csv"}))
          .pipe(gulp.dest("./"));
});
 
gulp.task('default',['module_search']);

moduleid.csv(入力用ファイル)

カンマ区切りで文字列を記述していきます。
[delimiter]というオプションに["\n"]をしていすれば改行区切りも可能です。

categoryList,categoryEntrySummary,testtestEntrySummary,steelydylanModuleField,SearchField

オプション

finder({
    dir:"./",//検索するディレクトリ
    notFoundOnly:false,//見つからなかった文字列だけを表示する
    delimiter:","//ソースファイルの文字列の区切り文字
});

browserifyでjQueryのプラグインを使用する方法

gulpでbrowserifyを使う際に、jQueryのプラグインをどうやって$にsetしようかなということを長い間なやんでいました。$をglobalにsetするのも気がひけるのでどうにか、ローカルだけで解決できないかと色々なjQueryのプラグインのソースをみたりした結果、下記の方法が一番しっくり来ましたので今回紹介します。

package.json

gulp-browserfiyおよび、jquery-browserifyをnpm installでダウンロードします。

{
	"name": "gulpfile_generator",
	"version": "1.1.0",
	"description": "This is a genarator for gulpfile and package.json",
	"author": "steelydylan",
	"url": "http://horicdesign.com",
	"license": "MIT License",
	"keywords": "gulp",
	"devDependencies":{
		"gulp": "*",
		"gulp-plumber": "*",
		"gulp-rename": "*",
		"gulp-browserify": "*",
		"gulp-uglify": "*",
		"gulp-concat": "*",
		"gulp-notify": "*",
               "jquery-browserify": "*"
	}
}

gulpfile.js

.pipe(browserify({jquery:'jquery-browserify'}))この記述により、var $ = require("jquery-browserify");できるようになります。

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
gulp.task('js',function(){
	gulp.src(['components/timeline/js/src/timeline.js'])
		.pipe(plumber({
			handleError: function (err) {
				console.log(err);
				this.emit('end');
			}
		}))
  		.pipe(browserify({jquery:'jquery-browserify'}))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(uglify())
		.pipe(gulp.dest('components/timeline/js/dist'))
  		.pipe(notify('js task finished'));
});

jQuery Plugin

今回の記事の肝はプラグイン側にあります。下のようなテンプレートにすることで、main.jsでプラグインをrequireして、呼び出す事が可能になります。

(function (factory) {
    if (typeof module === 'object' && module.exports){
        module.exports = factory;
    }else{
        factory(jQuery);
    }
}(function($){
	$.fn.autoAlign = function(opt){
            //普段通りjQueryに対する拡張内容を記述
        }
}));

main.js

先ほどのプラグインをvar autoAlign = require('./autoAlign.js');のようにして、呼び出し、autoAlign($)とすることで、console.log($.fn.autoAlign);としたときにちゃんと、$.fn.autoAlignに関数の内容がセットされているのが分かるかと思います。

(function(){
	var $ = require('jquery-browserify');
	var autoAlign = require('./autoAlign.js');
	autoAlign($);
        console.log($.fn.autoAlign);
})();

プレゼンテーション用ライブラリ(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さんです。よろしくお願いします。


Web Components用ライブラリPolymerを使ったテーマ作成

a-blog cms Training Camp 2015 AutumnでPolymerを使ったサイト制作について発表させて頂きました。
今回は、その発表内容のフォローブログとなります。
以下のような順番で今回の発表で話しきれなかったことについてお話しします。

  1. Web Componentsについて
  2. Polymerについて
  3. SiteテーマでのPolymerの導入方法

Web Componentsについて

Web Componentsを使えば、次のようなコードで下の図のようにYoutubeを簡単に表示できます。
<google-youtube video-id="kJt3v7tQ6kc"></google-youtube>


このように別の場所で定義したHTML,CSS,JavaScriptをタグを使う事で呼び出す事が出来る技術がWeb Componentsです。さらにWeb ComponentsはShadow Domという外部からアクセスできないDomツリーを形成するので、CSSのスコープの衝突問題を解決できます。


Polymerについて

PolymerとはWebComponentsのラッパーライブラリで、WebComponentsを使いやすくしてくれるライブラリです。その他にもWebComponentsの標準機能ではない、テンプレート内で変数が使える機能や、ShimというCSSプロセッサーを使う事ができます。

独自のテンプレートエンジン

<div class="acms-summary-body">
    <p class="summaryTitle"><a href="{{item.url}}">{{item.title}}</a></p>
    <p>{{item.summary}}</p>
</div>

CSSプロセッサー Shim

<style>
      :host {
        padding: 4px;
        background-color: gray;
        /* apply a mixin */
        @apply(--my-toolbar-theme);
      }
      .title {
        @apply(--my-toolbar-title-theme);
      }
</style>

また、Polymerは公式で下記のようなエレメントをすでに用意してくれています。

Web Components公開サイト


  • Iron Elements: AjaxやFormまわりなど、Webサイトを制作する時の標準的な機能を提供
  • Paper Elements: マテリアルデザインを実現するためのUIを提供
  • Google Web Components: google-youtubeなどgoogleが提供するサービスのAPIを提供
  • Gold Elements: EC系の機能を提供
  • Neon Elements: アニメーション周りの機能を提供
  • Platinum Elements: Push Notificationやbluetoothなどネイティブな機能を提供
  • Molecule: 他のライブラリの機能を提供

また、このサイトに行くとnpmで公開されているWeb Componentsを検索してダウンロードすることが出来ます。
https://customelements.io/


SiteテーマでのPolymerの導入方法

以下のリンクより、PolymerをZipファイルでダウンロードします。
https://www.polymer-project.org/1.0/docs/start/getting-the-code.html


siteテーマの/include/head/link.htmlにて、Polymerを以下のように読み込みます。

<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/polymer/polymer.html">

さらに下記のようなソースコードでShadow Domを有効にすることができます

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

カスタムエレメントのImport

先ほどご紹介したサイトからいくつかカスタムエレメントをダウンロードしたら、以下のようにそれらのコンポーネントをImportすることができます。

<link rel="import" href="/components/google-map/google-map.html">
<link rel="import" href="/components/google-youtube/google-youtube.html">
<link rel="import" href="/components/google-calendar/google-calendar.html">
<link rel="import" href="/components/github-card/github-card.html">
<link rel="import" href="/components/x-tweet/x-tweet.html">
<link rel="import" href="/components/polymer-slideshow/polymer-slideshow.html">

Layoutモジュールでコンポーネントを使用する

Layoutモジュールでコンポーネントを使用する事でさらにPolymerは効力を発揮します。
例えば、Bannerモジュールで使用したい場合は以下のようなソースコードのファイルを、/include/module/template/Banner/フォルダに設置してください。
今回のサンプルでは、polymer-slideshowというコンポーネントを使用しています。

<!-- BEGIN_MODULE Banner -->
<div>
<!--#include file="/admin/module/setting.html"-->
<polymer-slideshow height=230>
 	<!-- BEGIN banner:loop -->
	<!-- BEGIN banner#img -->
	<polymer-slide>
      <img src="%{ARCHIVES_DIR}{img}">
    </polymer-slide>
    <!-- END banner#img -->
	<!-- END banner:loop -->
</polymer-slideshow>
</div>
<!-- END_MODULE Banner -->

この時に、次のようにコンポーネント全体をdiv要素で囲み、<!--#include file="/admin/module/setting.html"-->を記述するようにしてください。こうすることによって、図のように、モジュールの設定をするための枠をつけることができます。


モジュールのカスタムフィールドの利用

また、モジュールIDのカスタムフィールドを利用するとWebコンポーネントを下のイメージのようにその場で操作しやすいです。モジュールIDのカスタムフィールドはVer.2.5.0より使用可能となりました。


/admin/module/field.htmlに設定を記述することができます。
この時に以下のように、モジュールによってテンプレートを分ける記述をしておくことをお勧めします。

<!--#include file="/admin/module/mid%{mid}.html"-->

以上が、サイトテーマでのPolymerの導入方法になります。a-blog cmsのモジュールの考え方がWeb Componentsの考え方と相性がいいですし、Web Componentsのimportもa-blog cmsのパスの解決機能によって楽に行えます。
みなさんも是非、a-blog cmsで、Web Componentsという未来の技術にチャレンジしてみてはいかがでしょうか?


aTemplate.jsの紹介

a-blog cmsのテンプレートエンジンに非常によく似たテンプレートエンジンをJavaScriptで作成してみました。名付けてaTemplate.jsです。
今回は、友人に使い方を聞かれるので、現在出来る機能をまとめてみました。すべての機能は網羅できていませんが。


このテンプレートエンジンは、a-blog cmsのカスタムフィールドメーカーを一から作り直そうという話になって作ったテンプレートエンジンです。フロント側でもa-blog cmsのようなテンプレートエンジンを使いたいという人はこのままお読み下さい。これから、このテンプレートエンジンの導入方法、またどういったことが出来るのかを説明していきたいと思います。


「aTemplate.jsの紹介」の続きを読む

堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド