After Effects After Effects 4万以上のAE動画テンプレートとモーショングラフィックステンプレートであなたのクリエイティビティをサポート
前回、HTMLファイルを読み込んで表示させる、ということを行いましたが、思ったより面倒くさいことがわかりました。ファイルを読み込むのに非同期メソッドを使わないといけないし、ちょっとしたデータをHTMLに受渡して表示させるのもいちいちreplaceでコードを置換したりしないといけない。もっと簡単な方法はないのか?と思ったことでしょう。 実は、あります。それは「テンプレートエンジン」を使うのです。Node.jsでは、さまざまなテンプレートエンジンが利用できます。もっとも一般的に用いられているのは「EJS」というものでしょう。 では、EJSをインストールしましょう。Node.jsには「npm」というパッケージ管理プログラムが用意されています。これを使うことで、コマンド一発で必要なライブラリをオンライン経由でダウンロードしインストールできます。 コマンドプロンプトやターミナルを起動し、以下のように
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
2016 - 02 - 01 静的サイトジェネレーターを比較してgulp-ejsに辿り着いた Web開発 gulp スポンサード リンク 静的サイトジェネレーター(スタティックサイトジェネレーター)をいくつか比較し、実際に使ってみて、最終的に gulp-ejs に辿り着きました。 まず、gulp-ejsに辿り着くまでの話を少しだけ。 その後、gulp-ejsの導入方法を書いていきます。 gulp-ejsに辿り着くまで 最初はsmarty 元々は動的サイトを構築するために、 smarty を利用していました。 データベースとの通信や、テンプレートエンジンとしての機能、強力なキャッシュ機能など、使いやすい部分も多かったです。 しかし、データベースとの通信が不要で簡単なサイトを作るようなケースの場合、メリットよりもデメリット(導入やメンテナンスに掛かる手間)の方が大きくなったので、簡単に使える静
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能(gulp/Gruntなどと連携すると簡単そう) よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります(いわゆる短縮文法)。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
What is EJS? What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript. Use plain JavaScript We love JavaScript. It's a totally friendly language. All
Captcha security check ectjs.com is for sale Please prove you're not a robot View Price Processing
node.jsでwebAppを作成する際、Expressを用いた様々なテンプレートエンジンが存在します。 有名ところで、「EJS」や「jade」等々とあるのですが、その中でも群を抜いて爆速といわれている(うたっている)テンプレートエンジンが「ECT」となります。 公式ページ http://ectjs.com/ 確かに、Jadeを使っていた時ページ表示の「遅さ」を感じていました。 かといって「EJS」を使おうと思っても、Express2 まで使えていたlayout、partial、block等が、 Express3からは、テンプレート部分と分離しシンプルなAPIにするため、ejs-localsに移ったようで ejs-locals github ejs-locals https://github.com/RandomEtc/ejs-locals ejs-locals インストール npm in
こんにちは! LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか? EJSっていうのはですね、なんかもう、こう、すんごいツールでして! とにかく、使うとコーディングがめっちゃ早くなるんですよ!! 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは? EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
2023年12月 (1) 2023年11月 (116) 2023年10月 (79) 2023年9月 (28) 2023年8月 (7) 2023年7月 (6) 2023年6月 (101) 2023年5月 (229) 2023年4月 (201) 2023年3月 (206) 2023年2月 (147) 2023年1月 (193) 2022年12月 (146) 2022年11月 (54) 2022年10月 (1) 2022年9月 (1) 2022年8月 (1) 2022年7月 (3) 2022年6月 (1) 2021年9月 (1) 2021年8月 (8) 2021年6月 (3) 2021年4月 (4) 2021年3月 (6) 2021年2月 (1) 2021年1月 (3) 2020年12月 (2) 2020年11月 (2) 2020年10月 (5) 2020年9月 (12) 2020年8月 (40
WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも!そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS(コンテンツマネージメントシステム)というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバゲーム部門でデザイナーをしております吉田直由と申します。 リリース直後からの1年2ヶ月の間、ガールフレンド(仮)でUIデザインの運用を担当しておりました。 運用のフェーズになると大きく問題になってくるのが「業務の効率化」ではないかと思います。便利ツールの導入や、難しい技術の取得などもありますが、、、使い慣れない技術は逆に効率を下げる結果になってしまうのでは? と、なかなか一筋縄ではいかない問題です。 ガールフレンド(仮)デザインチームの場合、1年目~3年目の若いメンバーが多く、さらにメンバーの数も10人という大所帯でした。 どう
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
スマートフォン サイトを構築される場合は、 Google が作成したスマートフォン サイト構築のノウハウを持った企業のリストを参考に、お客様のニーズに合ったパートナーを見つけてください。
綺麗目なデザインでレスポンシブ Webデザインにも対応のWPテーマ・ Alpineのご紹介。カスタムメニュー やカスタムヘッダなどにも対応 しています。ほぼ完成されている 感じです。 レスポンシブWebデザイン対応のフリーのWPテーマです。 レスポンシブWebデザイン対応のフリーのWordPressテーマ。綺麗なデザインですね。カスタムメニュー、カスタムヘッダなどにも対応しています。 ↑ イメージギャラリーも作れます。PHOTOSPACEというプラグインを併用してくれとの事。ギャラリーもレスポンシブWebデザイン対応です。 ↑ タブレットタイプのデバイスではチェックしていませんけどサイズで確認する限りでは見やすそう。 ↑ ポートフォリオやギャラリーはページテンプレート機能で作成します。 こういったよくできたテーマのソースを見るのも結構勉強になる、というか僕はそうやって独学しているのでフリー
企画書も原稿も、まずアイディアを紙に書き出すことから始める。そうすることで散らばっていたアイディアが洗練されてまとまっていく。スマホアプリ、ウェブサイト、タブレットのデザインを考えるときも紙から始めるとはかどるよね。 今回はそんなワイヤーフレームの作成に便利なテンプレートをご紹介。UI STENCILSは各デバイスのスケッチブックやステンシルを販売しているおすすめサイト。 UI Stencils Browser Sketch Pad. from Design Commission on Vimeo. Pad Sketch Sheets iPadのスケッチシート。簡単なスケッチはグリッドなしバージョンで、詳細スケッチはグリッドありを活用して。 iPad Idea Sheet 日本語のサイト。原寸大のシート(横向き)、70%縮小シート(縦向き)、50%縮小シート(横向き)の3種類。画面内で縦横
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く