Fly higher! Sky is the limit!

webの現場で働く人のブログ

トップ > JS

［AngularJS］ノンコーダーやディレクター向け運用支援ツールの開発。

JS AngularJS 効率化

Webサイトの運用をするにあたって、ディレクターから案件が入稿され制作者が納品物をつくるわけですが 運用コスト削減につながるように運用支援ツール（仮）を考えてみました。

JSのフレームワークは、AngularJSを使用してみました。

運用ツールのゴール

  • ディレクターやノンコーダーでもソースを生成できる。
  • あとはコピーして貼り付けて終わり。

今回は、xmlの生成を例にサンプルをつくってみます。

DEMO

See the Pen Angularjs sample tool -- blog by @paradox_tm (@takumaro-web) on CodePen.

※ AngularJSを扱う場合は、バージョンに注意が必要。
※ 大したことはしていないので、技術的な説明は省きます。
※ ソースの整形には、http://hilite.me/ を使用してみました。

アイディア次第では、かなり運用負荷の軽減につながりそうな予感がしますね。

最後に

ツールの開発に時間がかかったとしても、その後の『運用負荷の軽減につながる』と考えれば十分つくる価値はあるかなーと思います！ 特にディレクターさんに喜ばれるかもしれません！

それでは...

［JS］日付処理 × replace × 置換 × 後方置換

JS

（例）2016/02/04 → 2016年2月4日 にしたい場合。

  /*日付置換*/
  var date = '2016/02/04';
  date = date.replace(/^(\d+)\/(\d+)\/(\d+)$/, function(){
        var month,day;
        month = arguments[2];
        day = arguments[3];
        month = month ? month.replace(/^0/,'') : '';
        day = day ? day.replace(/^0/,'') : '';
        return arguments[1] + "年"+ month + "月" + day + "日";
    });
  1. 文字列をスラッシュのところまでで三分割し、yyyy | mm | dd の形にする。
  2. 三分割したうちのmmとddのみ変数に代入
  3. 01日、02日などの0から始まる日付を三項演算子を使用し検索置換する。
  4. returnにて、変更した値を返す。

DEMO

See the Pen blog01 by @paradox_tm (@takumaro-web) on CodePen.

外部APIやJSONから吐き出される日付を変更したい場合などに使えます。

日付処理の優秀なプラグインといえば、Moment.js | Homeがありますが、出力される形式（フォーマット）が決まっているのであれば、わざわざプラグインを使用しなくても対応できることもあるので少しでも参考になればと思います。