Vue, MathJaxをCodepenで

CODEPENを使うと、HTML+CSS+JSでちょっとしたことを試せるわけですね。JS系のサイトでよく見かけててたけど、今回はじめて使ってみたらけっこうよかった。

はじめて数式表示のためのMathJaxを使用。LaTeXを使ってみる機会がないままこれまで来ちゃったけど、MathJaxでなら追いつけるかも。

それとVue.js(もう日本語コミュニティーがある!)ね。軽量フレームワークと聞いて少し試してみました。全然深いことしてないけど、触ってみて雰囲気だけと思ってやってみたのですが、たしかに気軽に試せる感じですね。フィボナッチ数がでますよ。

See the Pen jWwLyN by Ken (@kentakunte) on CodePen.

出典&参考:「Javaによるアルゴリズム辞典」技術評論社

translatez(0)ってなんのために書いてるの?

CSSで

transform: translateZ(0);

ってなんのために書いているのかなって調べてみたら、ハードウェアアクセラレータを有効にするためだったことが判明。

Even though we’re not animating an element in 3D space, we can enable 3D rendering. At the very least, the transform: translateZ(0); declaration triggers GPU acceleration in modern desktop and mobile browsers. This seems to be the most effective way of triggering GPU acceleration (all vendor prefixes included):
— Increase Your Site's Performance with Hardware-Accelerated CSS

3D描画をするつもりじゃなくてもtranslatez(0)で3D扱いにすると、2D描画もパフォーマンスが上がるそうです。

Yeoman Angular Generatorでgrunt buildするとtemplatesフォルダがdistに行かない件

自前でdirectiveなんかを作って、テンプレートHTMLのファイルをtempleteURLを指定したがよいものの、いざgrunt buildをしてみると、テンプレートを保存したフォルダtemplatesがdistに流れていかない!という現象にぶつかったので。

色々方法はあるんでしょうが、一つの方法は grunt-angular-templates をつかう方法です。今回これをやってみました。(ちなみにこのサイトに大変お世話になりました。記事はもう1年前のもの。先取りすごい!grunt-angular-templatesを使ってみたygoto3's caught up)

ようはテンプレートHTMLをJavascriptの一部にして、結合してしまおうというアイディアですね。grunt buildの際にひとまとめにされるjavascriptのなかに入れちゃえば、ファイルをわざわざコピーしなくてもいいじゃん、てことかな。

具体的には、templateCacheで準備させて、呼び出しの際はキャッシュにある内容が読み込まれるようにしておくというカラクリみたいです。

もちろんインストールは

$ npm install grunt-angular-templates --save-dev

そして、Gruntfile.jsに

grunt.loadNpmTasks('grunt-angular-templates');

を追加します。ぼくは grunt.initConfig がおわったすぐ後あたりに書きました。

そしてタスクの内容を設定しますが、それは grunt.initConfig内の最後の方にこんな感じで書きました。

ngtemplates:  {
      app: {
        cwd:      'app', 
        src:      'templates/**.html',
        dest:     'app/scripts/app.templates.js',
        options: {
          module: '<%= yeoman.appname %>',
            htmlmin: {
              collapseBooleanAttributes:      true,
              collapseWhitespace:             true,
              removeAttributeQuotes:          true,
              removeComments:                 true,
              removeEmptyAttributes:          true,
              removeRedundantAttributes:      true,
              removeScriptTypeAttributes:     true,
              removeStyleLinkTypeAttributes:  true
            }
        }
      }

それぞれ何がどの設定なのかは公式ページの説明を見ていただきたいのですが、「srcに指定されたテンプレートHTMLたちを、destに指定されたjsファイルに格納して、その際にはhtmlminで圧縮してね。その際にangular.module(ほにゃらら)にはmoduleで指定した名前をいれておいてね」といった具合です。Yeoman Angular GeneratorではGruntfile.jsと同じ階層にappフォルダあるので、作業はそのフォルダでやってもらうためにcwdも指定しています。

こうすればdistをサーバーにアップしてもテンプレートはきちんと読めてるし、しかもXHRも抑えられる。一挙両得ですな。

YeomanにてBower Componentを自動インジェクトするには

Yoemanを使ってて、もしBowerでコンポーネントをインストールする必要があるなら、--saveオプションが必須のようですね。

> bower install [コンポーネント名] --save

こうすると、コンポーネントがインポートされて、同時にbower.jsonにインストールされた旨が書き込まれます。

で、続けて

> grunt serve

もしくは

> grunt wiredep

ってすると、index.htmlのスクリプトタグが更新されて、インストールしたコンポーネントも使えるようになるようです。Gruntすげぇ。

Node+Angularでファイルアップロードアプリ作ってみた

ここ見て作ってみました。

Christophe Geers' Blog - AngularJS File Upload

まとめのところだけ引用すると、

To recapitulate, we have 3 components that make up our Angular application:

FileUploadCtrl: Our controller which is tied to a DIV which contains the file upload widget

uploadManager Service: This service manages the files we want to upload. It sends out a couple of events to which our controller listens and acts to accordingly.

upload Directive: This directive transforms the file input into a bonafide upload widget. It uses the widget’s callbacks to notify the uploadManager service.
— http://cgeers.com/2013/05/03/angularjs-file-upload/#summary

雰囲気的には

  • FileUploadCtrlはファイルアップロードウィジェットのあるDIVとつながるコントローラ
  • uploadManager Serviceはアップロードするファイルの管理をしてて、必要に応じてコントローラにイベントを送信
  • upload Directiveはファイルを実際のアップロード処理でアップロードするところ。おわったらコールバックでuploadManager Serviceに通知

という感じですかね。

YEOMANである程度組み立てて、それから自分のロジックを組み込んでいくっていうのもいいね!

次はMongoDBをくっつけてみよう。