はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為、開発前後に行ったビデオチャット関連の技術調査なども載せています。必要最小限の事だけ把握したい方はその辺りは読み飛ばしてください。 開発ビデオチャットサービス: ビデオチャッターズ (http://videochatters.net/) 開発動機 5~6年ぐ
すべて画像動画ニュース ステートマシン図 | astah* 機能ガイド astah.change-vision.com ステートマシン図(Ⅰ) | 株式会社豆蔵 www.mamezou.com ステートマシン図 www.sparxsystems.jp ステートマシン図(Ⅱ) | 株式会社豆蔵 www.mamezou.com ステートマシン図/状態遷移表 | Next... docs.nextdesign.app システムデザイン 第12回 onct.oita-ct.ac.jp UMLステートマシン図を用いた状態遷移テストの注意点... qiita.com ステートチャート図の作成 www.ogis-ri.co.jp ステートマシン図(Ⅰ) | 株式会社豆蔵 www.mamezou.com ステートチャート図の作成 www.ogis-ri.co.jp 新人教育 資料】第6章 UMLまでの道.
ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説する。デフォルト値の設定方法も説明。 ← 前回 連載 INDEX 次回 → AngularJSの特徴的な機能の1つとして、双方向データバインディングが挙げられます。 データバインディングとは、JavaScriptのオブジェクト(モデル)をHTMLテンプレート(ビュー)に結び付けるための機能。その考え方そのものは、古典的なテンプレートエンジンから存在した仕組みです。 しかし、旧来のテンプレートエンジンでは、ビューにモデルを一度だけ引き渡すだけで、ビューの変更(例えばユーザーからの入力された内容)をモデルに書き戻すことはもちろん、以降のモデルの変更をビューに反映することはありません。一度、バインドした後、モデルとビューを同期するのはアプリケーションの責任なのです。この
% brew install tmux ==> Installing tmux dependency: libevent ==> Downloading https://github.com/downloads/libevent/libevent/libevent-2.0.21-s ######################################################################## 100.0% ==> ./configure --disable-debug-mode --prefix=/usr/local/Cellar/libevent/2.0.21 ==> make ==> make install /usr/local/Cellar/libevent/2.0.21: 48 files, 1.8M, built in 60 seconds =
要素、タグ、属性 要素(element) HTML文書を構成する単位。「見出し」「段落」など。 <h1>○○</h1>であれば「h1要素」、<p>○○</p>であれば「p要素」と呼ぶ。 タグ(tag) 文章中の各要素を示すために付けられる記号。< >で囲まれている。基本的には開始タグと終了タグのセットで用い、要素の内容を開始タグと終了タグで挟む。開始タグは<○○>、終了タグは</○○>となる。 小文字での記述を推奨する。 要素の属性(attribute) 要素の性質を示すために要素に付加される。開始タグの中に半角のスペースで区切って書き入れ、属性名と属性値を=でつなぐ。属性値は基本的に"(ダブルコーテーション、二重引用符)で囲む。 ページの先頭へ↑ 空要素(empty elements) 要素の内容を持たない要素も存在する。例えば画像を表示する「img要素」などである。その場合、終了タグは
Web+DB Express Vol.83を購入したところ特集として画像認識が いやあWeb技術者もComputer Visionが必要な時代かあ。。。と思い読み進めると、Javaでのコーディング例も載っていてかなり実用的でいい感じ しかしJavaよりかはPythonでお手軽にコーディングしたいよね!ってことで、掲載のと同じSIFTを使った特徴量算出及びマッチング、画像表示をPythonで書いてみました import cv2 # 画像を読み込み白黒化する im = cv2.imread('test.jpg') im2 = cv2.imread('test2.jpg') gray= cv2.cvtColor(im,cv2.COLOR_BGR2GRAY) gray2= cv2.cvtColor(im2,cv2.COLOR_BGR2GRAY) # SIFT特徴量算出アルゴリズムモジュールを呼び出
MacのWEB開発環境は、MAMPで一発で導入するか、もしくはOSXには標準でApacheとPHPが入っているので、追加でMySQLをインストールするかを選べます。 MAMPは確かにお手軽なのですが、私は日常的にサーバーにも触れていたいので、OS付属のApacheとPHPを使っています。MySQLはHomebrewで導入しています。 先日、Yosemite→El Capitanにアップグレードした際、ApacheやPHPも再インストールされてしまいました。当たり前といえば当たり前なんですが、OSのアップデート毎に再設定することになります。なので引き継ぎもMAMPのが楽だと思います。 標準で入ってるApacheのバージョンを見てみます。 $ httpd -v Server version: Apache/2.4.16 (Unix) Server built: Aug 22 2015 16:5
WebRTCは、ブラウザや専用アプリ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。SkyWayを使えば、サーバを準備することなく簡単に、WebRTCを使ったアプリが開発できます。
はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為、開発前後に行ったビデオチャット関連の技術調査なども載せています。必要最小限の事だけ把握したい方はその辺りは読み飛ばしてください。 開発ビデオチャットサービス: ビデオチャッターズ (http://videochatters.net/) 開発動機 5~6年ぐ
達人らの .tmux.conf を参考にするとキーバインドを変更(perfix, 他のコマンド)しているがドノーマールの環境で使えなくなるのであえてキーバインドは変更しない。 # 設定ファイルをリロードする bind r source-file ~/.tmux.conf \; display "Reloaded!" # utf8を有効にする set-window-option -g utf8 on # peneの開始番号 set-option -g base-index 1 # ウィンドウ履歴の最大行数 set-option -g history-limit 5000 # コピーモードのキーバインドをvi風にする set-window-option -g mode-keys vi bind-key -t vi-copy v begin-selection # ウィンドウのインデックスを1か
Vim には Ctrl-A (以後 C-a) を押すとその時カーソルの下にある数をインクリメントしてくれるというプログラマに嬉しいキーバインドがあります。(C-x でデクリメント) これはたとえば 1 という文字の上で C-a を押すとその文字が 2 になり、続けて押していくと 3, 4, ... と増えていきます。9 の上で C-a を押すと 10 になり、続けて押していくと 11, 12, ... となります。また、3C-a と押すと一気に 3 増やしてくれます。なかなか賢いですね。 それから、-1 の上で C-a を押すと -2 ではなく 0 になるということに今日気づきました。 というのも、1−2 みたいなテキストの上で、2 を 3 に増やそうとして C-a を押したら 1-1 になったのでびっくりして気づいたわけです。(ちなみにそのまま C-a を押し続けると、1-2 => 1-
.tmux.conf .tmux.confとは、tmux起動時に呼び出される設定ファイルです。 ~/.tmux.confに記述します。 .tmux.confの例 # prefixキーをC-qに変更 set -g prefix C-q # C-bのキーバインドを解除 unbind C-b # vimのキーバインドでペインを移動する bind h select-pane -L bind j select-pane -D bind k select-pane -U bind l select-pane -R # vimのキーバインドでペインをリサイズする bind -r H resize-pane -L 5 bind -r J resize-pane -D 5 bind -r K resize-pane -U 5 bind -r L resize-pane -R 5 # | でペインを縦分割する
SkyWayへの登録(利用するためのAPI Keyの取得) 現在SkyWayは開発者向けに無償でAPIを公開しています。SkyWayを使うには、最初にAPIキーの取得を行います。 まずは、「http://nttcom.github.io/skyway/」にアクセスして「今すぐAPIキーを申し込む(無料)」ボタンをクリックします。 お名前 連絡先メールアドレス SkyWayを利用するドメイン(※ドメインは必ず1つは入力する必要がある) 利用規約を確認後、「利用規約に同意して申し込み」ボタンをクリックして完了まで進んでください(Web表示画面で、「Localhost用のAPIキー」が発行されるので、メモしておいてください。本番APIキーが発行されるまでは、そちらを使います)。 翌日くらいには(筆者の体験では)、メールで本番用APIキーが発行されて届きます。 実際に本番サーバーにサンプルファイル
tmux使ってますか? いまだに使いこなせていない方も多いのではないでしょうか。 もちろん私もその一人です。 今回は改めてtmuxの使い方を調べてみたのでまとめておきます。 複数の画面や領域を使いこなす まずは単発のtmuxをうまいこと使うための方法です。 tmuxにはウインドウとペインという概念があります。 ウインドウは簡単に言うと ある一つの画面 のことです。ペインは ある一つの領域 といったところでしょうか。 tmuxが起動したらPREFIX cと素早く押してみてください。 PREFIXはデフォルトではCtrl-bです。(変更の仕方はこちらの記事などをご覧ください) ウインドウ切り替え 複数のウインドウを作成したらウインドウを切り替えてみましょう。 これにはいくつかの方法があります。 PREFIX n:次のウインドウに切り替え(next) PREFIX p:前のウインドウに切り替え(
はじめに PeerServerはオープンソースのWebRTCクライアントのPeerJS用のSignalingサーバーです。 先日はPeerServerをIaaSとかにインストールする手順を書いたけど、いつの間にかHerokuがWebSocketをサポートしている(まだBeta)ことを知ったので、HerokuでPeerServer動かしてみました。 WebRTCってなんだ?PeerServerってなんだ?って人は前の記事から読んでみてください。 WebRTCのオープンソースソフトウェアまとめ オープンソースのWebRTCサーバー「PeerServer」インストール手順 とりあえず動かしたい方は一番下にHeroku対応済みのソースのリンクを貼っておいたので、それをcloneすればすぐにHerokuにデプロイできます。 PeerServerをHerokuで動かす手順 PeerServerをダウン
MITライセンス(エムアイティーライセンス)(MIT License)というのは、オープンソースソフトウェアのライセンスのひとつで、無料で自由につかうことができる(制限がほんのすこししかない)のが特徴です。 (*1) MITライセンスのもとで配布されているものは、改変でも、再配布でも、商用利用でも、有料販売でも、どんなことにでも自由に無料でつかうことができます。 そのために守らなくてはいけない条件は、「著作権表示」と「MITライセンスの全文」を記載する、という条件だけです。(なお、「MITライセンスの全文」を記載する代わりに、MITライセンスの全文が記載されているウェブページのURLを記載することも認められています。) 下記の文章は、MITライセンスの内容を、わかりやすく意訳したものです。 下記の条件を受け入れていただけるのであれば、誰でも自由に無料で、このソフトウェアをつかっていただくこ
こんにちは、ねづ(nzakr)です。 以前、自分のPCをwindowsからmacに以降したのですが、 Macでも開発環境も同様につくりました。WindowsだとXAMPPを使ってましたが、Macだとそういったアプリケーションを使わずとも設定できます。 そこで、apacheの基本的な初期設定からphp使用可能にするまでの過程を備忘録がてらメモしてみました。 前置き 作業環境 本記事執筆時はmac book Proの13 inchです。 OSは最新の10.13(High Sierra)でも同様に設定できます。 作業は基本的にmacのターミナル上で行います。 Finderから設定ファイルへアクセスは初期状態のままだとできません。 「黒い画面嫌い!」って人もそこまで難しくないので、とりあえずやってみるといいかも。 黒い画面に慣れると、いろいろ作業の幅が広がります(たぶん) ちなみに、よく使うターミ
はじめに tmuxのデフォルトのプレフィックスキーは Ctrl-b です。 プレフィックスキーを変更している場合は、~/.tmux.conf から以下のような設定項目を確認しよう。 以下の例では Ctrl-o にプレフィックスキーを割り当てています。 set-option -g prefix C-o bind o send-prefixそれでは本題のtmuxの最初に覚えるべきキーバインドについて見て行きましょう。 1.設定ファイルの再読み込み tmuxを使いはじめた頃は設定ファイルをいじることも多々あるでしょう。 そんなとき、.tmux.conf を変更しては再起動というのはあまりにも手間すぎます。 そこで以下の設定を追加します。 bind r source-file ~/.tmux.conf ¥; display-message "Reload Config!!"これで tmuxのプレフ
はじめに ブラウザ間でP2P通信が実現できれば、ブラウザ上で動作するP2Pアプリが作れて面白そうだなーと思ったのでWebSocketを使って実現してみました。仕組みについては以下で説明していきますが、私が実現した方法は限定的で実用性が低く色々と足りない部分もあるので、軽い気持ちで読んで頂けるとありがたいですw 仕組みの概要 なぜWebSocketを使うのか 従来、Webサーバとクライアント(Webブラウザ)間で非同期に通信するにはXHR(XMLHttpRequest)を用いてきました。基本的にこのXHRは以下の図のように同一ドメインとしか通信できないという制約がありました。*1 しかし、WebSocketのthe Origin-based security modelでは異なるドメインとも通信することが可能になります。WebSocketプロトコルでは、サーバとクライアント間で接続を確立する
vimエディタでは、テキスト編集で良く利用するコマンド、 カット(切り取り)、コピー、ペースト(貼り付け)などがキー操作で素早くできるようになっています。 x カーソル上の1文字を切り取ります。 dd カーソルのある1行を切り取ります。 dl カーソル上の1文字を切り取ります。 dw カーソル上の文字を含む1単語を切り取ります。 日本語の場合は正しく単語を取り出せないことがあります。 dは、指定した分だけ切り取る作業を指示します。 ddは特別に1行削除を意味しますが()、他のコマンドは、2つめのキーの指示する長さだけ切り取ります。 lは1文字を意味し、wは1単語(word のw)を意味します。 単独ではlは1文字分移動、wは1単語分移動なので、覚えやすくなっています。 コピーは、以下のコマンドを用いることで行うことができます。 yy カーソルのある1行をコピーします。 yl カーソル上の1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く