info

多分フロントエンドエンジニア寄りのフリーランスWeb制作者のサイトです。

他バンドでギター弾いたり、max/msp触ったり等もしております。
最近はチャリ買ってはしゃいでます。
あと犬が飼いたい。

どうぞお気軽にご連絡いただけまししたら幸いです。

works

  • > toyota
  • > glico
  • > bandainamco
  • > shiseido
  • > pioner
  • > mitsui
  • > yodobashi
  • > panasonic
  • > square enix
  • etc..

※詳細をご希望の方はお手数ですが

contactよりご連絡お願いします。

links

リンクです。増えるといいな

contact

ご依頼/ご相談は下記よりお問い合わせください。
その他ご質問等ありましたらお気軽にご連絡ください。

Nunjucksの変数出力(Variables)とvueとかののデータバインドどっちも使いたい時

概要

Nunjucksの変数出力(Variables)とvueのデータバインドはともに
{{}}なので共存したい場合のとりあえずの方法。

Nunjucks/Vue.js

普段jqueryでいいじゃん派なのですが
最近案件でvue.js使う機会があり。
軽く使う程度であれば便利は便利なので個人的な案件でも使ってみてます。
あんまり深く使ってはいる訳では無いけどもAngular1(2は知らない)とかより手軽に使い始められそうな感じな印象です。
.vueファイルとでコンポーネントとかまで使うとしばらく後で見て何だっけコレ?現象がおこりそうな気がするので
個人的にはまだ本格的に使う気は無いです。

{{}}の展開

で本題ですがNunjucksは{{}}が変数展開,Vueは{{}}データバインドってそれぞれ言い方あってるかわかりませんが、
まぁ{{}}での出力がかぶってるのでそれを回避する方法。

Nunjucks側で先に展開されると思うので具体的に言うとNunjucksで{{}}をそのままhtmlに出力する方法ですかね。

//Nunjucks
{% set temp = '{{ val }}' %}
{{ temp }}

以上です。

関連記事

Video要素の音声をWeb Audio APIのAnalyserNodeで解析してWebGLで動画のポストプロセスと連動

概要 html5のVideo要素をWeb Audio APIとWebGLであそんでみました。 createMediaElementSourceでvideoの音声を取得、 analyserNode経由で解析した音声データをWebGLのシェーダーGLSLと連動させて videoのテクセルを操作してリアルタイムでグリッチっぽいポストプロセスかけてます。 色々用語あっているのか不明ですが。 とりあえずの結果 色々相談重なって今月後半は忙しくなるぞーって思って片手間にゴニョゴニョやってたら未だ作業が始まらず。フリーランスあるあるですがせっかくなので記事にしてみます。 素材動画は恥ずかしながら趣味でやってるバンドのリハーサル風景です。 Web Audio APIもスマホだと一回タ...

phina.jsで簡単なお手軽暇つぶしブラウザゲーム作ってみました

概要 phina.jsで簡単なお手軽暇つぶしブラウザゲーム作ってみました 宣伝ついでにphina.js使ってみての勝手な所感/評価等書いてみます。 宣伝 とりあえずさっそくの宣伝です。 暇つぶしゲーム 飛べない豚 flightlesspig 別に働きたくないとかでは無いのだが目標として とりあえず少なくても良いので不労所得獲得の為試行錯誤してみてます。 客仕事だと時間とか量が調整できないとかって点のぞけば むしろポチポチコード書く作業自体は結構好きな方です。 うまくいくといいなぁ、という事でぜひやってみてください。 ブラウザゲームのjsライブラリ 昔はas3カリカリ書いていた方なので というか上記のゲーム自体...

HTML5の<video>タグFullscreen制御

概要 html5の<video>タグは PC/スマホ/タブレット各ブラウザ,端末ios/android,でも仕様が異なったり 変わったりで毎回面倒な思いしてる気がするのでメモ代わりの備忘録としてまとめます。 IE11/android等もある程度対応してます。 PCはIE11はまだ対応する流れだと思うので それぞれベンダープレフィックスつける必要もあり スマホとかタブレットもiOS10以降からインライ再生が可能になってりハンドラの名前が変わったり? android4系とか入れるとかなるとさらに調整いるかもです。 ...

運営サイト

広告なのよー

ツイッター