プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます！ jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須

いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,

ぼくは自然言語処理を使った文章解析サービス『筆者の気持ち 考えるマン』だよ。 クチコミを入力してもらえたら、それを書いた人がどんな気持ちだったのか(ポジティブかネガティブか)を考えるよ。試してみてね。 サンプルテキスト ボタンをクリックすると、サンプルテキストを読み込みます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 筆者の気持ち考えるマンで行っているような、人間が書いた文章の意味をコンピュータで分析する処理を自然言語処理 (NLP: Natural Language Processing) といいます。 自然言語処理にもいろいろな分野がありますが、このサービスのように文章がポジティブなものなのか、ネガティブなものなのかを判定する技術は、特に「センチメント分析」と呼ばれています。 このサイトでは、機械学習という方法を応用して、『ポジティブな意見』と『ネガティブ

clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、 ::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。 しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、 今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。 ※2019年現在は全ブラウザ対応しています。 挿入出来るモノ 大きく分けると３つです。 テキスト プロパティの値 画像 content:”テキスト” 半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。 日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。 例：タイトルの前に★マークを

ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ

少し前に、「スタッフだけで作ったカードローンのサイトが完成間近」という記事を書きましたが、どんな感じでスタッフを育てサイトを作ったのかを簡単にまとめておきます。 スタッフだけで作ったというか、正確に言うとスタッフが全ての記事を書いたサイトですね。デザインやアフィリエイトは私が担当し、スタッフには記事を書くことに集中してもらいました。 情報配信サイトの場合、アフィリエイトの知識がなくても問題はないと思っています。特に商品とは関係のないジャンルの記事を書く場合は、商品知識も必要ありません。見た人にとって有益な情報が載っている記事になることを意識して書いてもらっています。 このサイトを作る上で、ライター未経験者どころかパソコン初心者にパソコン操作やWordPressの使い方、記事の書き方を同時に教えるというハードな方法を取りました。 ゼロからのスタッフの育成手順 パソコン初心者を雇うことが多いの

カスタマージャーニーマップを使う3つのメリット顧客体験の分析にカスタマージャーニーマップを使うメリットとして、次の3つが挙げられます。 視野が広がるWeb担当者が考える施策は、PCやモバイルなどの媒体に視線が向きがちです。しかし、顧客の行動文脈から施策を考えるようにすると、もっと広い視野で施策を検討できるようになります。PCやモバイルだけにとどまらないリアルとの連携や、普段はあまり思いつかないような施策の立案が可能になります。 複雑なデータが直感的に把握できる顧客の体験は、「目的」「行動」「タッチポイント」「思考・感情」など、さまざまな要素の集合として構成されています。これらのすべてを把握することは非常に困難ですが、カスタマージャーニーマップを活用することで全体を見渡せるシンプルな形に整理できます。 施策立案が考えやすくなるカスタマージャーニーマップは、顧客の体験の中でも特に「行動と媒体」

しかし全ての参照元を調べることはできません。例えば、メールマガジン、メーリングリスト、バナー広告などは「ノーリファラー」（参照元が不明）にカウントされることが多いです。 カスタムキャンペーン機能を使うと、そういう特定の参照元を明確に出来るだけではなく、キャンペーン名をつけたり、グループ化して分析することも可能になります カスタムキャンペーンの有効な使い方 上で挙げた例も含めて、カスタムキャンペーンは次のような計測に役立ちます。 メール、メルマガ、メーリングリストからのアクセス バナーなど広告からのアクセス（クリック率などを検証するため） ツイッター、Facebook、@LINEなどSNSでの、投稿単位の効果測定 関連サイトなどからの、特定リンクからのアクセス iPhone、Androidなどのアプリからのアクセス 店頭広告やチラシやDMなどオフライン掲載物からのアクセス（QRコード含む）

リセットしたリストタグのスタイルをもとに戻す方法の概要です ulやolのリストタグは単純なリスト以外のところにも使うことが多いので、ブラウザが持っているスタイルをリセットして使うことが多いタグです。 しかし、CMSの記事部分などではブラウザが持っているリストタグのスタイルを使いたいときがあります。 リセットしたスタイルをもとに戻すときは、リストタグにmargin: 1em 0;・padding-left: 40px;・list-style-type: disc;を指定します。 番号リストタグのときはmargin: 1em 0;・padding-left: 40px;・list-style-type: decimal;を指定します。 まとめ！ リストタグは、margin: 1em 0;・padding-left: 40px;・list-style-type: disc; 番号リストタグは、m

はじめに 前回のこれからはじめるGulp：bundler, rbenv, nodebrewでGulp環境を作ってみる #1でGulp自体を動かすことができたので今回はgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作ってみます。 gulp-sassについて gulp-sassはSassのGulpプラグインです。gulp-sassはnode-sassを使っています。代わりにgulp-ruby-sassを使うことRuby版のSassを使うことができます。 ディレクトリとサンプルSCSS 先に必要なディレクトリとサンプル用のSCSSファイルを作っておきます。 src, destディレクトリを作る ソースとなるSCSSファイルはsrcディレクトリに、コンパイル後のCSSはprod(dist)ディレクトリとします。これは一例なのでディレクトリ名は好みに合わせて作ってください

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 去年の11月辺りから、メインマシンがWinからMacに変わりました。 Winちゃんもサブマシンとして頑張ってくれています。主に検証に使用していますが、、、 メインマシンの交代を機にgulpを導入したので、方法やら所感やらをちょこちょことまとめていきます。 今回は、簡単なタスクを登録して動かすところまで。 その２で、ファイルの監視や同期処理などを覗いていきたいと思います。 もくじ タスクランナーってなに？ Gruntとgulp 必要なものを準備する タスクを書いて、実行しよう まとめ タスクランナーってなに？ メインマシンがOSごと変わったので、自分の開発環境を整理・再整備する際に （´-）.｡oO（いっちょ最近流行りのタスクランナーでも入れてみようかね…） と思い立った次第です。 大学時代のトラウマから黒い画面はあまり好きではない

BrowserSyncって何？ テキストエディターでHTML,CSS,JavaScriptのコードを編集して、結果を確認するのにWebブラウザーにフォーカスを移してF5で更新して…… というWeb開発のワークフローを簡素化するプログラムです。 BrowserSyncはファイルの変更を監視して、変更を即座にブラウザーに反映させることができます。 しかもCSSファイルの編集はページの再読み込みをすることなく反映されます。 複数ブラウザーを立ち上げていてもOK！モバイルブラウザーも自動で同期します！ テキストエディター上での作業に集中することができるので、作業効率が劇的に向上します。これを使わない理由はありません！！ インストール方法 Node.jsをインストール BrowserSyncはNode.jsで動くので、まずNode.jsをインストールします。 Node.jsのサイトからインストーラー

minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任

前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ

Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は時間で画像が切り替わるスライドショーを作りました。動作は一番シンプルで、クリックの処理は入っていません。TOPページでイメージ画だけ切替表示したい時に便利ですね。 合言葉は「jQuery　こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ ▼サンプルでは、3枚のスライドがフェードのアニメーションで切り替わります。 別ウィンドウで開く Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は slide.js とします）を読み込みます。 <head> <script src="common/js/jquery.js" type="text/javascript"></

こんにちは、くーへいです。 先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。 今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。 グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違い パッと見では分かりにくいのですが、違いは以下の通りです。 トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能 トラ

Movabletypeでのカテゴリ並び替えですが、有名なプラグインは以下です。 カテゴリーとフォルダを並べ替えるプラグイン（MT4以降用） - The blog of H.Fujimoto MovableTypeのカテゴリーソートに使える数字置換プラグイン - pmLabo 上記のプラグインはこれまでよくを使用していましたが、Perl版プラグインのためにダイナミックパブリッシングでは使えなかったりと制約があったりするので、最近は専ら以下のように並び替えしています。 カテゴリ並び替えの手順 管理画面よりカテゴリを追加する。 その際、並べたい順番の連番を < > で囲みます。 すべてのカテゴリを上記のように登録します。 すべてのカテゴリ登録後、画面では、先ほど入力した < > は表示されていません。 MTのソース 通常のカテゴリ一覧の記述は以下です。 <ul> <MTCategories sh

2012-10-18 619 1548 メールフォームならメールアドレスは見えないのでスパムは届きにくくなるが、最近内容が英語だけのスパムメールが届くようになった。簡単な処置として、内容に日本語が含まれているかを調べて、英語だけの場合は送信しないという分岐を追加することに。 どうやって全角の文字があるかどうか調べるかというと、文字数を数える『strlen関数』と『mb_strlen関数』を使用して、マルチバイトが含まれているかどうかを調べます。 <?php if(strlen($body) == mb_strlen($body,'utf8')) { //全部英語（全てシングルバイト） }else{ //日本語が含まれている（マルチバイトを含む） } ?> 2019-07-31報告 スパム対策に関しては最新の記事があります フォームのBot対策で有名なのは無料で使用ができるgoogle様の「

ある文字列が半角のみでできていること、 つまり全角文字が含まれていないこと、 を確認したいことがたまにある。 そのやり方としていろんな人がいろんなことを書いていて 正規表現を使うものが多いと思うんだけど、 こんなんでもいいんじゃないかな。 if (strlen($str) === mb_strlen($str)) { return true; } else { return false; } シングルバイト扱いでの長さとマルチバイト扱いでの長さが同じなら半角。 これに文字エンコーディングの指定や半角カナ、制御文字の扱いを含めたら こんな感じでしょうか。 半角カナを許可するなら $include_kana を true に。デフォルト値は false. 改行やタブなども許可するなら $include_controls を true に。デフォルト値は false. 入力文字列 $str の文

ブラウザエンジン先端観測会での、Constellationさんの話を聴いて、CSSセレクターマッチングのコストには複数のレベルがあることを強く意識するようになりました。セレクターマッチングにかかるコストを下げたい、という場合には、どのレベルで何を高速化しようとしているのかを意識しないと話がかみあいません。Constellationさんの話を私なりに整理して考えた、セレクターマッチングのコストを下げるアプローチは次の3つです。 ①セレクターを減らす ②マッチするかどうかの判定回数を減らす ③1回1回の判定処理を速くする これは、ブラウザーのセレクターマッチングの処理の各部分に対応しています。 CSSの各セレクターについて（①）、 対象となるDOM要素すべてに対して、 セレクターがマッチするかしないか決まるまで、親要素・兄要素を辿りながら（②）、 要素がセレクターにマッチする・しないの判定（③

MovableType.net 逆引き辞典 ウェブサイト ブログ ウェブページ 記事 フォルダ カテゴリ グローバルモディファイア アーカイブ 条件分岐 カスタムフィールド アイテム ユーザー 日付 変数 システム テンプレート読み込み Canonical

設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」 CSS2014年11月15日 フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。 gulp.jsとは？ 「Node.js」というjavascriptを利用して実装されたビルドシステムです。 ビルドツールを導入することで、フロントエンド設計時に行う様々なタスクを自動化・高速化することができます。 今後、フロントエンドエンジニアとして生き残るにはビルドツールの習得が不可欠となりますので、今のうちに身に付けておくことをお勧めします。 ※既に募集要項に必須スキルとして掲載している制作会社もあります gulp.jsを導入することで便利になること gulp.jsを導入することで、以下のような設計／実装時に発生する様々なタスクを自動化することが可能になります。 Sass

副業アフィリエイトで月100万稼ぐために必要な１７のこと。ASPや広告主が教えてくれないアフィリエイトのリアルをまとめてみた。 「副業アフィリエイトで月100万稼ぐために必要な１７のこと」と題して、 実際にアフィリエイトに月100万円を稼ぐために必要な思考法やアプローチ、ASPや広告主が教えてくれないアフィリエイトのリアルをまとめてみました。 当初、もっとコンパクトにまとめる予定でしたが、気付けば大変ボリュームがあるものとなってしまいました。 （本当に長いので）お時間のある時にお読み頂ければ幸いです。 なお、前提として、ここで言うアフィリエイトとは『成果報酬型の広告』のことを指しており、クリック報酬型のアドセンスなどは含みません。 ウェブサイトやメルマガにリンクを貼って、その商品を紹介する。自分のリンク経由で商品が売れると、商品の販売者（広告主）から紹介料を貰うことができる。 いわゆるAS

2015 - 12 - 23 《ブログ年収250万を超えて》SEOと収益化のために僕が実践してきたこと WEB TIPS 6ヶ月ぶりの更新になる。 2015年、ぼくはこのブログで11記事だけ書いた。それでも2015年のブログ収入は250万円を超えた。25〜30万円/月がブログの収入として入ってきている。このまま放置していても、しばらくは同程度の収入が入ってくるだろう。 ぼくには会社員という本業がある。いまは某外資系に勤めている。あくまでもブログはぼくの自分の思考や知識をまとめるためのトレーニングツールだ。趣味のひとつとも言えるだろう。副業というほど、肩に力は入っていない。単純に多くの人に読んでもらえるのは嬉しい。戦略を立て、その戦略がハマり、結果として収入があるのは嬉しい。だからぼくはブログを書く。 この１年間は少々忙しかったため殆ど更新できずにいたが、来年からまた再開していこうと思う。

App Storeが台頭してからというもの、野良アプリも真っ当には使えないことが増え、MacintoshでいざDiffを取ろうとすると、程良いツールがなくて結構大変なんです。そんなときにSublime Textのプラグイン。 Sublimerge は手軽で重宝します。 前提 Sublime TextにPackage Controlを導入済みであること。 プラグインのインストール 1. メニューバーから Tools > Command Palette... を選択するか、短縮コマンド Shift＋Command＋P でコマンドパレットを呼び出す。ここに install と入力すると Package Control: Install Package と出てくるのでこれを選択。 2. さらに sublimerge と入力すると Sublimerge Pro というプラグインが見つかるので、これを

（注＊2015年8月31日に公開された記事に新たな情報を再編集したものです） 解析できていた検索キーワードが(not provided)になってしまいました… 2015年8月18日から「Yahoo!検索」のSSL化が段階的に実施され、すでにその影響がでている方もいるのではないでしょうか。8月12日、Yahooはより強力なセキュリティ基準を採用したサービスを提供するため、検索結果にSSL（Secure Sockets Layer）と呼ばれる暗号化プロトコルを使用することを発表し、現在すでにSSL化が進んでいます。 この検索エンジンのSSL化はマーケターやアナリストを始めとした多くのサイト運営者にとって深刻な問題でしょう。というのも、このSSL化により今までサイト解析によって取得できていた「検索キーワード」がGoogle Analyticsで（not provided）表示になるようなことが起

少し前にScreaming Frog SEO Spiderがアップデートされversion4.0になりました。 Google Analyticsと連携ができるようになったりと非常に便利になった、このScreaming Frog SEO Spider。 以前、こちらの記事で紹介をさせてもらいましたが、まだまだ使ったことがないという人も多いと思います。 今回は、初めての方のために、Screaming Frog SEO Spiderの使い方を紹介したいと思います。 目次 Screaming Frog SEO Spiderって何？ Screaming Frog SEO Spiderで出来ること 全URLのリスト化 アウトリンクのリスト化 レスポンスコードのリスト化 ページタイトルのリスト化 ディスクリプションのリスト化 h1のリスト化 h2のリスト化 画像ファイルのリスト化 検索エンジン用の指示関

KANAPPLE.NET available for sale For instantly purchase. Please contact us to get this domain.

あれ？どうやるんだっけな？となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。 ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。 と思って、さあ、CSSで装飾や！ってなっても、あれolの数字って、どうやって弄ったらいいんだ？list-style？？みたいになります。 じゃあ、本腰入れてolの数字をカスタマイズしてやろう！と、イマココって感じです。 olとは？まずはolってなによ？という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き！</li> </ol> こんな感じで数字付き！といった具合に。 ブログやサイトのUIを作

先週、授業中にやったjQueryを使ったシンプルなスライドショーです。 スライドショーは３週に分けて少しずつバーションアップしていきます。 スライドショーの動作イメージ スライドショーの動作イメージは、次のような感じです。 あらかじめスライドに使用する画像を用意して、jQueryを使って表示・非表示を切り替えていきます。 実際に作ってみよう！ まずはHTMLです。 <div id="wrap"> <p id="pic1"><img src="jQuery.png" alt="jQuery"></p> <p id="pic2"><img src="HTML5.gif" alt="HTML5"></p> <p id="pic3"><img src="CSS3.png" alt="CSS3" ></p> </div> 実際は色々な方法があり、その方法によってマークアップも変わってきます。今回はp

リンクには既定値で、最初からアンダーラインが表示されるようになっています、逆にマウスオーバーすることで表示させるっていう使い方も結構されます。今回のコードは、text-decorationを使ったものではなく 擬似要素を使って線を表現しています、そのことによってより柔軟な表現が可能になります コードの解説と実装方法 アンダーラインの部分は a の擬似要素 after を使って作られています。 それを transition で変化させています 変化する基準は scaleです。 scaleは拡大縮小を行うことが出来ます このコードでは、X軸に対して拡大縮小します。つまり横方向のみに伸びたり縮んだりして見えるようになります これをマウスオーバーすることで動作するようにしています。 コード SCSS版 a { position: relative; display: inline-block; p

Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ

はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。 gulp-plumberについて gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。 gulp-notifyについて gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい

こんにちは。「AIアナリスト」ライターチームです。 すぐに成果が出るサイト分析の方法をご紹介 Web担当者の方や、法人・個人でサイトを運営している方にとって、CVR（コンバージョン率）アップは常に目指している目標だと思います。 しかし、ただ闇雲にアクセス解析データを集計したり、サイトの更新を日々行っていても、そう簡単にサイトのCVRは上がりません。成果を出すためには、CV数アップに直結する課題を見つけるためのサイト分析方法を身に着ける必要があるのです。 この記事では、そんなCVRアップを目指しているWeb担当者やサイト運営者の方向けに、すぐに成果が出るサイト分析の方法をご紹介したいと思います。 ツールはGoogleアナリティクスとAIアナリストを使う Googleアナリティクス これからご紹介するサイト分析方法は、基本的にはアクセス解析ツールのGoogleアナリティクスさえあれば実行するこ

TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人

リスティング広告の運用担当者だったら遅かれ早かれ誰もがたどり着くといわれている、今や定番の広告メニュー。 和食なら鯖の味噌煮、中華なら回鍋肉あたりの位置づけ（当社調べ）、それがリマーケティング広告です。 今回は、そんなリマーケティングをこれから始めたいと思っている人、あるいは始めようか悩んでいる人に、知っておいてほしい2つのポイントをご紹介します。 ※なお「リマーケティング」とはGoogleの機能名です。Yahooの場合は「サイトリターゲティング」と呼びますが、ここでは「リマーケティング」に統一しています。 そもそもリマーケティング広告って？リマーケティング広告とは「あなたのサイトを訪問したけれど、何らかの理由と経緯で去ってしまった人を追いかけていく広告」です。そこからもう一度来訪してもらい、コンバージョンにつなげるのです。マーケティング執念による産物といえましょう。 それだけに、あなたが

「今は昔」 この業界は本当にサイクルが早い。 あんなに、「おお。なんだこれ、超便利ではないですか？」と言っていたものもすぐに「古く」なってしまう。 「compass」もその一つではないでしょうか。 いや、全然便利で使いたいのですが、何しろ 「コンパイルがクソ遅い。」 compassはご存知の通り、「Ruby」で作られています。 が故に、ちょっとSCSSの編集したいだけなのに、コンパイルにとても時間がかかってしまいます。orz と、言う訳で「compass」はもう卒業しました。 卒業するのはいいのですが、代替えは何を利用するかと言いますと、「Libsass」ですね。 「Libsass」とはなんぞや。て方に。 C/C++で書かれたSass Compilerとなります。 当たり前で恐縮なのですが、C/C++で書かれているのでコンパイルの速度は、ビックリするぐらい「爆速」です！ Github ht