サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
www.hivelocity.co.jp
先日Workboxを使ってServiceWorkerのキャッシュ機能を体感してみました(前回記事『Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる』を参照ください)が、手当たり次第にキャッシュしてしまうとキャッシュストレージを圧迫してしまったり、更新性の高いコンテンツが反映されなかったりとさまざまな問題に直面します。 自社プロダクトへの実装を考えるにあたり、キャッシュ戦略についてもう少し理解を深めて(考えて)みたいと思います。 Pre CacheとRuntime Cache Workboxを触った時に、ServiceWorkerでキャッシュを扱う際に大きな概念として“Pre Cache”と“Runtime Cache”の2つが登場しました。 これはキャッシュを生成するタイミングを管理する要素になります。 実装するときには、まず各ファイルがこのどち
HivelocityでフロントエンドエンジニアをしているHaradaです。 先日PWAのカンファレンスに参加する機会があったので、最近のPWA事情について知識をアップデートしておこうと前から気になっていたWorkboxを使ったデモを作成してみたので、その辺りを少しご紹介したいと思います。 せっかくなので、将来的に自社プロダクトへの実装も視野に入れて、今回はwebpackからWorkboxを使用する構成でトライしてみました。 Workboxとは 普段開発に従事していない人でも、トレンドとしてPWA(Progressive Web Apps)という言葉は聞いたことがあると思います。 端的に言うと、Webサイトでスマホアプリのような機能や動作を実現するための仕組みです。 一般的にPWAの利点として主に以下のようなものが挙げられています。 ホーム画面へのアイコン追加プッシュ通知オフラインでも動作す
みなさんローカル環境での開発時は必要に応じて「自己署名入り証明書」(通称:オレオレ証明書)を作成していると思います。 ほとんどは主に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がかねてより提
6月19日より、TwitterでGIF画像が投稿できるようになりました!今回は、GIFアニメーションの作り方をご紹介します! GIFアニメの作り方 まず、GIFアニメーションを作るには2つの方法があります。 画像を繋げてGIFアニメーションにする。 動画の一部をGIFアニメーションにする。 載せたいGIFアニメーションの用途に合わせて、制作方法を選択しましょう。でも、「GIFアニメーションって作るの難しいんじゃ…」と思ってしまうかもしれませんが、簡単に作れるサイトやフリーソフトがあるのでご紹介します! GIFアニメ(アニメーション)作成 – バナー工房 「GIFアニメ(アニメーション)作成 – バナー工房」では、画像を繋げることでGIFアニメーションを作成することができます。 動かしたい画像ファイルを順番に選択 GIFアニメーションがどれくらいの速さで動いてほしいのか秒数を選択 ループして
皆さんはOTTという言葉をご存知でしょうか? OTTとはIT用語の一つで、「Over The Top」の略称です。インターネット回線を通じて、メッセージや音声、動画コンテンツなどを提供する、通信事業者以外の企業のことを、OTTと呼びます。 特にモバイル回線を提供している通信事業者は、これまでインターネット回線+独自のアプリケーションを提供していました。i-Modeを想像すると、分かりやすいと思います。通信事業者が提供しているので、通信料を請求するときに、サービス利用料を乗せられたため、利用者は決済を特に気にすることなく利用していました。 しかし、今ではスマートフォンが普及し始め、i-Modeのようなサービス展開がし辛くなっています。一方で、FacebookやTwitter、LINEやYouTubeなどのOTTサービスは、インターネットに接続できれば利用できます。通信速度は高速化し、決済方法
前回はGitをマシンにインストールしてみましたが、今回から実際に使いつつ、利用時に登場する用語なども解説していきます。 まず、Gitの構成がどうなっているのか、再度おさらいです。本シリーズの第1回目で“バージョン管理システム”について説明した際に簡単に触れましたが、リポジトリという場所でファイルを管理していきます。 リポジトリには、「ローカルリポジトリ」と「リモートリポジトリ」の2種類がありました。 ローカルリポジトリ=自分のマシン内にあるリポジトリ リモートリポジトリ=サーバなどネットワーク上にあるリポジトリ プロジェクトを他の人と共有する場合は、リモートリポジトリが必要になってきますが、自分だけでファイル管理を行うのであれば、まずはローカルリポジトリだけでも十分だと思います。 ローカルリポジトリの仕組みについて 実際にGitでファイル管理をしていく前に、リポジトリ内でデータがどのように
前回、ドキュメントのバージョン管理の大事さと、バージョン管理システムのメリットなどについて説明しましたが、今回は「実際にGitを使って、バージョン管理をしていってみましょう!」ということで話を進めていきたいと思います。 まずは、自分のパソコンにGitが入っていないと話がすすまないので、インストールしていきましょう。 とはいえ、Macを使っている場合は最初からGitがインストールされているので、すぐに使い始めたい方はGitの初期設定だけでもよいかもしれません。(※Macには最初からGitがインストールされていますが、バージョンが最新ではないようです。) 最新版のGitでは機能が強化されていたりするので、応用した使い方を実践したい方は試してみてください。 僕の場合、開発環境がMacなのですでにインストールされているバージョンを使用していましたが、今回は解説も兼ねて最新バージョンを入れてみたいと
マーケティングにおいて、ブランドとは企業のイメージを消費者に伝える重要な手段の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 〜グラデーション時の色選び〜 グラデーションの色を選ぶとき、予め「スウォッチ」に登録した色か、「カラースライダー」から色を選ぶことができますが、このカラースライダーでの色の設定が難しい…。 通常色を塗るときにツールバーの「塗り」から色を選択すると、「カラーピッカー」で選ぶことができるので、グラデーションの「カラースライダー」では、自分の思う色を選択しにくく感じます。 「カラーピ
GoogleはAndroid OSの最新バージョンである4.4(KitKat)に、ホストカードエミュレーション(HCE: Host Card Emulation)という機能を搭載しています。これはNFCで非接触決済を行う際に利用するものです。 世界の二大クレジットカード会社であるMasterCardとVisaは、今年2月にHCEを支持する表明を出しました。 MasterCard to Use Host Card Emulation (HCE) for NFC-Based Mobile Payments Visa to Enable Secure, Cloud-Based Mobile Payments HCEは、従来のNFC決済と何が違うのでしょうか? そして、MasterCardとVisaが指示する意図はどこにあるのでしょうか? 今回は、これについて技術的な面を極力省き、簡単に解説したい
みなさんはブログを書くときに、どんなことを意識していますか? 「SEOの効果をあげたい!」「見込み顧客を獲得したい!」――こんなことを考えているかもしれません。 そんな願望を達成するためにも、ブログの質を上げる必要があります。しかし、ブログの質という言葉は曖昧です。そういう曖昧なものは、どうすれば上がるのでしょうか? 今回は、ブログの質を上げて、目的を達成するためのチェックシートを作成しました。ブログ作成前、公開前、公開後の三段階に分けてありますので、それぞれの段階でチェックしてみてください。 ブログを書く前のチェックリスト 1. ブログのターゲットとなる読者はどんな人か? これから作成するブログは、どんな人に読んで欲しいのでしょうか? 大雑把でも構わないので、以下の3つは必ず考えてください。 年齢層 職務内容・役職 抱えている問題 この項目を考えることで、読者の理想像が作れます。内容や文
Google Analyticsの [ユーザー] タブにコホート分析が追加されました。 この機能はベータ版で、ハイベロシティのサイトのプロパティには無く、他のプロパティにあったものなので、今のところ全プロパティで利用できるわけではないようです。 [追記 2月6日 21:30]:先ほどGoogle Analyticsを確認したところ、ハイベロシティのプロパティにもコホート分析が追加されていました。徐々に利用できるプロパティが増えているようです。 コホート分析とは? そもそも、コホート分析とは何なのでしょうか? 簡単に言えば、特定の条件に当てはまるユーザーグループが、時間経過によってどのような行動取ったかを分析方法です。行った施策がサービスに与えた影響を視覚化するのでわかりやすく、改善に活かせます。 実はGoogle Analyticsでは、タブに追加される前でもセグメント機能を使い、csvフ
自サイトの運用と一口に言ってもコンテンツ作成、SEO、分析・改善など、いくつものフローがあります。これらのフローは、どのように解決すべきなのでしょうか? すでに自サイトの運用を行う先駆者の手法から知見を得るというのも、立派な解決策のひとつです。幸いなことにブログやSlideShareには、ノウハウが数多く公開されています。 今回はSlideShareにアップロードされているスライドの中から、自社サイトの運用を始めるにあたってわかりやすいものを厳選して7個ご紹介します。 オウンドメディアによるコンテンツマーケティング戦略 B2Cにおけるオウンドメディア戦略のスライドです。ブランドが消費者と繋がる方法として注目されていますが、実際にはどのような運用が必要なのでしょうか? このスライドではオウンドメディアを運用する目的、発信するコンテンツのコンセプト、中長期的に運用する上での戦略が重要だとしてい
突然ですが、最近ダイレクトトラフィックの割合が増えています。 1年分のリファラー、ダイレクトを比較してみると、昨年は同程度だったのですが、今年に入って明らかに差が大きくなっています。 理由のひとつにFacebookへの投稿をFacebookに関わるものだけにしている、ということもありますが、ダイレクトトラフィックの増加の理由にはなりません。一度、ダイレクトトラフィックについて整理してみます。 ダイレクトトラフィックとは? ダイレクトトラフィックは何らかの理由で参照元が不明な状態でウェブサイトを訪れた人のことを指しており、ノーリファラーとも呼ばれます。一般的に、以下の流入元から来た人がダイレクトトラフィックに該当します。 ブラウザのブックマーク ブラウザでURLを直接入力 RSS (Feedly, Livedoor Readerなど) メール (Gmail, Hotmailなど) スマートフ
みなさんは、普段何時にブログを公開していますか? 完成した直後、少し寝かせてから、一番訪問者が多くなる時間、さまざまだと思います。でも、その公開時間は本当に正しいのでしょうか? 購読者が多いブログになれば、何時に公開しても人が来てくれます。逆に、購読者が少ない場合は、タイミングを計らなければ人は来てくれません。 また、ブログは公開して終わりではありません。公開したあと、ソーシャルメディアに投稿します。ソーシャルメディアのフォロワーがいる時間に投稿しなければ、見られる可能性が低くなります。 今回は公開、投稿に最適な時間を探っていきましょう。 Google Analytics 最初にウェブ解析ツールの基本、Google Analyticsを使って自分のウェブサイトがよく見られるのはいつか把握します。 カスタムレポートの作成 Google Analyticsでカスタムレポートを作成します。 同じ
写真を編集するときに、人物を切り抜くことありますよね。そんなとき、よく髪の毛がフサァっとしているのを見つけると、絶望を感じます…。しかし、そんな絶望も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」を
そもそも、バイヤーペルソナとは何なのでしょうか? 簡単に言えば、あなたの製品やサービスを購入して欲しい人の理想像です。この理想像をターゲットとして、マーケティングを行います。 既にマーケティングを行っている方は、性別や年齢といった人口統計的なデータを分析し、理想像を作り上げているはずです。しかし、この理想像は輪郭こそ見えていますが、細かなディティールがわからないという欠点があります。大多数に向けてマーケティングを行うならこの理想像だけでも行えました。しかし、大多数に向けてマーケティングを行うと、どうしても無関係の人まで巻き込んでしまうため、質の高い見込み顧客はごく一部になり、費用対効果は悪くなってしまいます。つまり、質の高い見込み顧客を獲得するためには、より細かいディティールまで作りこむ必要があるのです。 細かなディティールとは、例えばその人はどんな部署にいて、抱えている問題は何か、そして
Facebook広告には複数の種類があり、それぞれ特徴があります。また次々にバージョンアップされることで現在、「どのようなメニューがあって、それぞれの特徴がわからない。」といった方も少なくないと思います。以前まとめた情報からも大きく変わっておりますので、改めて整理しました。 2014年10月28日、最新版のFacebook広告の状況についてご紹介いたします。 Facebook広告とは Facebook広告とは、Facebookの「デスクトップの右側広告枠」・「デスクトップニュースフィード」・「モバイルニュースフィード」、また限定ですがパートナーモバイルアプリに表示される広告です。 ユーザーがページを切り替えるたび、ニュースフィードをスクロールするたびに、ユーザにもっとも適した広告が表示され、配信設定も細かく行えるため広告を届けたいユーザーにのみ表示させることが可能。低予算から出稿が可能。
ウェブサイトを任されたけど、一体何をすればいいか分からない。こんな悩みを抱えている方もいるのではないでしょうか。 そんな方は、何か施策を始めようとする前に、ウェブサイトの現状を見つめなおすことをオススメします。手持ちの武器を知らずに、戦いはできませんよね。 ウェブサイトを見つめなおす方法にはいくつかあります。その中でも、まずはGoogleやYahoo!のような、検索エンジンに最適化(SEO)されているかを見てみましょう。検索エンジンへの最適化は大きく自サイトで行うこと(オンページSEO)と、外部から行われるもの(オフページSEO)の二種類に分かれています。今回はすぐに出来るオンページの見つめ方をチェックシートとともにご紹介します。 以下のリンクから一言コメント付きのオンページSEOチェックシートをダウンロードできますので、ぜひご利用ください。 オンページSEOチェックシートのダウンロード
2013年9月20日にNTTドコモから「iPhone」が発売され、国内3社の大手携帯電話事業者から「iPhone」が購入できるようになりました。日本では、68.7%の人が「iPhone」ユーザーです!今回は、日本と世界の「iPhone」と「Android」の普及率についてみていきたいと思います。 日本は「iPhone」大国 電車に乗っていると、暇つぶしにスマートフォンを操作している人をよく見かけますが、そのほとんどの人が「iPhone」を使っているのがわかります。日本の「iPhone」普及率は、68.7%と半数以上に上る結果が出ています。その点「Android」は、30.5%とスマートフォンユーザーの3分の1の割合しか利用されていません。 (カンタージャパン より) 「日本だとiPhoneが人気だし、世界でもiPhoneは人気なのかな!」と世界中の人が「iPhone」を使っているのかと思っ
先日、Facebook Developersにて、Graph API v2.1へのアップデートとプラットフォームポリシーの改訂が伝えられました。 Graph API v2.1 and updated iOS and Android SDKs このアップデートでFacebookキャンペーンが難しくなったと言われています。では、なぜ難しくなったのでしょうか?プライバシーポリシーの改訂と合わせて読み解いてみましょう。 Platform Policy Facebook Developersとプラットフォームポリシーを読んでみる まずは大本となったFacebook Developersのブログと、プラットフォームポリシーの内容を読んでみましょう。 Facebook Developers ソーシャルプラグインやページで「いいね!」することにインセンティブを与えてはなりません。ここには「いいね!」するこ
『Bootstrap』というCSSフレームワークをご存知でしょうか? このBootstrapはウェブデザイン初心者でも簡単にクールなサイトが作成できるとして、にわかに注目されています。 Bootstrapについて、数回に分けて見ていきます。今回はBootstrapがどのようなものかについてと、導入方法です。 Bootstrapって? BootstrapはTwitter社が提供しているCSSフレームワークと呼ばれるものです。これを利用すると、Twitter風のクールなウェブサイトを作成することができます。 Bootstrapには大きく3つの特徴があります。 1. ウェブデザインの初心者でもかっこよくウェブサイトが作れる しつこいようですが、一番の特徴です。 用意されているCSSやJavaScriptを呼び出し、組み合わせるだけでOK。 グリッドレイアウト、カラムレイアウト、フォーム、ポップ
次のページ
このページを最初にブックマークしてみませんか?
『Hivelocity (ハイベロシティ) デジタルでビジネスを最適化』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く