WordCamp Kansai 2016 で使ったスライドです：D

SkypeのようなビデオチャットがJavaScriptだけで作れる!? WebRTCを手軽に扱えるPeerJSでリアルタイムなビデオチャットアプリを作ってみました。 ※本記事は2016年7月16日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 WebRTCの登場と、ブラウザーの大容量化によってリアルタイムでP2Pを扱えるようになったので、これまでよりずっと簡単にリアルタイムアプリケーションが構築できるようになりました。この記事では、PeerJSを取り上げ、WebRTCを効率的に実装する方法を紹介します。WebRTCを使った、メッセージ機能付きビデオチャットアプリを構築してみましょう。 WebRTCとP2Pについて少し予備知識が必要な人は、『The Dawn of WebRTC』と『An Introduction to the g

Facebookが開発しているHHVM（HipHop Virtual Machine）。WordPressを高速化する方法はいろいろありますが、HHVMを使うのも効果的な手かもしれませんね。 ほんの数か月前、HHVM（HipHop Virtual Machine）はPHPコミュニティで人気のバズワードでした。私たちの多くはこの新しい技術、とりわけパフォーマンス向上の報告に好奇心を持っていたのです。FacebookがHHVMを世の中に広める前は、ZendのPHPだけがHHVMに代わる存在でした。 幸いなことに、HHVMはもはやバズワードではありません。私も含め多くの人は大げさな宣伝は嫌いでだと思いますが、かつてのバズワードであったHHVMについて、せっかくなので書いてみようと思います。 では、始めましょう！ この記事で解説するのは次のポイントです。 HHVMとは何か Hackとは何か 従来の

PC内蔵のカメラを使ったプロモーションサイトやWebアプリの制作が捗りそうな予感。クロスブラウザー対応が面倒なカメラ機能へのアクセスを簡単にするライブラリーの紹介です。 本記事はDan Princeが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 この10年間にブラウザーベンダーがさまざまな新しいAPIを導入したことで、開発者はより豊富で柔軟な設計ができるようになりました。その1つがユーザーの音声やビデオデバイスにアクセスできるgetUserMedia APIです。しかし、ブラウザーの互換性の点ではまだ確立されているとは言えません。 そこで、Adam Wróbelはブラウザーの互換性を考慮したJpegCameraを設計しました。ユーザーのカメラが作動するブラウザー間で発生する異なる警告を考慮し、メディアへのアクセス

AWSでは様々な便利なサービスが提供されています。中にはRDSやElasticCacheのように既存のミドルウェアに対するマネージドサービスを提供するものもあり、これらについては既存のミドルウェアを使って開発することができますが、AWS固有のサービスについてはアプリケーションを動作させるには実際にサービスに接続する必要があり、開発環境が制限されてしまいます。 もちろんソフトウェア側で抽象化しておき、DIなどの手法を用いてモックに差し替えるという方法も考えられますが、特にストレージとして利用するサービスなどの場合はインタラクションが必要になるのでモックでは再現しづらいですし、やはり実際に動作するサービスに接続して開発やテストを行うほうが効率的です。 そこで、AWSのサービスを擬似的にローカルで再現することのできるプロダクトを集めてみました。 S3 node.jsで動作するs3-proxyが使

WordPressのテーマって、どんなフローで開発していますか？ 新しいテーマフレームワーク「Beas」なら、便利なコンポーネントを組み合わせて進められるので、テーマ制作が捗りそうです。 いますぐWordPressテーマを自分で作成したいなら、しっかりとコーディングされた信頼できるテーマフレームワークの利用をお勧めします。フレームワークはWordPressに一般的な機能やコンポーネントを提供してくれるので、独自のデザインを作成できるようになります。また、フレームワークを利用するとテーマの作成時間を劇的に短縮できます。 Thierry Mullerが作成した新しいWordPressのテーマフレームワークの1つ、Beansを試してみたので紹介します。Beansについては過去にJames GeorgeがSitePointの『Introducing Beans: A Streamlined Wor

これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や

サーバレスアーキテクチャ構成にしたときに 実際のところ、どれくらいの料金になるのか気になったので算出してみようと思います。 (あくまでシミュレーションしたものでAWS側で値段や計算方法が変わったりするため、責任は負いかねますので導入する際は自己責任でお願いします。) AWSのどこにどれくらいの料金がかかっているのか知ることは大事だと思ったのですが、トータルだとなかなかまとまってなかったのでまとめてみました。 間違ってたらご指摘いただけると助かります。 サーバレスアーキテクチャって何？って方はこちら参照してください 世界に先駆けてAWSサーバレスアーキテクチャでユーザ認証とAPI認可の実装をしてみた AWSサーバレスアーキテクチャでCloudFrontからWAFをかけてAPI Gatewayを呼ぶ Lambda+RDSはアンチパターン 全部教えます！ サーバレスアプリのアンチパターン とチュ

WordPressのフックシステム特集の第1回『もう開発で苦しまない！「フック」を理解したらWordPressは最強のCMSになる』では、いくつかの動作するコード例とともに、WordPressのフックシステムと2種類のフック（アクションフックとフィルターフック）について学びました。 第2回では、WordPressでイベントをトリガーし、静的クラスと非静的クラスメソッドをアクションフックやフィルターフックにフックさせる別の方法について学びます。 前回の記事ではこのように書きました。 WordPressを使用する際の多様なステップで、大部分の一般的なイベントは、do_action()とapply_filters()というPHPの関数でトリガーします。イベントはadd_action() と add_filter()経由で登録、フックできます。 ここで、「一般的には」という言葉を用いたところに注意

modulr.cssはUIコンポーネントに特化したCSSフレームワークです。多彩で豊富なカラーパレット、テキストの装飾、細かく設定できるグリッド、様々な種類のナビゲーション、各シーンに対応出来るボタンスタイル、フォームスタイル、各エフェクトなどがclassで管理出来るように設計されています。コンポーネントの種類よりスタイルの選択肢を豊富に揃えた形になります。 modulr.css

探せば大抵のものある、と言われるWordPressのプラグイン。でも、ちょっと自分がほしいものとは違うんだけど…なんてことも多いはず。自分専用のプラグインを作っておけば、いろんな案件で使いまわせて便利。長いので2回に分けてどうぞ。 この記事を最大限に活用するには、actions、filters、 shortcodes、widgets、 object orientated designなどの基本的な理解が必要です。 基本から復習したい人は、私が以前書いた記事『An Introduction to WordPress Plugin Development』を読んでください。この後の記事にある概念やアイデアの理解を深めるのに役立ちます。 事業拠点リストのプラグインを作る プラグインがどのような場面で使われ、Webサイトにどのような機能を追加できるのか。さっそく実例を紹介します。 コーポーレートサ

WordPressで開発をするなら、いまどきどんなツールを使うのがいい？　WordPress専門のデベロッパーであり、コアコントリビューターでもあるMatt Geriさんがおすすめるする、最高の開発環境とは？ 近年、WordPressによる開発は大きな進展を遂げています。特に、ツールに関しては。以前は、WordPressでサイトを構築しようものなら、ほぼ確実にMAMP/WAMPのローカルホスティングの設定をしなければならず、それはもう悩みの種でしたよね。ひょっとしたら、本番の状態でサイトの開発を進めなければならなかったりしました。 そう、私もその一人でした。 幸い、時代は変わり、いまではそんな頭痛の種や反復作業を取り除くツールが出てきました。 WordPress開発業者としてフルタイムで開発をしていた私は、WordPressから離れて丸3年後の2015年12月、再びフルタイムのWordPr

WordPressの人気を支える、豊富なプラグイン。探せばたいていのもがあるとはいえ、欲しい機能とピッタリはまることばかりではありませんよね？　そんなときは、自分専用のプラグインを作ってしまうのも1つの手。WordPressのプラグインを開発に役立つ記事をまとめてみました。 1.WordPressプラグインの最高の開発環境はこれ！ 『WordPressコア貢献者に聞く「ぼくのかんがえた最強の開発環境」（2016年版）』（WPJ） WordPress用の開発をするなら、いまどきどのようなツールを使うのがいいのか？　WordPress専門の開発者であり、コアの貢献者でもあるMatt Geriさんがおすすめする、最高の開発者環境を具体的に解説します。 2.開発環境をMAMPからVagrantへ乗り換える 『WordPressのテーマ・プラグイン開発環境をVagrantを使い簡単に構築する方法』（

Vidage.jsはフルクリーンで動画を背景にするスクリプトです。スマフォなどのモニタサイズが狭いデバイスなどでは画像が背景になるようにするようです。ファイルサイズは圧縮版で4.7kbほど。非依存型なので単体で動作してくれます。手軽で良いんじゃないでしょうか。ライセンスはMIT。 Vidage.js

Download 3.1.10 This file contains CSS, JavaScript and their minified versions, images, fonts and the cookbook. Download with source This file contains SASS and JavaScript source code, distribution versions and the build tools config files. Github If you prefer, head on to our github repository, fork the project and help us create an even better Ink. Responsive from the ground up Our grid system i

参考：動画配信プラットフォーム on AWS 2014.05.22 Amazon Data Service Japan 上図の中の HLSがHTTP Live Streamingです。 HTTPストリーミングの配信技術で、全てのプラットフォームに対応していると言えます。 (注1) QuickTime Player 10以上や、るMicrosoft Edge（Windows10）で再生可能です。InternetExplorerでは再生できません。 3 構成 HTTP Live Streamingの構成は、次の図で表現できます。 iPhoneなどのクライアントは、Webサーバに配置された動画ファイルにHTTP(HTTPS)でアクセスします（①）。 Webサーバ上の動画ファイルは、メディアセグメントファイル（.ts MPEG-2トランスポートストリームファイル)と、インデックスファイル（

CakePHPではパフォーマンス向上のため、app/tmp/cacheにキャッシュファイルを持っている。 core.phpのデバッグレベルを0にした状態で、テーブル定義を変更すると、テーブル定義のキャッシュと不整合のためエラーになる場合がある。 デバッグレベルを0にした状態（本番環境）でテーブル定義を変更した場合の対策をまとめる。 1.デバッグレベルを1以上にしてアクセス デバッグレベルを1以上の場合、都度キャッシュファイルが書き換わるので。 2.app/tmp/cache配下のキャッシュファイルを削除 まんまキャッシュファイルを削除 3.キャッシュファイル削除用のコンソールを作成実行 デプロイ時にコンソールを実行してキャッシュを削除する。 自分のところではこれを採用している。 class CacheClearShell extends AppShell { function main()