読者です 読者をやめる 読者になる 読者になる

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

Google Analytics有でGooglePageSpeedを100点にする方法

写真はうちのみーこ。 PageSpeed Insightsで100点を取るためには「Google Analytics を外しましょう!」という情報をよく見かけるので、 Google Analyticsを外さずにちゃんと100点を取る方法を説明します。Bootstrap等のよくある普通のサイトを高速化してPag…

GoogleのAPIでSEOする方法

写真はおもちゃに高速アタックするうちのみーこ。 ある程度の規模感があるサイトを複数運営していると以下のようなニーズが社内で出てくると思います。 独自のSEOレポートを作りたい 共通のSEOをする指標が欲しい 各種プロモーションとSEOを連動させたい こ…

Googleの情報でSEOを体系的に学ぶ

絵はともだちが書いたみーこ。 SEOはブラックボックスなイメージが強いと思います。ですが最近はGoogleから日本語ドキュメントが多数公開され、さらに整備されているので勉強し易くなりました。 インハウスSEOを行っている方、協力会社でSEO作業をしている方…

「Facebookで共有する」ボタンを高速・快適に表示するスクリプトの説明

写真はうちのみーこ。 昨日のツイートボタン表示と同じようにFacebookでも「共有ボタンの表示が遅い&重い」問題があります。 Facebookで共有ボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。 遅くなる&重く感じる…

「Twitterで共有する」ボタンを高速・快適に表示するスクリプトの説明

写真はうちのみーこが子猫だった頃。 「ツイート」ボタンを表示しているサイトが抱える共通の課題に「ツイートボタンの表示が遅い&重い」があります。 ツイートボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。 こ…

よくある構成のサイトを高速化してPageSpeed Insightsで100点を取る方法

写真はうちのみーこ。 サイト制作でよく使われる以下のライブラリ/CSSに依存したサイトを高速化してGoogleのPageSpeed Insightsで100点を取る方法を説明します。 Google Fonts jQuery Bootstrap FontAwesome 実際にどのぐらい速度に違いがあるのかデモページ…

夏だしダイエットしたいから痩せれるウェブアプリを作った

写真はうちのみーこ。 今年も夏がやってきました。毎年この季節になると思うことはなんでしょうか? そう、ダイエットですよね。 海にプールにフェスにビアガーデンと夏特有のイベントがあるたびに痩せなきゃ!と気を引き締めるのですが3日後にはすっかり忘…

Googleクラウド自然言語API(Cloud Natural Language API)の利用制限・利用料金を手短に。

写真はうちのみーこ。 Googleからクラウド自然言語API(Cloud Natural Language API)が公開されたので気になる利用制限・利用料金を手短にまとめます。 ※ 2016/7/21日時点。 cloud.google.com 利用制限 対応言語 英語、スペイン語、日本語 テキスト量 1リク…

小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ3選。

写真はうちのみーこ。スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。 1. Peity http://benpickles.github.io/peity/HTMLの要素をSVGの小さいチャートに変…

はてなブログでチャートを表示するサンプル

はてなブログでは普通にjavascriptが動くので、d3のチャートも普通に表示できるかな?と思って動かしてみます。

Tool for my cat should drink amount of water every day

Photo is MikoTheCat.When you select the weight of the cat in the select box, to display the amount of water drink necessary on one day. Cat Weight: 2.0kg 2.2kg 2.4kg 2.6kg 2.8kg 3.0kg 3.2kg 3.4kg 3.6kg 3.8kg 4.0kg 4.2kg 4.4kg 4.6kg 4.8kg …

猫が1日に必要な水分量を体重から計算するツール

猫が腎臓の病気になるのを予防するため、1日に必要とする水分摂取量を自動計算するツールをさっと作りました。 セレクトボックスで飼い猫の体重を選択すると、選択した体重に必要な水分量のグラム数が切り替わります。1日に飲んでもらいたい水分量の目安にお…

SEO対策で大切な被リンクの調査方法と管理方法

写真はうちのミーコ。被リンクの調査方法はあまり変化がなく固定化されています。この記事はその調査方法の要点をまとめたものです。 被リンク情報の取得について 1. Google Search Consoleを使う(旧名:Google Webmaster) Google Search ConsoleからCSVで…

2015年度版 結婚式・ブライダル業界の動向調査(北海道版)

結婚式に関連する仕事をするようになってもう長いのですが、ブライダル総研から毎年でている「結婚トレンド調査」を読んで現状と照らし合わせて物事を判断したり、動向とトレンドを合わせて判断したりといった事をしています。 その「結婚トレンド調査」が今…

コンテンツマーケティング×オウンドメディアで大切なたった1つの事

みんな大好きコンテンツマーケティング。ブームの様相を見せていてオウンドメディアが多数立ち上がってきています。 そんな中で新しく立ち上げたけども1年続かずに終了してしまうコンテンツマーケティング(オウンドメディア)も同じようにたくさん出てきて…

2015年12月時点。コンテンツマーケティング業界のおさらい

写真はうちのみーこ。いまブームになりつつあるコンテンツマーケティングと取り巻く業界を整理して紹介します。企業のマーケティング担当者や、サイト運営者、コンテンツマーケティング関連のビジネスを展開している・または考えている方向けの情報です。 1.…

新しいWordPress「Calypso」のインストール手順と動作(キャプチャ込み)の紹介。

画像はIntroducing the New WordPress.comのキャプチャNode.jsでフルリプレイスされた新しいWordPressのCalypsoをインストールして動作させる所まで試したので記事にします。所要1時間ぐらいです。Calypsoの特徴はTechCrunchの以下記事に良くまとまっていま…

全国のウェブ系プログラマに捧げるSEO対策マニュアル

SEO

Photo credit: bjimmy934WEBサイト制作会社やWEBインテグレーション事業にプログラマ・エンジニアとして携わっている方向けに、プログラマの立場から見たSEO対策の要点を説明します。 1. SEOの仕様はGoogleが決めている 以下記事の2015年8月時点での情報によ…

マテリアルデザインのアニメーション大全サンプル集付き。

Photo credit: Gattou - Lucie Provencher※2015/11/9日時点の情報です。いま流行中のマテリアルデザインの肝は?と聞かれるとやっぱりアニメーションですよね。シンプルなアニメーションによってユーザーインターフェイスの意図が伝わり易くなります。マテリ…

勉強すると面白そうな上に転職するときに給料が上がりそうなプログラミング言語9選

Photo credit: Atomic Mutant Flea Circus転職サイトが運営しているオウンドメディアで見かけたプロのエンジニア9人が徹底解説!おすすめのプログラミング言語9選の内容が色々と凄かったのでそれにインスピレーションを得ての記事になります。ここ数年で新し…

シンプルなJSとCSS3で作るゲームウォッチ "catch-the-egg"

たまたま見つけたので紹介です。catch-the-eggはシンプルなjavascriptとCSSで作られたブラウザで動くゲームウォッチ風ゲームです。以下URL先で実際に動作します。http://shtange.com/catch-the-egg/GitHubのプロジェクトはこちら。github.com最近のランディ…

Ruby検定GOLDに合格する方法

Ruby検定GOLDを受験して合格したのは2年ぐらい前になります。シルバーを受けて次にゴールドを受ける流れになるため、一回シルバーで慣れている分だけゴールドのテストの方が気分的には楽でした。この記事では合格するために行った方法を説明して行きます。記…

paizaでSランクを取る方法[Ruby]

転職サイトのpaizaはお題に合わせてコードを書けるから楽しいですよね。下のランク(D)から上のランク(S)までなるほどと頭を使う問題がバランスよく揃っていて、採用側の機能は使った事ないですが書いたコードも見れるようなので即興のコードを見てもらうに…

パワーポイントでFont AwesomeのWEBフォントを使う方法

パワポでWEBフォントをフォントして埋め込んだサンプル↓パワーポイントで資料作ってると、時折アイコン入れたくなりますよね。ソーシャルメディアのアイコンとかイメージを探してきて、わざわざスライドの中にサイズ指定して埋め込むのと調整手間だし嫌だな…

水滴がみずたまりに落ちて広がるCSS3エフェクト

.drop { position: relative; width: 20px; height: 20px; top: -30px; margin: 0 auto; background: #FFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-animation-name: drip; -webkit-animation-name: drip; anima…

d3を使ったグラフの見出し/凡例を作るAPI「d3 Legend」

d3を使ったグラフの見出し/凡例を作るのって結構大変なんですよね。最近は内部でd3を使ったライブラリが増えてきましたが、legendの設定はライブラリでサポートしておらず、自分で都度作ることも多くなります。「d3 Legend」はそんな要望を一手に引き受けて…

d3を使ったグラフ理論の実装「greuler」が超使えそう

1日1回、GitHubの人気プロジェクトを見ているのですが その中にd3を使ったグラフ理論の実装「greuler」があったので紹介します。以下デモサイト。http://maurizzzio.github.io/greuler/GitHubプロジェクト。maurizzzio/greulergithub.com デモサイトの下の方…

CSSアニメーションで動く「うさぎ」がかわいい

.bunny{ font-size:7px; /*> size */ position : absolute; width : 16em; height : 20em; margin : -10em 0 0 -8em;} .bunny::before, .bunny::after{ content : ''; display : block; width : 1em; height : 1em; margin : -1em 0 0 -1em; } .bunny::befor…

文字がどんどん消えていく「jquery-vanish」

「jquery-vanish」は文字が1つづつ消えていくjQueryで作られたエフェクトです。Demoサイトmatheusazzi/jquery-vanishgithub.com最初vanishとあるからjQueryで何を追放するんだ?とバイオレンス方向のイメージをもったのですが追放のバニッシュは「banish」で…

書いた人にしか届かないコメントをサイトに組み込む「echo-chamber-js」

「echo-chamber-js」は100%スパムにならない画期的な埋め込み型コメントシステムです。数行のjavascriptを書くだけで殆どのサイトで利用できます。tessalt/echo-chamber-jsgithub.com埋め込んで見た例画像はgravatar.com(アバターアイコンのサービス)から…

awesome-RemoteWorkにどんなツールが書かれているのか

awesome-RemoteWorkはリモートワークする人のためのリンク集です。awesome-RemoteWork hugo53/awesome-RemoteWorkgithub.comどんなツールを使っているのかなと気になって見てみると、タイムマネジメントするツールが多いですね。クラウドソーシングでのリモ…

フリーの高品質写真素材が見つかるawesome-imagesが素晴らしく便利

awesome-imagesは「フリーで使えるストックフォトサイト」へのリンク集で高品質なサイトばかり紹介されています。Github内で人気のawesome-xシリーズです。日本語情報はないですが、フリーで利用できるサイトが多数並んでいます。awesome-imagesheyalexej/aw…

マテリアルデザインの構成を3Dに配置した動くイラスト

最近3Dに表示して少しアニメーションさせるエフェクトが人気です。CSS3で実装されています。codepen.ioアニメーションがあると次にどうなるんだろうとユーザーの注目を集めます。いままでは画像がぼんやり表示されたりするエフェクトや、パララックスのよう…

express-dustjs+JSONで作られたシンプルな個人プロフィールサイト

個人のポートフォリオを掲載したりするプロフィールサイトを無料サービスを使ったり、ちゃんとサイトを作ったりと準備しているエンジニア/デザイナーも多いと思います。christophior/JSONConfigurablePersonalSiteはexpress-dustjs+JSON(プロフィールデータ…

VMWare+Ubuntu14.04+Windowsでファイル共有する手順メモ

Qiitaで書くような内容ですがブログでも。開発環境を作りなおしていたのですが、VMWareのvmware-toolsでサポートするHGFSで案の定と言うか不幸にもというか時間を取られたので解決する手順を残します。結論としてはvmware-tools-patchesを使います。vmware-t…

はてなブログは直接javascriptを書けるらしいのでテトリスを動かしてみる

はてなブログは汎用的に書けるので便利ですね。左右キーで移動、ZキーとXキーで回転です。スマホでは操作できません。 $('.game').blockrain(); 元ネタ:Blockrain.jsAerolab/blockrain.jsgithub.com

はてなブログは直接CSSを書けるのでCSS3のデモを試す

@import url(http://fonts.googleapis.com/css?family=Lobster); @-webkit-keyframes fly { to { transform: rotate(180deg); } } @-webkit-keyframes shadow { from { text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); } to { text-shadow: 4px 0 0 rgba(0, 0, 0,…

スクロールすると背景画像がぼやけて文字が上にのるエフェクト

数行のjavascriptと短いCSSで作られた背景画像をぼやかして文字が上によるエフェクトです。codepen.io文章を読ませるエフェクトとして良いですね。

ブラウザで動作するシンプルなチャット「hack.chat」(Node.js製)

チーム内でお手軽に使えるチャットツールってなかなかありませんよね。クライアントに新しくインストールするのも少し手間ですし。「hack.chat」はNode.jsで作られたブラウザで動作する本当にシンプルなチャットツールです。

2016年6月時点。おススメのレスポンシブCSSフレームワークを紹介

Photo credit: eva101※2015/11/8: 最新の情報に更新。 ※2015/10/20: 現状に合わせて内容編集と追記。 ※2016/6/18: 現状に合わせて内容編集と追記。重量級から軽量なもの、全てコミコミからミニマムなものと、レスポンシブデザインの実装で利用するCSSフレー…

プラズマが揺らめくHTML5グラデーションのデモ

HTML5のcanvasのcreateRadialGradientを進使ったデモです。短いjavascriptで作られています。codepen.ioCanvasはGoogleChromeだとだいぶ高速化がんでだいぶ使いやすくなっていますが、Firefoxなど他ブラウザだとやっぱり遅い…

ブラウザにログを美しく表示するrtailが良い感じ

rtailはターミナルに出力される内容をそのままウェブブラウザで(美しく)表示することができるnode.jsで作られたツールです。Terminal output to the browser in seconds, using UNIX pipes.rtail.orgkilianc/rtailgithub.com

はてなブログのタイトル部分にCSS3で回るリングエフェクト追加してみた

はてなブログのデザイン変更でブログタイトル部分にCSS3でゆらゆら回るダブルリングのエフェクトを加えてみました。この記事ではこのカスタマイズ方法を説明します。 PCでの見た目 PCブラウザで見るとタイトルの文字の中心をぐるぐる回っています。 スマホで…

高品質なCSSスタイルガイドラインをまとめた(日本語訳付き)

去年今年と各社から高品質なCSSのスタイルガイドラインが公開されています。この記事ではオリジナルのURLと、その日本語翻訳されたURLを合わせてまとめています。この記事は定期的に更新する予定です。

マテリアルデザイン(Material Design)フレームワークのリンク集

マテリアルデザインのガイドラインを出していたGoogleから公式のフレームワークも登場するなど、今年に入ってマテリアルデザインフレームワークが充実してきました。マテリアルデザインが盛り上がる背景として、ウェブページとアプリの両方で使いやすい(特…

"MUI"Googleのマテリアルデザインガイドラインに則った軽量CSSフレームワーク

GoogleからMaterial Design Liteが発表された直後ですが今年登場して頻繁にアップデートが繰り返されているマテリアルデザインの軽量CSSフレームワーク"MUI"の紹介です。※見た目についてはGoogleマテリアルデザインのガイドラインに則っているため特に紹介し…

ディープドリームのビデオが怖い

ディープドリームでビデオを作る方法が説明されていました。以下gif画像はgraphific/DeepDreamVideoのものです。

かっこいいSnap.svgを使った紙ひこーきが飛ぶデモ

SVGを使ったアニメーションです。SVGなので多くの主要ブラウザで問題なく動作します。codepen.ioSnap.svgはJavascriptでSVGを操作するライブラリで以下サイトのGetting Startで使い方が丁寧に説明されています。ライセンスはApache2でオープンソースです。Sn…

ウェブページでマインドマップを見せるにはjsMindがベスト

jsMindはJavascriptで作られたマインドマップです。HTML5とCanvasを使っています。ライセンスは3条項BSDライセンスです。

Bootstrap + jQueryでレスポンシブ対応のカウントダウンするプラグイン

カウントダウンするプラグインはたくさんありますが、これはBootstrapで使うことを前提としたプラグインです。MITライセンスです。使い方は以下の通りです。分かりやすくて良いですね。 jQuery(window).load(function () { $('#countdown').countdown("2015/…