はてなブックマーク

みなさんローカル環境での開発時は必要に応じて「自己署名入り証明書」（通称：オレオレ証明書）を作成していると思います。 ほとんどは主にopensslなどを使って作成していたりすると思いますが、オプションが複雑で毎回ググったり、そもそもopensslのバージョンの問題などでコマンドがコケることもしばしばあるのではないでしょうか。僕だけですかね（苦笑） 日頃からサーバーサイドのことをやっているわけではないので結構ストレスを感じながらやっていましたが、今回ServiceWorkerをいろいろ検証（「Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる」、「ServiceWorkerのキャッシュ戦略を考える」を参照）するにあたって調べたところmkcertというツールを発見。使ってみてものすごく簡単だったのでオススメしたいと思います。 github インストール

HivelocityでフロントエンドエンジニアをしているHaradaです。 フロントエンド界隈では、シングルページアプリケーション（SPA）が盛り上がりを見せており、CMS構築においてもAPIファーストな考え方が主流となってきています。 そんななかコンテンツを管理するバックエンド側だけを提供する“Headless CMS”と呼ばれるツールがいろいろと出てきています。 今回は個人的に気になっていたstrapiを使って簡単なCMS機能を作ってみたいと思います。 正直、strapiについてすでに詳しく説明し尽くされた記事が多く出回っていると思います。 本記事は超初心者がやってみてつまづいた箇所などが追えるようになってはいると思いますが、すでにstrapiを使い倒している方は読み飛ばしていただければと思います。 strapiのセットアップ インストール https://strapi.io/ 早速、

こんにちは。HivelocityでBaseStationというサービスの開発を担当しています、Haradaです。 今回はWEBサイトのパフォーマンスを測るひとつの指標となりえるPageSpeed Insightsのスコア最適化にあたって、主にフロントエンドで行った具体的施策についてお話をしたいと思います。 リニューアルしたPageSpeed Insightsでスコアが激減した 弊社のプロダクトはPageSpeed Insights（以下PSI）でのスコアを意識していますが、2018年11月にPSIの仕様変更があり、スコアが激減しました。 PSIアップデート後の弊社サイトの点数がこちら（今回のスクショを撮るためだけにProduction環境をスイッチバックするのは無理でしたので、Staging環境のスコアになりますがほぼ差分はありませんのでご了承ください） どうやらGoogleがかねてより提

マーケティングにおいて、ブランドとは企業のイメージを消費者に伝える重要な手段の1つです。中でもロゴデザインは、企業のイメージを視覚的に印象づけ、消費者にわかりやすく示す効果的な手段です。今回は、ブランドのロゴについてご紹介します。 「ブランド」とは ブランドは、企業の製品やサービスを消費者に印象づけ、他社と区別するものです。また、そのイメージを文字や図形、記号で表したものをロゴとして扱うことで、よりブランドイメージを消費者へ伝えやすくします。現在は、「ブランディング」といった企業戦略の1つとして、多くの企業が取り入れています。 「ブランディング」によって、以下のような効果を得ることができます。 強力な差別化：ブランド名やロゴにより、自社のイメージ強化や他社と区別することができる。 選択の意思決定の単純化：顧客にブランドを知ってもらうことで、再び同ブランドを選ぶようになる。 ユーザーの顧客化

皆さん、こんにちは。 webディレクターのカベです。 今回はGoogleのペナルティなどで順位が下がらないように、普段の確認の方法や対策をご紹介したいと思います。 Search Console まず言わずと知れた、Googleから無料提供されている管理ツールです。（元Web Master Tool） Search Consoleでは検索アナリティクスの機能だけでなく、Google先生に 「僕はここにいるよ～」 「ロボットさん、ここは見なくていいよ～」 などの設定ができるようになっています。 このSearch Consoleで、自身のWEBサイトの状況を確認することが大切です。 その中でも今回は Google インデックス クロール の箇所を見ていきましょう。 Search Console「Google インデックス」 上の図で左メニューにある「Google インデックス」の中には インデッ

巷を騒がせているリファラースパム。サイトの数字が狂ったり、ウィルスに感染することもあったり。 ハイベロシティのビューにはリファラースパムのフィルターをかけているのですが、それでも日夜新しいスパムが出てくるので、いたちごっこの様相を呈しています。 （リファラースパムの一例、アクセスしないでくださいね） ひとつひとつの訪問数は微々たるものなのですが、総数たるや、塵も積もれば山となる形式でそこそこの数になります。 フィルターをかけていない例を見ると、影響がよく分かります。これは私が持っているブログのひとつで、フィルターを入れていません。 （free-social-buttons、多すぎる…） リファラートラフィックは全セッションで99なのですが、その全てがリファラースパムで占められていました。そもそものトラフィックが少ないとは言っても、データの汚染力は非常に高いと言えます。 私が持っているブログ

イラストレーターで色を塗るとき、ツールバーの「塗り」を選ぶと「カラーピッカー」が出てくるので、普段の色選びに「カラーピッカー」を使っているの方が多いと思います。でも、グラデーションで色を選ぶとなると、「カラーピッカー」が使えなくて正直ちょっと困る……なんてことはありませんか？ 実はグラデーションの色選びに「カラーピッカー」が使えるようになる方法があるんです！　今回は、その方法をご紹介します。 Illustrator 〜グラデーション時の色選び〜 グラデーションの色を選ぶとき、予め「スウォッチ」に登録した色か、「カラースライダー」から色を選ぶことができますが、このカラースライダーでの色の設定が難しい…。 通常色を塗るときにツールバーの「塗り」から色を選択すると、「カラーピッカー」で選ぶことができるので、グラデーションの「カラースライダー」では、自分の思う色を選択しにくく感じます。 「カラーピ

前回は、GIFで動くインフォグラフィックをいくつかご紹介しましたが、ご覧いただけましたでしょうか？ インフォグラフィック 〜GIFで動くインフォグラフィックを作ってみた〜 静止画の多いインフォグラフィックですが、GIFを取り入れて動きのあるインフォグラフィックも面白いですよね。今回は、前回作成したGIFインフォグラフィックを例に「GIFアニメーションインフォグラフィックの作り方」をご紹介していきます。 GIFアニメーションの作り方を覚えてGIFインフォグラフィックを作ってみよう！ 前回の「インフォグラフィック 〜GIFで動くインフォグラフィックを作ってみた〜」では、Photoshopのフレームアニメーション機能を使って、目玉焼きの作り方を例に簡単な内容で、GIFインフォグラフィックを作成しました。 今回は、Photoshopのフレームアニメーション機能を使った作り方をご紹介します。 インフ

サイトやブログ等のオウンドメディアを通じて、プレスリリースやニュース以外の情報を発信する企業が増えてきました。多くの場合、そこで公開した情報をFacebookやTwitterへ投稿し、フォロワーへ更新情報を伝えるまでが一連の公開作業です。 その上で必要になってくるのが、パフォーマンスや改善施策を考えるために必要な、サイトとブログの分析。これはGoogle Analyticsを使えば簡単にできます。 しかし、ソーシャルメディアに投稿したものに対し、どのような反応があったかどうかは、Google Analyicsだけで把握することはできません。そこで役立つのがFacebookインサイトであり、Twitter Analyticsなのですが、オウンドメディアに関わる項目をどう見ればよいのか分からないというご相談を時々受けます。 今回は、オウンドメディアの分析・改善に必要なFacebookインサイト

皆さんはOTTという言葉をご存知でしょうか？ OTTとはIT用語の一つで、「Over The Top」の略称です。インターネット回線を通じて、メッセージや音声、動画コンテンツなどを提供する、通信事業者以外の企業のことを、OTTと呼びます。 特にモバイル回線を提供している通信事業者は、これまでインターネット回線＋独自のアプリケーションを提供していました。i-Modeを想像すると、分かりやすいと思います。通信事業者が提供しているので、通信料を請求するときに、サービス利用料を乗せられたため、利用者は決済を特に気にすることなく利用していました。 しかし、今ではスマートフォンが普及し始め、i-Modeのようなサービス展開がし辛くなっています。一方で、FacebookやTwitter、LINEやYouTubeなどのOTTサービスは、インターネットに接続できれば利用できます。通信速度は高速化し、決済方法

自サイトのサイト構造や内部リンク、ソースコードの部分を改善することを内部施策（オンページSEO）と呼び、自サイトに外部から働きかけてくる要素を改善することを外部施策（オフページSEO）と呼びます。 オンページSEOは、以前作成したチェックシートや、なんとなく要素を見てみるとわかりやすいかと思います。 しかし、オフページSEOと言ってもなかなかピンときませんよね。 オフページSEOの基本を一言で表すと、サイトに対する読者の反応を獲得することです。たとえば、マーケットデータを提供しているページは、多くの読者が引用・参考にします。検索エンジンはこのページを「多くの人が参考にする良質なページ」だと判断し、評価を高めるのです。 一方でGoogleは、読者の反応によらないオフページSEOの規制を強めています。代表的なものに、有料の外部リンクの購入が挙げられます。こうした施策はペンギンアップデートなどの

Google Analyticsの [ユーザー] タブにコホート分析が追加されました。 この機能はベータ版で、ハイベロシティのサイトのプロパティには無く、他のプロパティにあったものなので、今のところ全プロパティで利用できるわけではないようです。 [追記 2月6日 21:30]：先ほどGoogle Analyticsを確認したところ、ハイベロシティのプロパティにもコホート分析が追加されていました。徐々に利用できるプロパティが増えているようです。 コホート分析とは？ そもそも、コホート分析とは何なのでしょうか？ 簡単に言えば、特定の条件に当てはまるユーザーグループが、時間経過によってどのような行動取ったかを分析方法です。行った施策がサービスに与えた影響を視覚化するのでわかりやすく、改善に活かせます。 実はGoogle Analyticsでは、タブに追加される前でもセグメント機能を使い、csvフ

自サイトの運用と一口に言ってもコンテンツ作成、SEO、分析・改善など、いくつものフローがあります。これらのフローは、どのように解決すべきなのでしょうか？ すでに自サイトの運用を行う先駆者の手法から知見を得るというのも、立派な解決策のひとつです。幸いなことにブログやSlideShareには、ノウハウが数多く公開されています。 今回はSlideShareにアップロードされているスライドの中から、自社サイトの運用を始めるにあたってわかりやすいものを厳選して7個ご紹介します。 オウンドメディアによるコンテンツマーケティング戦略 B2Cにおけるオウンドメディア戦略のスライドです。ブランドが消費者と繋がる方法として注目されていますが、実際にはどのような運用が必要なのでしょうか？　このスライドではオウンドメディアを運用する目的、発信するコンテンツのコンセプト、中長期的に運用する上での戦略が重要だとしてい

みなさんは、普段何時にブログを公開していますか？ 完成した直後、少し寝かせてから、一番訪問者が多くなる時間、さまざまだと思います。でも、その公開時間は本当に正しいのでしょうか？ 購読者が多いブログになれば、何時に公開しても人が来てくれます。逆に、購読者が少ない場合は、タイミングを計らなければ人は来てくれません。 また、ブログは公開して終わりではありません。公開したあと、ソーシャルメディアに投稿します。ソーシャルメディアのフォロワーがいる時間に投稿しなければ、見られる可能性が低くなります。 今回は公開、投稿に最適な時間を探っていきましょう。 Google Analytics 最初にウェブ解析ツールの基本、Google Analyticsを使って自分のウェブサイトがよく見られるのはいつか把握します。 カスタムレポートの作成 Google Analyticsでカスタムレポートを作成します。 同じ

前回はGitをマシンにインストールしてみましたが、今回から実際に使いつつ、利用時に登場する用語なども解説していきます。 まず、Gitの構成がどうなっているのか、再度おさらいです。本シリーズの第1回目で“バージョン管理システム”について説明した際に簡単に触れましたが、リポジトリという場所でファイルを管理していきます。 リポジトリには、「ローカルリポジトリ」と「リモートリポジトリ」の2種類がありました。 ローカルリポジトリ＝自分のマシン内にあるリポジトリ リモートリポジトリ＝サーバなどネットワーク上にあるリポジトリ プロジェクトを他の人と共有する場合は、リモートリポジトリが必要になってきますが、自分だけでファイル管理を行うのであれば、まずはローカルリポジトリだけでも十分だと思います。 ローカルリポジトリの仕組みについて 実際にGitでファイル管理をしていく前に、リポジトリ内でデータがどのように

写真を編集するときに、人物を切り抜くことありますよね。そんなとき、よく髪の毛がフサァっとしているのを見つけると、絶望を感じます…。しかし、そんな絶望もPhotoshopにかかれば希望に変わります。CS5以上に搭載されている「境界線の調整」を使えば、なんとも簡単に切り抜きができるのです！ わたしだって簡単に髪の毛を切り抜きたい！ 「本当に簡単に切り抜きができるの？」と思う方もいるかもしれません。これから簡単なことを実演していきます。 今回使用するのは、この画像です。髪の毛の切り抜きを練習するには、十分なくらいファサファサしていますね！ Photo by djandy.com / CC BY-SA 背景には、この夕焼けの空の画像を使います。切り抜く画像と合わせたら、雰囲気が出そうですね。 Photo: Amanzingwe skies by Derek Keats まずは、切り抜きたい部分を大

文章を打っていたり、なにかデザインをしているときに、どのフォントを使おうか迷ったことはありませんか？しかし、プルダウンの中からいちいちフォントを選択して、1つ1つ見ていくのは大変です。今回は、自分のPCにインストールされているフォントを見比べられる「wordmark.it」をご紹介します！ 「wordmark.it」とは 「wordmark.it」は、自分のPCにインストールされているフォントを読み込んで、ブラウザで表示してくれます。画面上にフォントが表示されるので、スクロールしていくだけでフォントを見比べることができます。「wordmark.it」のページでは、文章などが英語表記になっていますが、使い方は難しくないので、気軽に使うことができます。ページ上部の”infomation”では、簡単な機能の説明が載っています。 「wordmark.it」を使ってみた 「wordmark.it」を

そもそも、バイヤーペルソナとは何なのでしょうか？　簡単に言えば、あなたの製品やサービスを購入して欲しい人の理想像です。この理想像をターゲットとして、マーケティングを行います。 既にマーケティングを行っている方は、性別や年齢といった人口統計的なデータを分析し、理想像を作り上げているはずです。しかし、この理想像は輪郭こそ見えていますが、細かなディティールがわからないという欠点があります。大多数に向けてマーケティングを行うならこの理想像だけでも行えました。しかし、大多数に向けてマーケティングを行うと、どうしても無関係の人まで巻き込んでしまうため、質の高い見込み顧客はごく一部になり、費用対効果は悪くなってしまいます。つまり、質の高い見込み顧客を獲得するためには、より細かいディティールまで作りこむ必要があるのです。 細かなディティールとは、例えばその人はどんな部署にいて、抱えている問題は何か、そして