デジタルマーケティングで広告をおこなう際、ターゲット選定が大切になります。 広告にはリスティング広告のようなキーワードで決めるものや、リマーケティング広告のような過去の来訪者に広告を配信する方法もありますが、ユーザの属性などを元にしたターゲティング手法が重要になってきています。 例えば、「自社のサービスは30歳前後が多いからウェブサイトアクセスはその前後が多い」と考えても実際に来ている層は異なることはよくあります。 狙いたいターゲットと実際来ている層の「ギャップ」や、競合サイトの訪問者層を知ることはコンテンツ戦略や広告戦略を考える上で参考になります。 そこで実際に来ている層を知る方法と活用法をご紹介します。 １．Googleアナリティクス　※設定忘れに注意 「とりあえずGoogleアナリティクスを設定している」という企業は意外に多いです。 そしてそういう使い方は非常にもったいない。 最初の

CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ

Illustratorで地図などを作成するとき、路線の角度に合わせてテキストを配置することは少なくありません。一般的には、セグメントの角度を計測して同じだけ回転したり、パス上文字をぴったり重ねたりしますが、セグメントの角度が変わるたびに文字の角度も調整しなければならず、なかなか面倒です。そこで、これらの工程を自動化するスクリプトを作りました。文字の傾きをリセットして、垂直／水平に戻すおまけ機能も搭載しています。ぜひ使ってみてください。 更新履歴GitHubのリポジトリをご覧ください対応バージョンIllustrator CS5 〜 CC 2018（一部バージョンは未検証）ダウンロードスクリプトをダウンロードするインストール方法ダウンロードしたファイルを解凍します。所定の場所（後述）に「文字の角度をセグメントに合わせる.jsx」をコピーします。Windows版ではお使いのIllustrato

ブラウザ拡張Selenium IDEで ユーザー操作を記録・再現できる！ UIテストの自動化に活用しよう Selenium IDE（セレニウム・アイディーイー）とは、ブラウザ操作を記録・再現できるChrome、Firefoxで利用可能な拡張機能（アドオン）です。 手軽に記録・再現ができるため、アイデア次第で色々な使い方ができます。筆者は、会社の打刻操作（社内サイトへアクセス → ログイン → 打刻ページへ遷移 → 打刻ボタンをクリック）を記録し、自動実行することでいち早く出社ができるようにしていました。 その他にも開発時に繰り返し行うようなデバッグ作業やルーティーン作業を記録することで、以下のような活用もできます。 入力フォームなどに文字を入力する操作を記録しておき、自動入力させる。 ゲームやSPAのデバッグ時に、スタート画面からデバッグしたい画面までの移動操作を記録しておき、任意の画面へ

どうも、まさとらん（@0310lan）です。 今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います！ 特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。 【 BeautifyConverter 】 「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。 登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう！ ■基本的な使い方！ 「BeautifyConverter」の基本的な使い方を実際に試しながら、どのよう

疑惑どころか 99.99% くらい黒な話。 （後記：セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい） 追記：続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様（？）の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様（？）。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog

「また新しいブラウザー？ もういいよ。」いえいえ、Bliskはちょっと違います。Web開発者向けに便利な機能を搭載した、開発者専用のブラウザーなんです。 日々のWeb開発にどんなブラウザーを使っていますか？　私がTwitter上で先日実施した投票の結果によると、開発者の4分の3は一般的なWebブラウザーを使っています。おそらく以下のような理由が想像できます。 1番よく使うアプリケーションである すでに自分が使いやすいように調整できている 優れた開発ツールが入っている（どれもそうですよね！） それらのユーティリティが快適である そもそも、好みのブラウザーである しかし、そのブラウザーはWeb開発作業に向いているのでしょうか？ 私もそうですが、いつもブラウザーにさまざまなアプリやツール、あとで読もうと思っている記事（……でもほとんど読みませんけどね！）のタブを57個くらい開いているのでは？　こ

DuoTone Themes DuoTone Dark -GitHub コードがはっきりと見やすいカラー DuoTone Themesの5つのテーマ DuoTone Themesのダウンロードとインストール コードがはっきりと見やすいカラー DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。 コードで重要な部分には強調したカラー、それほど重要ではない部分には和らいだカラーが適用され、はっきりとした見やすいテーマになっています。 DuoToneは5種類あり、Darkのベースカラーはパープルとゴールドです。 ↓縮小してますが、見やすくないですか？ Colorscheme DuoTones - Dark 対応言語は下記の通り。これからも増えていくそうです。 C Clojure CoffeeScript C# CSS GF Markdown Go Haskell

Gmailにちょっとした設定をすると、Gmailでありながら、ISPや企業など「～@gmail.com」以外のメールアドレスを差出人としたメールを送信できるようになる。その具体的な方法は？ 連載目次 前回は、Gmailで受信メールを集約・一元管理するために、ISPや企業などのメールアドレスに届くメールをGmailのメールボックスに転送する方法を説明した。これで複数のメーラーやWebメールを巡回することなく、Gmailだけで各メールアドレス宛てに届くメールを閲覧できるようになった。 しかし、このままではメールを送信する際には、やはり各メールアドレスにひも付いているメーラーやWebメールを利用する必要がある。例えば、「～@gmail.com」以外のメールアドレス宛て（仮に「～@example.jp」とする）に届いたメールに対して、Gmailから返信しようとすると、差出人（From:フィールド）

はい、これをどうぞ。 ブログのアイキャッチ画像やホームページのバナー画像を作るぐらいなら、これでじゅうぶん。 canvaというサービスです。ブラウザから無料で使えて、操作も簡単。デザインを良くするフリー素材も付いてきます。 無料でcanvaを使ってみる 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @websae2012 ちなみに本記事の画像もすべてCanvaを使って作成しました （gifアニメ以外） 作り方はこんな感じ。canvaを使えばこうもスピーディーに素敵な画像を作成できます。 だれでも、すぐにマスターできそうなくらい操作は簡単なのですが、親切にもチュートリアルを用意してくれて

import.ioとは import.ioは、データ化したいページのURLを入力するだけで、自動でデータ箇所を判断して情報を集めてくれるスクレイピングサービスです。 無料で利用することができ、セットアップも、データ収集用のトレーニングなども必要ありません。 URLを入力して、ボタンを押すだけという簡単さから、誰にでも利用できるデータ収集ツールだと思います。 以下では、その簡単な使い方や、利用例などを紹介したいと思います。 定期的なサイトへのスクレイピングは相手サイトの負荷になるので、一日に何度も何度も同一サイトに使用するのはやめましょう。加えて、取得したデータを、そのまま何かに利用すると著作権違反になる恐れもあります。 基本的な使い方import.ioの最大の特徴は、使い方の簡単さです。 以下では、その使い方の例として、IKEAのソファー検索結果ページのデータを取得してみたいと思います。

これまでに、(主に)Amazon Redshiftで活用出来るGUIツールとして『Intellij IDEA Ultimate Edition』や『Aginity』等を紹介して来ましたが、Intellij IDEAを開発しているJetBrain社から別種のDB関連ツールが開発されているという情報を先日知りました。 Amazon RedshiftのMac OS X向けGUIツールとして『Intellij IDEA Ultimate Edition』のDatabase Toolsを使う ｜ Developers.IO Redshift専用 Windows GUIツール『Aginity Workbench for Amazon Redshift』が便利かもしれない件 ｜ Developers.IO それがこの『0xDBE』と呼ばれるものになります。アナウンス自体は1年以上前からなされていた様で、

で、図説ドローツールとしては、CacooやGliffyを紹介しました。 けれども、「draw.io」というのを使ってみたら、完全に無料で利用できるうえに、日本語にも対応、さらには機能も豊富という何拍子も揃った素晴らしいドローツールだったので紹介です。 photo by David Goehring draw.ioとは draw.ioは、WEB上で無料で使えるフローチャート作成ツールです。 インストールなどは必要なく、ブラウザからログインも不要で手軽に利用することができます。 通常、こういったドローツールは、「作業シート何枚まで無料であとは有料」などというサービスも多いのですが、draw.ioは完全無料で利用することができます。 やれることが豊富このツールを利用するだけで、以下のような図を手軽に作成することができます。 チャートなんかも。 こんな回路図なんかも。 もちろんこんなフローも。 関

こんにちは。mackyです。 今日は、安心の品質をお届けするために使える賢いちょっとしたツールたちを紹介して、私はGW気分に突入しようと思います。GWは実はまだ予定がない…家に引きこもってサイトでも作ってみようかな…ちくしょー！というそこの君。是非、使ってみてほしい。 ちなみに、今日ご紹介するツールは主にAlt、Title、META情報、リンクに関するもので、Chromeの拡張機能になります。 Popup Image Alt Attribute 一番シンプルなチェックツール。チェックしたい画像にカーソルを載せるだけで、フワりとAltが表示されます。はい。そんなに、画像数が多くない場合はこれでいいかもしれません。ただ、超急いでるときはそのフワり感にイラっとしてしまうかも。 Alt & Meta viewer フワらなくていいからスパッと出してくれ。という方や、画像数の多いECサイトなどにはこ

先日、Nibbler（ニブラー）という、SEOとWEBマーケティング分析サービスを見つけました。 これを使ってみたら、無料ながら、かなり詳細にサイト分析（改善点の可視化）が行える素晴らしいツールだったので紹介です。 Nibblerとは Nibbler – Test any website Nibblerとは、フリーのウェブサイトテストツールです。 アドレスを入力するだけで、アクセシビリティ、SEO、ソーシャルメディアテクノロジーなどの観点から、ウェブサイトをクロールして、レポートを出してくれます。 加えて、適切な改善提案を示してくれるので、提案に従ってサイトを修正すれば、かなり良いサイトに仕上がるのではないかと思います。 Nibblerを英和辞典で調べてみると、「少しずつかじる（小動物）」、「打抜き切断工具」などという意味があります。サイトを細かく分析するツールという意味もあるのだと思いま

Responsive InspectorはレスポンシブWebデザインのサイトチェックをするのに役立つGoogle Chrome拡張機能です。これを使うことでブレイクポイントの確認やCSS内でメディアクエリが使われている箇所を確認することができます。 [ads_center] Responsive Inspectorの使い方 使い方は、まず以下のページからResponsive InspectorをChromeにインストールします。 Responsive Inspector – Chrome ウェブストア インストールすると画面右上に赤いアイコンが表示されるので、チェックしたいWebサイトを開いた状態でこのアイコンをクリックします。 すると、こんな感じでブレイクポイントの一覧をチェックすることができます。 ちなみに青色で表示されるのはmin-widthが使われている時。逆にmax-widthだ

似たようなツールはよくあるが、ドメイン名が覚えやすかったのと機能が豊富なのでご紹介。 JS Prettyでは、JavaScriptのソースを綺麗にしてくれるツールを提供している。 使い方は簡単で、綺麗にしたいソースを貼り付けるだけだ。 オプションも豊富で、インデントを何桁にするかとか、配列で桁を揃えるだとか、チェーンメソッドで改行するか、とかのマニアックな設定が可能だ。 よくJavaScriptをいじる人だったら知っておいても損はないかもですな。

WordPressのテーマを変更するときに、テーマ内に設定していない文字列が存在している場合があります。 こういう場合は、「wp-content/languages」にある、ja.poというファイルと、ja.moというファイルを変更する必要があります。 ただ、このファイルを変更するためには通常のテキストエディタ等で変更を行う事ができません。 変更を行うためには、poeditという専用のソフトをインストールして修正を行う必要があります。 poeditのインストールとja.poファイルの修正 まずは編集するためのソフトをお使いのパソコンにインストールします。 poedit Mac版とWindows版がありますが、使っている環境でダウンロードするファイルが自動的に選ばれますので、そのままダウンロードしましょう。 ダウンロード後は、手順にそってインストールすれば大丈夫です。 その後、サーバー上から