Gulp + EJS + JSONを使用してhtmlファイルを量産する方法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
kyonagashima.com
Brad Frostが自分の名前のドメインを確保するのにぼったくられたという記事を読んで、良い機会なのでkyonagashima.comを確保した。面倒だったので735円だしといつも通りValue Domainで取得した。 世間のドメイン取得代行業者への評価は地に落ちているような印象だが、僕は実際に辛いトラブルにあったことがなく、大体は根気強いメールのやりとりのみで解決できてきたので、あまり悪く評価してはいない。でも検索クエリーを横取りして先に奪ってしまうといったことはやってそうだなという程度には信用していない。 実際にそういった状況に遭遇したとしたら、金の問題よりもイライラで沸騰しそうだ。買って後悔することはまずないので、買っておくかという程度の気持ちで確保した。そのはずなのに既に後悔していたりもし、ままならない。とりあえずのところは不要であるのに、ネガティブな理由で動いてしまったからだ
rotstudio.com
<body> De door u gewenste pagina bevindt zich <a href="http://www.xel.nl/domeinnaam-geregistreerd">hier</a>. </body>
BracketsでSassをライブプレビューする - Qiita
本記事はBrackets Advent Calendar 2014の20日の記事です。 ライブプレビューがとても簡単に行えることが魅力のBracketsですが、実はSassのライブプレビューにも対応しています。 方法は デフォルト機能によるもの エクステンション（brackets-sass）によるもの の2通りあり、それぞれメリット・デメリットがあります。 以下、それぞれの方法でライブプレビューを実行するための解説をしていきます。 ディレクトリツリー |──index.html | |──sass/ ──main.scss | |──_var.scss | |──_module.scss | |──css/（コンパイル前は空フォルダ） デフォルトの機能 メリット 必要なのはSassの実行環境のみ Compassにも対応 デメリット 反映されるのがファイル保存時のコンパイル後で、
静的サイトジェネレータ「Phest」導入のメリット5
静的サイトジェネレータがブームだとか聞きます。 私の場合は、大変な要件が来た時になにかいい方法はないものか・・・と辿り着いたのが 静的サイトジェネレータでした。 初期に集中して構築した結果、その後の修正や運用でとてつもない工数の削減ができたので、 導入は大成功となりました。 静的サイトジェネレータですが、初期コーディングの時点でも威力を発揮しました。 ここでは初期コーディングにおいての静的サイトジェネレータのメリットを5つまとめました。 もくじ そもそも静的サイトジェネレータとは？ 選ばれたのはPhestでした メリット1:同じことを複数記述しなくていい メリット2:ルールを把握しやすい メリット3:パスの設定方法が豊富 メリット4:テスト用、本番用ファイルの生成が楽 メリット5:パターンのテストが簡単にできる 最後に そもそも静的サイトジェネレータとは？ 選ばれたのはPhestでした メ
初めてのBrackets拡張機能の作成 | Adobe Developer Connection
読者は、BracketsまたはEdge Codeに関する知識があり、JavaScriptを十分に理解している必要があります。 必要なアドビ製品 Brackets（JavaScript、HTML、CSSで記述されたオープンソースのWeb用コードエディター）。 新しいオープンソースのWeb用コードエディターであるBracketsでは、拡張性が重視されています。実際、Quick Open（すぐに開く）、Quick Edit（すぐに編集）、HTML Code Hinting（HTMLコードヒント）などの中心的な機能のいくつかは拡張機能として実装されています。 Bracketsのアーキテクチャは高度にモジュール化されており、Bracketsのメインコードをできる限り的を絞ったものに保ちながら、高いカスタマイズの可能性を提供することによって、問題点の分離を実現しています。これは、現代のWeb開発者のニ
完：WPに記事を投稿したらTwitterに画像付きで投稿したあと、画像URLを取得する | keisuke tsukayoshi
右往、左往を経てついに完結となりました。まずやりたいことをまとめると WPに記事を投稿する 指定した画像付きで自動ツイート （Twitterのタイムライン上にサムネイル表示） ツイートした画像URLをWPのテーマ上で扱える （ツイートボタンに組み込みたい） です。IFTTTを使ってみたり色々なやりかたを試して試行錯誤してみたのですが、WPプラグインであるNextScripts: Social Networks Auto-Posterが一番的を射ていて、ようやくベストプラクティス的なものに辿り着いた感があったので今回はその内容を記事にしてみました。 要件 まず前提というか、ぼくが求めている要件としては 投稿したら画像付きツイートを自動でしてくれる ツイートした画像を取得してカスタムフィールドあたりに保存してくれる カスタム投稿でも動作する アイキャッチ画像から設定できる カスタムフィールドに
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
Glen Maddern: Internet Pro
A few months ago, I read an article by Harry Roberts where he introduced an interesting concept for working with related classes in CSS. In his article, he describes the use of the [] characters in class attributes to help understand their purpose at a quick glance. He presents this example, arguing that it makes the class declaration more scannable - that is, more understandable at a glance: <div
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
更新するのが面倒！サイトの共通部分を簡単に作る様々な方法
サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
JAYPEGのロゴを簡単に作るためのヒント
divタグ一個でJAYPEGのロゴを作った話 | Chiraura.me CSSで頑張ってみる系、いいですね。 色々試行錯誤されていたようですが、::before, ::afterを使わずに、gradientだけでも制作可能です。 そのヒント。 HTML <!DOCTYPE html> <meta charset="UTF-8"> <title>JAYPEGろご</title> <link rel="stylesheet" href="style.css"> Stylus bit = 80px g(lg) linear-gradient(lg, lg) set(x, y) (bit * x) (bit * y) html background #fff body border 1px solid #000 margin 40px auto width 400px height 400px
2014年にもなってWebページをまともに印刷する方法も知らない俺たちは（あるいは、とあるウェッブエンジニアの闘いの記録） - 愛と勇気と缶ビール
前略、window.printという関数をJavaScriptから呼び出せば、めでたく印刷ダイアログが表示されて、今目の前に表示されているウェッブページを印刷することが出来るわけだ。 が、とりあえずこの機能をそのまま使うとおかしい。何やら色々おかしい。media="print"なスタイルシートで指定したbackground-colorすら反映されない。「ブラウザの印刷オプションで出来る」という噂もあるが、僕の環境ではちゃんと色が出なかった。 これは一体どうなっているんだ？2014年にもなって、俺達はウェッブページを、自分がいま目の前にしているそのままの姿で印刷することすら出来ないのか？HTML5技術のカンファレンスを開いたり、WebSocketでチャットを作ったりしてる場合じゃない！事件はカンファレンスで起きているんじゃない、俺の家のプリンターの前で起きているんだ！ ゲンよ、画像じゃ。画像
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
『CSS3でつくるキャラアニメーション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
Further Hardening of the Bulletproof Syntax
For context, please read our earlier post about this syntax. A potential looming problem with the new syntax we introduced earlier this month was raised by Microsoft. The soon-to-be-released IE9 comes with a feature that allows it to render in both IE7 and IE8 Modes. In these two modes, Microsoft ‘fixed’ the parser bug that affected the actual IE7 and IE8. This fix breaks the @font-face syntax for
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
