2013-07-02

Express(node.js) + socket.io + Mongoose(MongoDB) + CodeMirrorで Google Docs みたいなの作った

mongoDB node.js socket.io

複数人同時コーディングがしたくて作りました。
Newボタンで新規に作成してURLを友だちに教えると同時編集できます。

f:id:ytch:20130702225935p:plain

paircodr

機能

同時編集
相手のカーソル位置
コードハイライト（現在はrubyで固定）
皆大好きRictyフォント (プログラミング用フォント Ricty Diminished)

機能追加予定

GitHubのgistと同期
gistからのコードの取り込み
自分のコードを管理
コードハイライトを拡張子から自動的に判別
カーソルの色分け

まだまだ未完成なので空き時間を見つけて改善予定。。。
githubに公開してるのでpull request大募集です。fork me!
fmy/paircodr · GitHub

技術

Express

node.jsのアプリフレームワーク。
cakeでcoffeescriptとscssをオートコンパイル&オートアグリファイしてます。

socket.io

ブラウザ間の編集の同期やカーソルの同期に使ってます。

mongoose

MongoDBのライブラリです。node.jsでDBを使いたいときはコレが便利。

CodeMirror

編集部分です。メソッドがたくさん用意されていて便利です。

追記
node.js+socket.ioをherokuにデプロイしようとするとWebSocketではなくxhr-pollingになるのでおすすめしない！

krswfmy

2013-06-30

PHPアプリをAWSにCapistranoで自動Deploy

ruby 自動化 Capistrano

最近インフラをコード化するのが流行りっぽい。
Chef、Capistranoとかjenkinsとか。

その中で自動DeployツールのCapistranoを使ってみた。

デプロイ先のサーバはAWSのEC2。
EC2は起動するたびに、IPが変わるのでElastic IP設定済みとする。

まずCapistranoをgemでインストール

・capistrano

capistrano本体

・capistrano_colors

capistrano実行時の結果に色を付けてくれる

・capistrano-ext

deploy先の環境を切り分けることができる

・railsless-deploy

Rails以外のアプリをDeployするのに必要

インストール

$ sudo gem install capistrano
$ sudo gem install capistrano_colors
$ sudo gem install capistrano-ext
$ sudo gem install railsless-deploy

ルートディレクトリで以下実行

$ capify .

Capfileと
configディレクトリと、その中にdeploy.rb、
が生成されます。

・実行結果

[add] making directory ‘./config’
[add] writing ‘./config/deploy.rb’
[add] writing ‘./Capfile’
[done] capified!

deploy先の環境を切り分けるための環境ファイルを作ります。
今回はproduction環境にdeployすると仮定します。

まず、configディレクトリの中にdeployディレクトリを作ります。
その中にproduction.rbを生成。

$ mkdir config/deploy
$ touch config/deploy/production.rb

設定ファイルを書き換えます。
今回はgitを使用することを想定します。

deploy.rb

require "capistrano/ext/multistage"
require "capistrano_colors"
require "railsless-deploy"
require "rubygems"

# ↓アプリケーションのルートディレクトリ名となります
set :application, "APP_NAME"
set :user, "ec2-user"
set :deploy_to, "/var/www/html/#{application}"
set :deploy_via , :copy
set :use_sudo, true

set :scm, :git
set :repository,  "git@github.com:FOO/HOGE.git"

set :ssh_options, :port=>22, :forward_agent=>true, :keys=>"PUBLIC KEY FILE", :passphrase => "PASSPHRASE"

default_run_options[:pty] = true


# deploy後、/var/www/html/にcpするのに、
# ディレクトリの所有者をec2-userに変える。↓
namespace :setup do
  task :fix_permissions do
    sudo "chown -R #{user}:#{user} #{deploy_to}"
  end
end
after "deploy:setup", "setup:fix_permissions"

なお、deployするディレクトリは先に作成しておく。

次に環境先ファイルの設定。

/config/production.rb

role :web, "Elastic IP"
role :app, "Elastic IP"
role :db,  "Elastic IP", :primary => true

set :branch, "master"

以上で設定終了。
１番最初だけ以下を実行

$ cap production deploy:setup

その後からは以下で可能

$ cap production deploy

するとターミナルにバーっと実行結果が流れて、deployできます。
あと適宜、ディレクトリの実行権限変更してください

nayamagu

2013-06-16

テレビなんて見たくない　アプリ・サービスをytchブログのチームで作りました！

「もうテレビなんて見たくない」
年をとってテレビも大きな娯楽となった私。
けれども見たいテレビを探すのもちょっと億劫な毎日。

このアプリはそんなあなたのために、ツイート履歴を解析し、見たいテレビをレコメンドしてくれるサービスです。
レコメンドされたテレビ番組は一覧からすぐに通知設定ができます。

「テレビを知る」「テレビを見逃さない」
この２つの流れが、もっと便利で手軽になります。

2013-06-03

Android StudioでAndroid内部のソースコードを読み込む方法

Android Android Studio Java

Androidアプリでこの関数の中って何やってるの！？ってなるときってありませんか？
ListViewが更新されなくて困ってたりとかで、BaseAdapterのnotifyDataSetChangedメソッドって何やってるの？とか（現在進行中で困ってる）

そこでAndroid StudioでのSDK?のソースコードの読み込み方をググったんですが上手く出て来なかったので、気合いで設定を探したので、書きます

まず↓のようにプロジェクトの下の、プロジェクトと同じ名前のフォルダで右クリックして、Open Module Settingsを開きます。ビルドには影響を与えない的な表示が出ますが、ソースコードを表示させたいだけなので無視します。
f:id:ytch:20130603223945p:plain

PlatformSettingsでSDKsを選択し
Android 4.2.2（自分の場合）を選択し、Sourcepathタブを選択します。
そこで＋ボタンを押して、
SDKのsourcesフォルダの自分にあったバージョンを選択すれば、、
f:id:ytch:20130603224841p:plain

あとは開きたい関数などを⌘（Windowsだとctrl？）押しながらクリックすればOKです。

P.S.
ListViewが更新されなかった原因はregisterDataSetObserver、unregisterDataSetObserverを両方オーバーライドしちゃってたからでした。。

takam

2013-05-25

Vagrantでラクラク仮想環境

Vagrant

はじめに

Ruby on RailsなどのWeb開発をする人にとってMacで開発するのがメジャーとなってきています。
ハッカソンなどのイベントでもMacBook Airを使っている人を多く見るでしょう。

しかしいざ本番環境にデプロイするといった場合、ほとんどがCentOSやUbuntuといったLinuxを実行環境とする場合が多いです。
環境によって動作が多少変わってくることもゼロではありません。
そのため本番環境と同じOSの仮想マシンをローカルのマシンに作り、そこで動作確認するということが重要です。

Vagrantとは？

Vagrantは、OracleのVirtual Boxという仮想マシンを動作させるソフトを用いて、容易に環境構築、運用できるパッケージです。
今回はVagrantを用いた仮想マシン構築を紹介します。
Virtual BoxはWindowsやLinuxにも対応しているので、WindowsやLinuxでも同様に動かすことができます。

インストール

まずはVirtualBoxとVagrantをインストールします。

VirtualBox

Downloads – Oracle VM VirtualBox から自分のOSに合ったものをダウンロードしてインストールします。

Vagrant

Vagrant - Downloads から自分のOSに合ったものをダウンロードしてインストールします。

仮想マシンを作成

仮想マシンは本番環境と同じ物を指定します。このサイトに様々な設定のOSが用意されているので、本番環境に近いものを選びましょう。

A list of base boxes for Vagrant - Vagrantbox.es

今回はUbuntu precise 32を選んでみましょう。

$ vagrant box add precise32 http://files.vagrantup.com/precise32.box

作業ディレクトリ作成と設定ファイル

適当にvagrant用の作業ディレクトリを作成しておきます。さらにvagrant initを実行します。

$ mkdir ~/Documents/vagrant_test
$ cd ~/Documents/vagrant_test
$ touch hello_world.rb  // 適当なファイルを置いておく
$ vagrant init precise32

このコマンドによりVagrantfileという名前の設定ファイルが作成されます。このファイルは仮想マシンの起動設定を記述するrubyファイルとなっています。
例えば

  # config.vm.boot_mode = :gui

というコメントアウトされた行は仮想マシンをGUIモードで起動する設定で、この行のコメントアウトを外すと起動とともに画面が表示されるようになります。
今回は特に設定はいじらずそのままで利用します。

仮想マシンの起動

仮想マシンは

$ vagrant up

で起動します。

[default] VM booted and ready for use!
[default] Configuring and enabling network interfaces...
[default] Mounting shared folders...
[default] -- /vagrant

というメッセージが出たら起動が完了しています。
この仮想マシンへのssh接続は

$ vagrant ssh

を打つだけ！
このコマンドによりvagrantというユーザー名で仮想マシンにログインすることになります。
さらにこのユーザーは既にsudo権限を持っていてパスワードを入力する必要がなく、仮想マシンを操作する上でとても便利です。

$ whoami
vagrant
$ sudo pwd
/home/vagrant

仮想マシンに入ったら /vagrant ディレクトリを見てみましょう。

$ ls /vagrant
hello_world.rb  Vagrantfile

先ほどさり気なく作ったhello_world.rbを見ることができます。Vagrantは vagrant init したディレクトリを仮想マシン内の /vagrant に共有してくれるのです。
ここまで見ただけでも十分Vagrantの便利さを感じるはずです。

仮想マシンをシャットダウンするには

$ vagrant halt

とします。

またこんど、chefを使った自動環境構築について書きます。

krswfmy

2013-05-21

PDOでデータベース接続

PHP

久々にPHP触った。
それで、DBへの接続とかいつも通りに

<?php
mysql_connect("LOCALHOST", "ROOT", "");
mysql_select_db("DB_NAME");
mysql_query("QUERY");
?>

こんな感じか、もしくはmysqliなんちゃらを使っていたわけですが、
最近はどーやら違うらしい。
それが、PDO(php database object)らしい。

PDO

メリットとしては
・データベースに依存しない
・処理が早い（らしい）
・2回目の発行はキャッシュが効き早い

PHP5から標準になってるらしいから、かなり前からあったはずなのに
全然知らなかった。
技術書ほとんどmysql関数だったし。

使い方

これで接続。（MySQLの場合）

<?php
  $dsn      = "mysql:dbname=DATABASE_NAME;host=LOCALHOST";
  $user     = "USER_NAME";
  $password = "DATABASE_PASSWORD";

  try
  {
      $pdo = new PDO($dsn, $user, $password);
  }
  catch(PDOException $e)
  {
      exit("データベースに接続できませんでした".$e->getMessage());
  }    
?>

クエリー生成、発行

prepareで準備。
必要であればパラメータをbindして
executeで発行。

<?php
  $stmt = $pdo->prepare(
     "SELECT *
      FROM   user
      WHERE  name  = ?
      AND    email = ?"
  );

  $stmt->bindParam(1, $name, PDO::PARAM_STR);
  $stmt->bindParam(2, $email, PDO::PARAM_STR);
  
  $stmt->execute();
?>

取り出し

<?php
  while($data = $stmt->fetch(PDO::FETCH_ASSOC)){
    //$data handle
  }
?>

これで、ひと通りの処理は可能。
これから使うデータベースがMySQLだけとは限らないから
もう少し、勉強してみよう。

他にも、練習用で使ったスクリプトをgitに置いたんで見てください
https://github.com/naoto0822/PDO

nayamagu

2013-05-20

「Chromeで単語を選択 → そのままマウスジェスチャで任意のサイトにて単語検索」をしてブラウジングを快適にする方法

できるようになること

Webページを見てる時、調べたいフレーズが登場することはよくよくあることです。
未知の単語、出てきますよね。
そのときどのような手順でそのフレーズを検索しているでしょうか。
簡単にできればできるほど、きっと素敵です。

ここでは、以下の流れでできるようにします。

気になるワードが目に飛び込んでくる。
そのフレーズを選択。
マウスジェスチャ実行。
任意のサイトでそのフレーズが検索され、新規背面タブで表示される。

Google検索、Amazon検索、Weblio検索、Yahooリアルタイム検索、YouTube検索など、様々なサイトですぐに検索できるようになります。

方法

マウスジェスチャは任意のプラグインを利用してください。
ただし自分で記述したJavaScriptを実行可能な拡張であることが必要です。

Googleで検索する場合は、マウスジェスチャを実行した際に以下のJavaScriptが実行されるようにします。

var url = "https://www.google.co.jp/search?&q=%s";
searchChoosedText(url);

function searchChoosedText(targetUrl) {
    var selectedText = window.getSelection().toString();
    targetUrl = targetUrl.replace("%s", encodeURIComponent(selectedText));
    openNewBackgroundTab(targetUrl);
}

function openNewBackgroundTab(url) {
    var a = document.createElement("a");
    a.href = url;
    var evt = document.createEvent("MouseEvents");    
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

私の好みにより、新規背面タブで結果ページを表示するようにしています。

コードの一行目を任意のページに変えることで、好きなサイトですぐに検索できるようになりますね。
マウスジェスチャ実行時に選択されているテキストは、 %s に入ります。
そのコードをそれぞれのジェスチャに関連付ければ、その場で任意のサイトで検索できるでしょう。

例えば以下の様なサイトで使えますね。

// Weblio
var url = "http://www.weblio.jp/content/%s";

// YouTube
var url = "http://www.youtube.com/results?search_query=%s";

// Amazon
var url = "http://www.amazon.co.jp/s/?field-keywords=%s";

// Yahooリアルタイム検索
var url = "http://realtime.search.yahoo.co.jp/search?p=%s";

仕組みとしては、aタグを生成し、そのaタグにマウスクリックイベントを実行することで新規背面タブで開いています。

調べ物をしていると未知のワードに遭遇することはよくあることです。
そのような頻繁に行う流れを簡単にしてくれるため、ブラウジングがより快適になります。

atson