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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カッコよく素数(Prime)を表示しています。色つきになっている数字が素数です。codepen.io実装はJavascriptで数字カウントしながら素数だったらclassを指定して、あとはタイムアウトとCSS3のアニメーション（translate3d）を使ってエフェクトを実現しています…

背景画像をぼかす（Blur）jQueryPluginの"background-blur"の紹介です。使い方は簡単でjsファイルを読み込んで上書きする要素（id='some-element'）を指定するだけです。 <script src="jquery.min.js"></script> <script src="background-blur.min.js"></script> <div id='some-element'></div> $('#some-element').backgroundBlur({ imageURL : 'http://URL-of-the-image', blu…

"pwd.sh"は1つのシェルスクリプトで動く対話型のパスワード管理ツールです。パスワードはgpg(GNU Privacy Guard)で暗号化されます。drduh/pwd.shgithub.comインストールはこれだけです。 $ git clone https://github.com/drduh/pwd.sh && cd pwd.sh $ sudo a…

カテゴリー別に厳選されたリンク集"awesome-x"シリーズのd3.js版が登場しました。

"catpix"はrubyで作られたターミナルに指定画像を表示するプログラムです。dot絵風になります。pazdera/catpixgithub.com $ catpix youkai.jpeg -w 0.8 -h 0.8ターミナルに出力される画像。