[レベル: 中級] ユニバーサル アナリティクスのサポートを2023 年 7 月 1 日をもって終了することを Google は公式ブログでアナウンスしました。 アナリティクスのヘルプ記事でも通達が出ています。 ユニバーサル アナリティクスのサポート終了にともない、Google アナリティクス 4 (GA4) への早期の移行を促しています。 今後の流れ ユニバーサル アナリティクスのサポート終了の流れは、大まかに次のとおりです。 2023 年 7 月 1 日までは、ユニバーサル アナリティクス プロパティで引き続き、新しいデータの使用および収集が可能 2023 年 7 月 1 日以降は、ユニバーサル アナリティクス プロパティでのデータ収集が停止 2023 年 7 月 1 日よりも前にユニバーサル アナリティクス プロパティで処理されたデータには少なくとも 6 か月間はアクセス可能 UA

画像最適化に必要なサービスとツール まずは、Webブラウザ上で画像圧縮ができるサイトが色々あるなかで、コレ！ というサービス2つと、Macで使えるフリーソフトを紹介します。 Squoosh（Google） Squoosh JPG, PNG, WebPに変換が可能で、一枚一枚の画質を確認、調整しながら丁寧に変換できます。さらに画質やフィルタを設定する Edit という小窓の右上、[ >_ ]　こんな感じのアイコンをクリックすると、設定した内容のCLIコマンドをコピーできます。 そのため、設定が決まったらコードをコピーしてコマンドラインで一気に変換なんてことも可能になります。素晴らしい。 「Commandとかは無理、だけど数十枚〜一括で変換したい」という方にとっては、一枚ずつしか変換できないというのは厳しいですよね。その場合はもう一つのサービスが使えます 以上、コマンドを叩くか、上記2サービス

こんにちは、ペンギン男です🐧 珍しく受け身でなく、主体的に不明な点の解明に乗り出した今回。しかし、それにしてもGoogleはそういったニーズにも応えられるように、きちんと情報発信を怠らないものですね💦 このトピックに関する、前回の記事↓ ———————————————————————— 【目次】 おさらい 構造化データテストツール 構造化データのメンテナンス サーチコンソール上で「このサイトでは構造化データが見つかりません」と表示される場合の、アルアル 最後に ———————————————————————— おさらい 構造化データとは 検索エンジン理解促進対策 リッチスニペットの充実にもつながる ウェブページ上、どういう構造のコンテンツになっているかをより明確に表示させる機能 「構造」「マークアップ」というくらいなので、「HTML」を意識したもの なので、求人情報などのコンテンツには

スマートフォン（スマホ）が広く普及し、昨今では多くのWebサイトが、画面の狭いスマホに最適化した専用のビュー（表示）を備えるようになってきました。 サイトがスマホでどう見えるのかは、もちろん実際にスマホで表示してみるのが確実です。ただ、スマホやタブレットにはさまざまな機種があり、画面の解像度も異なるため、どう見えるかを全て実機でテストするのは困難です。 このような場合は、デスクトップ版Webブラウザの「スマホ表示」機能（スマートフォンのWebブラウザのエミュレーション）を利用すると、PCで簡単にスマホサイトの確認ができます。操作方法もそれほど難しくありません。 本記事では、Windows OS／macOSのデスクトップ版Google Chrome（以下、Chromeと略）の「デベロッパーツール（開発者ツール）」でスマホ表示を確認する方法を紹介します。このツールは名前に「デベロッパー（開発者

プロジェクトを作成する続いて、プロジェクトを作成します。 プロジェクトとは？プロジェクトとは、Googleが提供する様々なAPIを使った様々なアプリケーションの1つのまとまりです。ウェブサイトのことをイメージすると分かりやすいかもしれません。例えば、私の場合は「Syncer」というプロジェクトを作って、そのプロジェクトの中で、Google Analytics APIやGoogle Maps APIを利用するわけです。…ピンと来ない場合も、作業だと思って進みましょう。 作成の流れ「プロジェクト」をクリックするそれでは、早速、プロジェクトを作成してみましょう。左上部分にある「プロジェクトを作成」というボタンをクリックして下さい。 プロジェクト名を入力するプロジェクトの作成はとても簡単で、ただ、半角英数字と一部記号で名前を決めるだけです。「プロジェクト名」の項目に好きな名前を入力して下さい。通常

最新版のWebブラウザー「Internet Explorer 11」（以下、IE）は、2013年10月に正式リリースされ、その後のアップデートでも機能が少しずつ強化されてきた。例えば、2014年4月のWindows 8.1 Update 1提供と同時に機能が強化され、2014年8月のアップデート（August Update）でもさらに更新されている*1。 *1　以前のIEでは、IE5／IE6／IE7のようなメジャー・バージョンアップのタイミングで新機能が搭載されていたが、現在のIEでは他のマイクロソフト製品と同じく、1年の間に何度もアップデートが行われるようになっている。 そのIEにも、Chromeのデベロッパー・ツールと同様に、Web制作者向けのツール「F12開発者ツール」が標準搭載されており、そのツールもIE10以前からIE11のアップデートで大幅に変更されている。そこで本稿では、強化

Operaから「これがもし未来のブラウザだとしたら？」をコンセプトに設計された新ブラウザが「Opera Neon」です。新UIとUXを搭載して新感覚を実現したというブラウザは、確かに従来のブラウザとはひと味違う感覚の使い心地となっていました。 Opera Neon – The future of web browsers? | Opera http://www.opera.com/ja/computer/neon Opera Neonを開いた画面はこんな感じ。Operaユーザーにはすでにおなじみの「スピードダイヤル」が表示されているのですが、各アイコンがウインドウの中に漂うようなイメージでレイアウトされています。また、表示されるアイコンは実際にブラウザを使い込むことで自分に応じた内容に変化するとのこと。ちなみに、Opera Neonの壁紙はデスクトップで使っている画像がそのまま使われていま

公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化したJavaScriptのコードに、インデントや改行を付けて、分析したり確認しやすく整形するツールです。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。

制作実績300以上。インフォグラフィック、データビジュアライゼーションの制作に特化したサービスです。わかりやすく情報を伝えるためのデザインを提供します。

Schedule a demoExplore team solutions and boost business efficiency.

作成：2012/10/29 更新：2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか？そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の２つご覧ください。（※ 2015/06/25 2015/06/28追記） Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました

作成：2014/12/22 Web制作 > 2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ CSS ツール １．CSS スニペット ２．CSSアニメーションサンプル ３．背景を様々な形に切り抜く ジェネレーター ４．SCSS/CSSに変換するツール ５．CSS フレームワークとチートシート ６．CSS3 アイコン ７．CSS / JS / HTML コード整形 ８．レスポンシブ モックアップ作成 ９．ブラウザ対応表 SVG / ロングシャドー / ポリゴン作成 １０．SVG ブラウザサポート状況確認表 １１．SVG ローディングアニメ作成 １２．SVG 背景作成ジェネレーター １３．SVG パターン背景

私はTwitterでよくSVG関連情報をチェックしているのですが、 SVGってどう作ったらいいの？ みたいな投稿をしばしば見かけます。 SVGは地味な存在ですが近年は徐々に注目を浴び、関連ツールも増えてきたのでそうした人向けにSVG制作ツールって結構たくさんあるよ！と、まとめてみた次第です。 でも114個って多過ぎ！ ……って思うかもしれない、いや正直オレもそう思う。 なので最後に114個の中から管理人のお薦めツール10選っていうのもまとめておいたので、さっくり読みたい人はそれだけチェックすれば良いかと。 そもそもSVGとは、なに？ そもそもSVGってなに？という人もいるでしょう、それについては以前記事にまとめました。 SVGとはなにか？とSVGの学習に役立つサイトや書籍の紹介 SVGの説明と、SVGの学習に役立つサイトや参考になる書籍の紹介をしています。 今回とりあげるSVG関連ツールと

WEB界隈でよく聞く言葉に「チートシート」というものがあるのですが、これは「cheat（チート） = 騙す、ズルする」という言葉から「ズルするシート」要するに「カンニングペーパー」のことを意味していて、これが転じてWEB界隈ではプログラミング言語やコマンドやショートカットなどを見やすく一覧にまとめてある表のことを指します。 ちなみにこの記事では少し趣向を変えて、WEB界隈で働く人が「これは便利かも」と重宝しそうな「マーケティング」と「SEO」に関するチートシートを集めてみました。 WEBマーケティング関連のチートシート3+2個 大きな意味での「WEBマーケティング」全般に重宝しそうなチートシートを集めてみました。 www.seojapan.com リスティング広告運用チートシート LPO改善チェックリスト チートシートではないけど「これはWEBマーケティングに重宝するかもなー」というチェッ

みなさん、こんにちは。hifive開発チームの横山です。第2回と第3回では、HTML5で実現可能な表現や機能について詳しく解説しました。これらを用いると、業務システムに従来のWebシステムでは実現できないレベルの高い操作性を持たせることができます。直観的に操作できるUIにより誤操作を防止しやすくなり、ユーザー教育のコストも減らせるのではないか---。そんな期待を持った人も多いのではないでしょうか。 しかしながら、そうしたリッチなUIを備えた業務システムの開発は、単純な画面遷移を繰り返すことで業務を進めていく従来型Webシステムと比べて、開発プロセスを適切に管理し、予定通りの工数で開発を進めることが難しくなりがちです。 そこで今回は、HTML5を使ってリッチなUIを提供する業務システムを開発する際に必要となる「成功させるために考慮すべき点」や「失敗しないための開発の進め方」「役に立つツールや

みなさん、こんにちは。hifiveエヴァンジェリストの中津川です。前回はHTML5で加わった新しい仕様や機能のうち、業務システムを開発するうえで役立つものを中心に取り上げました。今回はさらに掘り下げて、業務Webアプリケーション開発という観点からHTML5がどう活用できるのかを紹介します。 企業システム、とりわけ情報系システムにおいては、日々蓄積される大量の業務データに対して、仮説に基づき様々な観点から情報の抽出が行われています。HTML5を使えば、こうして抽出した情報を「チャート（グラフ）」や「グリッド」、「図形」などを用いて可視化することが比較的容易に実現できます。これら三つはデータ可視化における「三種の神器」と言えるものです。以下、それぞれ詳しく見ていきましょう。 1.チャート（グラフ） 業務で発生するデータを可視化する際には、「チャート（グラフ）」がよく使われます。棒グラフや円グラ

今までFiddlerをただのセッションの中身を確認できるLocal Proxyとしてしか見ていなかったのですが 改めて良く調べると色々できることが多すぎると判明。感動したので便利な機能をまとめてみました。 先に簡単に説明しておくと、FiddlerはMicrosoftが無料で配布しているWeb Debugging Proxyです。 Windows環境にインストールして、ブラウザとサーバの間の通信を読んだり操作したりできます。 配布サイトはこちら。 Fiddler Web Debugger – A free web debugging tool 動作環境は「Windows 2000 / XP / 2003 / Vista with Microsoft .NET Framework v2.0 or later」 今回使ったバージョンは、2009年9月10日時点で最新の安定版、2.2.4.6。 と

最近の愛用は Firefox を普段使っている時は、 HttpFox を使っています。 昔は Live HTTP Headers :: Add-ons for Firefox を使っていたのですが、けして見やすいというわけでは無かったのと、実際にボディの中身を見たいという時にパワー不足が否めません。 そこで、 HttpFox です。 HttpFox :: Add-ons for Firefox レスポンスコードを色分けしてくれたりするので、個人的には見やすいと思う。 たぶん、Firebug の接続タブでも同等のことができると思うのだけど、ウィンドウ領域の使い方とか、色分けの部分とかで HttpFox の方が好き。 こんな感じで閲覧できます。 リクエストパラメータ等も見やすく整形してくれるので助かります。 本題 本題は HttpFox ではなく、Fiddler についてです。 Fiddler

現地時間の2012年10月1日、日本時間では10月2日にGoogleから新たなWebサイト向けツール「Google Tag ManagerTM」が公開されました。 これはGoogleアナリティクスTMやコンバージョンタグなどといった「HTMLに差し込んで使用するコード」をHTMLから外部化して、一元管理するためのいわゆるタグマネジメントツールです。 今までのGoogleのツールと比較すると少々使い方などが特殊で、人によっては分かりづらく感じる方もいらっしゃるかと思いますのでざっくりとした紹介をしてみようと思います。 「HTMLに埋め込むコード」を一元管理するためのツール 具体的には、外部ツールが生成したコードをまとめる 実際に使ってみよう 使用準備（初期設定） Google Tag Managerコードの埋め込み 既存HTMLから埋め込んでいる他ツールのコードを切り出し 「タグ」と「ルール