時雨に舞う

プログラミングや技術情報などの備忘録

AsanaをNativefierでデスクトップアプリ化

はじめに

AsanaはTrelloとTodoistのいいとこどりをしたようなプロジェクト管理ツールです。

asana.com

Trelloのようにボードを使ったかんばん方式のタスク管理に加え、 Todoistのように、シンプルなTodoリストのようにも使うことができます。

Nativefierはシングルページアプリケーションをデスクトップアプリ化するツールです。

github.com

Asanaはデスクトップアプリがなく不便だったので、Windowsのデスクトップアプリ化してみました。

続きを読む

一つのHTMLファイルに画像とCSSを統合する

  • はじめに
  • 結論からいうと
  • インストール方法
  • 使い方
    • ヘルプをみる
    • 変換する
  • まとめ

 

はじめに

一時的に使うペライチのページなのに、画像ファイルやCSS,JSファイルなんかもセットで管理しなきゃいけないのが面倒なときってありますよね。

通常はそれぞれのファイルを別々のほうが管理しやすいというメリットがありますが、
メンテナンスページなどの一時的につかうペライチのページなんかは、全部統合しちゃったほうが取り回しがいいときがあります。

そんなときに便利なのがNodeパッケージの「Inliner」です。

HTMLファイル、CSSファイル、JSファイル、画像ファイルを、一つのHTMLファイルに統合してくれます。

 

www.npmjs.com

結論からいうと

  • nodeパッケージのinlinerを使う
  • *.min.jsや*.min.cssの外部読込がある場合は「-m」オプションをつける
続きを読む

jenkinsでsjisチェックをかける

プロジェクト内のファイルは基本的にutf-8で統一していますが、たまにshift-jisなど別の文字コードでgitにpushされる事があり、早めに気づきたいと思いました。

jenkinsのシェル実行でチェックしてみます。

 

jenkinsの設定

 jenkins > project > 設定 > ビルド > ビルド手順の追加 > シェルの実行

シェルの中身の例

 find $WORKSPACE/ -type f -not -name '*.txt' -print0 | xargs --null file -i | egrep -v '^\./(java|html)|charset=(binary|utf-8|us-ascii)' > $WORKSPACE/check-charset.txt && true

 diff -w $WORKSPACE/check-charset.txt $WORKSPACE/check-charset.orig

分解して説明します

 

まず一行目のおはなし

 find $WORKSPACE/ -type f -not -name '*.txt' -print0

ワークスペース以下に対して拡張子txtを除くファイルを検索します。「-print0」 オプションはパス内にスペースが含まれていても処理できるようにしています。後続のxargsの「--null」オプションと組み合わせる必要あり。詳細は調べればたくさん出てくるので割愛します。

 xargs --null file -i

先ほどのfindで挙がったパスをfileコマンドに渡しています。「-i」オプションでmimeタイプ文字列の出力にでき、そこにcharsetが含まれるので今回はこれを使います。

 egrep -v '^\./(java|html)|charset=(binary|utf-8|us-ascii)'

ここで正規表現を使って不要な行を弾いています。前半の「^\./(java|html)」は先頭ディレクトリがjavaもしくはhtmlの場合を弾く、後半の「charset=(binary|utf-8|us-ascii)」は先ほどのfileコマンドで出力されるcharsetでバイナリやutf-8などチェックしたいもの以外を入れて弾きます。

 > $WORKSPACE/check-charset.txt && true

最後のこの部分は結果を「check-charset.txt」に出力し、trueを返す事でシェル実行自体は成功としています

 

次に二行目のおはなし

 diff -w $WORKSPACE/check-charset.txt $WORKSPACE/check-charset.orig

これは素直にdiff取っているだけです。「-w」オプションはスペースの違いを無視するものです。これで差分が出るとビルド失敗、差が無ければ成功になります。

 

比較用ファイルの準備

上記のシェルスクリプトで分かるように、今回はdiffが無ければ合格となる仕組みになっています。よって比較対象のファイル「$WORKSPACE/check-charset.orig」が必要です。

これは空ファイルにしても良いですし、何か除外したいものでも構いません。ただ、上記のシェルスクリプトの結果と比較するものなので手作業で作るよりは一度実行させた結果をリネームして加工するのが楽です。

 

まとめ

取り敢えずこれで簡易的なチェックが出来るようになりました。

ディレクトリの除外はfind側でも可能です。今回はegrepで処理しましたがfind側の方が高速になると思います。

 

著者:t.n

PowerCMSでMTAppFieldSort

PowerCMSでMTAppJqueryのMTAppFieldSortを使う方法です。

MTAppFieldSortはMovableTypeの編集画面にあるフィールドをソートできるので便利ですよね。

しかし、PowerCMSでは一部のケースで期待通り動かない。。。

PowrCMSにはカスタムフィールドとしてエディタ付きテキスト(WYSIWYG)がありますが、MTAppFieldSortでこのフィールドをソートするとWYSIWYGが壊れてしまいます。

ドラッグアンドドロップした時は正常に並び替えできるのに、 MTAppFieldSortで並び替えるとなぜ壊れてしまうのでしょうか。

調べてみるとどうやら、

フィールド並び替えのためにDOMの入れ替えを行うとWYSIWYGが機能しなくなるので、 PowerCMSに付属しているJavascriptがソート発生のイベントをトリガーとして、エディタ付きテキストが壊れないよう工夫しているようです。

そこで、MTAppFieldSortにその処理を組み込んだメソッドを作りました。

/* MTAppFieldSortのPowerCMS対応版を追加 */
$.MTAppFieldSort4PCMS = function(options){
    var op = $.extend({}, $.MTAppFieldSort4PCMS.defaults, options);

    var field = op.sort.split(',').reverse();
    var l = field.length;
    if (l == 0) return;
    var containerId = 'sortable';
    if (op.insertID !== 'sortable') {
        containerId = op.insertID;
    } else if (op.insert_id !== 'sortable') {
        containerId = op.insert_id;
    }
    var container = document.getElementById(containerId);
    if (!container) return;
    if (op.otherFieldHide) {
        $(container).find('div.field').addClass('hidden');
        $('#quickpost').addClass('hidden');
    }
    for (var i = 0; i < l; i++) {
        var id = $.trim(field[i]).replace(/^c:/,'customfield_') + '-field';
        if (document.getElementById(id)) {
            var elm = document.getElementById(id);

            // 追加 エディタ情報を一時退避
            try {
              $("#" + id).find(':input').each(function() {
                var manager = $(this).data('mt-editor');
                if (manager) {
                  manager.currentEditor.powercmsStash();
                }
              });
            } catch (e) {
            }
            // 追加おわり

            container.insertBefore(elm, container.firstChild);

            // 追加 エディタ情報を復帰
            try {
              $("#" + id).find(':input').each(function() {
                var manager = $(this).data('mt-editor');
                if (manager) {
                  manager.currentEditor.powercmsRestore();
                }
              });
            } catch (e) {
            }
            // 追加おわり
            
            $(elm).removeClass('hidden').show();
        } else if (op.debug && window.console) {
            console.log('#' + id + ' が見つかりません');
        }
    }
};
$.MTAppFieldSort4PCMS.defaults = {
    sort: 'title,text,tags,excerpt,keywords',
    insertID: 'sortable',
    insert_id: 'sortable',// Deprecated
    otherFieldHide: true,
    debug: false
};

こんな感じで使えます。使い方はMTAppFieldSortと同じです。

  if($('body#edit-entry').length){
    /* ソート情報は、カンマ区切り、カスタムフィールドは先頭にc:をつける */ 
    $.MTAppFieldSort4PCMS({
          sort: "title,permalink,c:customfieldA,c:customfieldB"
    });
  }

以上です。参考なれば幸いです。

著者:y.t  

 

 

gitのリモートで削除されたブランチをローカルに反映させる

gitのお話しです。

しばらく放置していたリモートブランチ。大量に溜まってきたので整理したところ、別のマシンのローカルリポジトリに反映されず困っていました。てっきりフェッチするだけで更新されると思いきやそうではないんですね。意図的に実行しないとダメなようです。

コマンドの場合

$ git fetch --prune

source tree の場合

フェッチ時のオプション「リモートで消えた追跡ブランチを消去(Prune)」にチェックを付けて実行する

 

著者:t.n

 

concrete5でgoogle mapのブロックが上手く動かない

concrete5google mapのブロックを追加した際に上手く動かなかったのですが、解決に時間を要したので備忘録としてまとめます。

 

まず、ご存知かもしれませんが2016/6/22以降に始めてgoogle maps apiを実行したサイトからapiキーが必須となりました。concrete5で構築したサイトでも勿論この条件に当てはまればapiキーが必要です。

Get a Google Maps API key - concrete5

  

今回問題となったサイトでは上記に該当した為、apiキーさえ付ければ良いと思い込んだのが失敗でした。apiキーはGoogle Developers Consoleで登録するのですが、そこでは「プロジェクト」という単位でapiキーを紐付けており、さらに「プロジェクト」にはどの(googleが提供する)APIを有効にするか設定する必要があります(一部のAPIはデフォルトで有効)。

 

結論としては下記のAPIは有効にしておかないと正常に動作しないようでした。

もしかしたら「Google Static Maps API」も必要かもしれません。(細かく調査していないので曖昧ですいません)

これらを有効にするのを忘れないようにしましょう。

 

著者:t.n

UnityのWebGL出力について

自社サービスのフロント部分をUnityで開発していた、ある日のこと。
(今年の3月あたりの話になります)
「ブラウザで動したらいいのでは?」という話が出てきました。
その時に調べた内容をメモとして残しておきたいと思います。

 

Unityで開発したものを、ブラウザで動作させる場合2つ方法があります。

・UnityWebPlayer

 こちらは、プラグインをブラウザにインストールして動かすタイプです。
 所謂Flashみたいなものですね。

WebGL

 言語はJavascriptで、ブラウザからGPUを操作し、Canvasに描画します。

 

今回はWebGLについてです。

 

実は、Unity5.3.3からWebGL出力ができるようになりました。
ただし、WebGL出力の機能はプレビュー版となっていて正式リリースではありません。
また、Unityの公式ページではモバイル端末は未サポートとなっています。
以下、Unity公式ページから抜粋になります。
http://docs.unity3d.com/ja/current/Manual/webgl-browsercompatibility.html

Unity WebGL コンテンツは現在モバイル端末ではサポートされていないことに注意してください。一部端末、特にハイエンドなものでは動くかもしれませんが、大抵の端末は性能不足で Unity WebGL を十分に動かすだけのメモリがありません。

 

早速、自社サービスで作成していたパズルゲームWebGL出力して、PC版Chromeで確認したところ、ほぼ完璧な動きをしていました。

問題は、Arialフォントの文字列が描画されないことくらいでした。

(Arial=動作環境のデフォルトフォント)
この問題は、Fontデータも一緒にビルドして組み込んだFontを使用することで解決します。
また、サーバー上に配置したアセットバンドルを読み込むことができます。

 

実は、自社サービスはスマートフォンがターゲットとなっています。
なので、PCで動いただけでは喜んでいられません。。。

 

さっそく、本命のAndroid版のChrome(Nexus5)で動作確認してみました。

 

・・・結果は、残念なことになりました。
動くこともあれば、動いたとしてもエラーも吐かずに固まってしまったり、
何も表示されないまま固まってしまうなど不安定な動きとなっていました。

Nexus5くらいの性能ならば動くと信じたかったのですが、残念です。


まとめとして、UnityのWebGLはPCブラウザで動作させるには問題がないことが解りました。PCのブラウザ向けにリッチなコンテンツを開発するのにむいているのではないでしょうか?

 

また、ざっくりとした説明になりますが、UnityのWebGL出力はemscriptenを使用しています。
emscriptenとは、c,c++からLLVM生成して、それをJavaScriptに変換するコンパイラになります。つまり、コンテンツをc,c++で開発をしておけば、PCアプリ、スマートフォンアプリ、Webアプリでも同じコードで済みます。
今後、emscriptenがWebアプリの開発にどう影響を与えていくか気になります。

 

最後に、UnrealEngine4でもWebGL出力が可能になっていましたので調べてみましが、結果はUnityと同様結果でスマートフォン環境では厳しいという結果になりました。

 

著者:ai