はてなブックマーク

Passportについて 以前、everyauth を使ってパスワード認証･SNS認証など実装していましたが、なんとなく自分には取っ付き辛く、Passport を見つけてからこちらを採用するようになりました。 Passsport http://passportjs.org/ https://github.com/jaredhanson/passport Passport は一般的な ID/Password認証 の他に各SNSを使ったOAuth認証までサポートしています。 (認証と権限設定のみなので、投稿機能などの実装は SecretTokenをその他のパッケージに譲ることになります) passportモジュールは、Passportの骨格となるパッケージとなり、その他 passport-github や passport-twitter などがそれぞれの認証機能を提供しています。 今回は、p

IBM developerWorks の MEAN Stack で構成されたチュートリアルの記事を参考に、Sails.jsの実装方法で再構成してみました。 Node.js、Express、AngularJS、および MongoDB を使用してリアルタイム・アンケート・アプリケーションを作成する http://www.ibm.com/developerworks/jp/web/library/wa-nodejs-polling-app/ アプリに必要なもの Node.js Node モジュール: Sails.js Node モジュール: waterlineモジュール (sails-redis / sails-mongo / sails-postgresql など) JavaScript フレームワーク: AngularJS データベース: MongoDBなど ※ MongoDBを使わなくても

Sails.js のバージョンがついに v0.10へとアップデートしました。 今回はRC版がコンスタントに上がっていき、色々機能的なテストを行っている印象でした。 幾つかv0.9系からの変更点もあるので、ここで纏めておきたいと思います。 Node.js: v0.10.26 Sails.js v0.10.2 sails コマンド sails new --linker オプションが廃止され sails-linker はデフォルトで使用するようになりました。 対象ファイルは/config/pipeline.js に設定します(後述) sails generate api v0.9.x では sails generate @Hogeを実行すると HogeController.js@Controller と Hoge.js@Model が生成されました。 これはHoge@CRUDを実現するために、m

6/21(土) 名古屋で開催された Frontrend、Frontrend in Nagoya へ参加しました。 Frontrend in Nagoya http://html5nagoya.jp/frontrend/ 事の発端?は、Node.js大阪 勉強会 に 潜入調査しにきた 来てくださった @girigiribauer が運営に携わっていることと @hiloki が frontrend 静岡、大阪に引き続き出演されるということからでした。 いろんな経緯があって参加することを誰にも言っておらず、関西圏の知り合いはまったく参加していなかったのですが、懇親会でも楽しくお話しさせていただいたり非常に楽しい勉強会でした。 Frontrend in Nagoya - togetter http://togetter.com/li/683262 Frontrendはフロントエンドのトレンド(?)

この記事は Node.js Advent Calendar 2013 20日目の記事です。 概要 Node.js というか express で使っているテンプレート ejs でのお話です。 expressで実装していて、この書き方で良いのかなという疑問があるので今回書いてみました。 Node.jsの フレームワーク、express ではデフォルトでテンプレートエンジン Jade を使用しますが、オプションで EJS を使用することも出来ます。 以下、EJSでの利用フロー。 EJS を使う上で共通部分を一括管理したいので express-locals をインストールし、app.js で反映させます。 npm install ejs-locals --save この ejs-localsで Viewの 共通レイアウトを layout.ejs として メインレイアウト index.ejs を表示

最近、HTML,CSS,JavaScript を記述するのに、Jade,Sass,LESS,Stylus,CoffeeScript などのプリプロセッサが便利で使っていますが、CSSFrameworkを利用することもありファイルが複数に分かれていることが多くなってきました。 grunt に限らず自動化処理を実行して、本番環境用に結合( concat )･圧縮(minify) して複数あるファイルを1つにまとめてアップロードする方も多いと思います。 しかし、HTML内で CSS( meta link=~ ) JavaScript (script src=~) は 本番環境では minifyファイルを、開発環境では元々の複数にわかれたファイルのパスを設定することになります。 (Sassのinclude 等を使えば最終的には1ファイルに纏まりますが、CSSファイルのみの構成などもあるので････

Sails.js はNode.jsのフルスタックMVCフレームワークです。 Railsを意識しているフレームワークのようで、Node.js環境において非常に簡単にWebアプリを構成できそうです。 記事作成時の環境です。 インストール では早速導入 globalインストールでSails.jsをインストールします。 $ npm install -g sails@0.8.9 (2013.5.7 修正) npm install -g sails → npm install -g sails@0.8.9 バージョンを確認 $ sails -v info: v0.8.9 $ sails (-h) debug: Welcome to Sails! (v0.8.9) info: Usage: sails <command> sails lift Run this Sails app (in the cur

たまにWindowsでもNode.jsを使いたい時無いですか? 私はnode.js(と言うよりnpm)を使ってツールをインストールしたい場合があり、一応(?)Node.jsをインストールしています。 ただNode.jsはバージョンが上がるのが早いので(公式の便利なインストーラがあるとはいえ)都度更新しなければなりません。 ある時ふとしたきっかけでWindows用の便利なバージョン管理ツール｢nodist｣を見つけてからそれを使うようにしています。 まず、nodistコマンドを使えるようにします。 任意の場所に zip ファイルをダウンロードするか、git clone git://github.com/marcelklehr/nodist.git します。 ndist コマンドが使えるようにパスを設定します。 C:Userskamiyamnodistbinnodist 私はユーザフォルダの下

先月、HTML5など勉強会に参加した時、雑談タイムで 「 yeoman を使ってバックエンドの開発とかできないですか？ 」 という内容に対して、フォローとして ｢ gruntでリバースプロキシ使えますよ ｣ っていうお話をした。 そのまま記事に書かずじまいで申し訳ないなーと思っていたら、@bathtimefish さんがブログをアップされていた。 その記事、 YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 でリバースプロキシを使った手法が挙がっていたのですが、gruntのモジュールを使うともう少し楽ができそう。 私は、easymock を知らなかったですし、やはりyeoman 使ってる人が周りにあまりおらず、前回の勉強会は非常に勉強になったので、ここは一つ御礼の意味を込めてブログを書こうと思います。 ということで、yeoman(grunt) を使ったバックエンド

ここでいう色々なプロジェクトとは 次の項目を開発する際のパッケージのことです。(grunt公式から引用) grunt-init-commonjs Create a commonjs module, including Nodeunit unit tests. grunt-init-gruntfile Create a basic Gruntfile. grunt-init-gruntplugin Create a Grunt plugin, including Nodeunit unit tests. grunt-init-jquery Create a jQuery plugin, including QUnit unit tests. grunt-init-node Create a Node.js module, including Nodeunit unit tests. 例えば

概要 解説編でも書きましたが、Yeomanはビルドツールです。 ファイルの変更を監視してブラウザのリロードをかけたり、Sass LESSのコンパイルを行い、最終的に実行ファイル(プレーンなHTMLやCSSファイル)を出力したりする機能があります。 今回は Yeoman1.0 (beta) のインストールについて書きます。 (※ 2013/02/21時点で安定版 はv0.9.6、v1.0.0は beta の開発版です) Yeoman インストール Yeoman を利用するために、以下3つをインストールします。 $ npm install -g yo grunt-cli bower yo Yeoman本体です。 v0.9まで yeomanコマンド ですべて実行していたのですが、yoコマンドに変更されました。 grunt-cli Grunt はタスク管理ツールです。 LiveReloadやSas

2/25 と 3/4 に福井で行われたハッカソンに参加しました。 最初は冗談半分に「行かなーっ！」って言ってたのですが、なぜか本当にしかも前日から福井入りしておりました。 顔合わせ 初日の 2/25 はアイデアソンということで、何チームかに分かれテーマを元にアイデアを考えていきました。 その日のうちに翌週のハッカソンに作るサービスと各個人の役割分担を決めその日は解散（昼12時！）ということなのですが、会場は17時まで使わせてもらえるということで、各チームともギリギリまで作業に没頭していました。 私の参加したチームは「ソーシャル」の枠で、ソーシャルネットワークを使ったCSS3やJavaScriptで動きのあるアルバムサービスをつくろうことで案を出しあい、各々の持ち場を決めるところまでだったと思います。 情報の共有 それぞれが遠方で実際にやり取りが難しいので、Facebookのグループで情報の

それでもRSS.Graffitiを使うのであれば、以下お付き合いをば。。。 Facebookへの投稿 Facebookに流す更新情報は 個人アカウント or Facebookページ どちらでも設定できますが、FacebookページはFacebook内の広報ページのようなものなので、登録しておいて損はないと思います。 Facebookアプリ RSS.Graffitiを利用出来るように設定します。 アプリ画面へアクセスします。 アプリを使用していないので、プロフィール画像の横に Status: Authorization Requiredと表示されています。 使用するには、中央の黄線枠の下部 「Click HERE to autorize RSS Graffiti」 ボタンを選択します。 すると、認証画面に移るので認証します。 「許可する」を選択して、アプリ画面へ戻って来ると ステータスが S

少し前 カゴヤVPS がベータから正式版に移行しました。 私は カゴヤVPS のベータ版で初めてLinuxを触り始め、最初 CentOS で構築していたのですが、正式版申込のタイミングで Debian 環境に移行しました。 将来、カゴヤVPSで Debian6 のアプリケーションパックが提供されると思うのですが、今のところ Debian5 までなので、アップグレードから始めました。 すでに Debian6 のアプリケーションパックが提供されていれば Debian5 （lenny）→ Debian6 (Squeeze) へアップグレードの作業は不要です。 また、他のVPSでもDebianであれば大体の手順は変わらないと思います（適当） 以下、後から書いたので抜けがあるかも知れませんが、備忘録として都度追加していきます。 Debian6へアップグレード $ cd /etc/apt/ # cp

「WordPress Advent Calendar 2011」も半分を折り返してしまいました。 ということは、今年は残り半月も無いわけですね、恐ろしいですね; どうも、@anticyborg さんからバトンをうけました @kamiyam です。 WordPressについて WordPressはその多機能さもさることながら、やはり大きな特徴は非常に活発なコミュニティーの存在ではないでしょうか。 また、最近では Twitter、FacebookなどのSNSを始めとしたソーシャルグラフが非常に有用で、そのつながりから沢山の情報を得ることが多くなってきました。 そこで OGPを正しく設定して情報を有効に伝えましょう。というのが今回のお話です。 Open Graph Protocol OGP ( Open Graph Protocol )は 指定したURLコンテンツの内容をあらわす情報とその仕組み

先日CSSNite LP18に参加したのですが、中でも一際気になったjQuery Templateの機能を掘り下げたいと思います。 jQuery Template? 利点 これを使うと何が嬉しいかというと、表示のためのHTMLとロジック処理のためのJacaScriptをきちんと分離出来るということが挙げられます。 （※ちなみに、まだbetaです） サンプル 例えば、こんなHTMLがあったとします。 サーバーサイドからある書籍のリストをAjaxでロードしてリスト表示します。 <div> <h4>書籍タイトル</h4> <dl id="bookList"> <!-- <dt>逆襲ノマド</dt> <dd>新しい仕事</dd> <dt>黄昏サスペンデッド</dt> <dd>今日は早く帰ろう</dd> <dt>やる気 not Fount!</dt> <dd>ノーコメント</dd> --> </dl

"電子書籍"が題名に含まれているのですが、電子書籍という範囲だけで括ってしまうのは非常にもったいないくらいの内容でした。 電子書籍のコンテンツを提供するフォーマットは色々ありますが、その一つにePubというものがあり、特にePub3.0 ではHTML5でも記述できるという点が挙がっていました。 仕様上、HTML5を使えるということで、「まだ先の技術だから・・・」と敬遠していた色々な表現が紹介されていて非常におもしろかったです。 また、HTML5では文書のアウトラインを強く意識することになるので、電子書籍との相性も良い点が挙がっていました。 他にも、書籍という性質上、「表示段組の設計」や「色々なデバイスを意識したレイアウト」を考えたアダプティブデザイン・レスポンシブデザインを考慮しなけらばならないということで、電子書籍に対応できるフレームワークなども紹介されていました。

実際にはTSVですが・・・ リンク先にもありますがWindows環境下のExcel（2000）での確認しかしていません。 たぶんWindowsならどのバージョンでも大丈夫だとは思いますが・・・ 2010/05/10追記Office 2008 for Mac:評価版でも正常に開ける事を確認しました。 CSV出力に関してfputcsvでいけるかと思ったんですが、PHPはよくわからくてうまくUTF-16で出力できず、下記のサンプルで・・・ ソースファイルはUTF-8での保存を想定しています。 <?php header ("Content-Type: application/octet-stream"); header ("Content-Disposition: attachment; filename=" . "hoge.csv"); header ("Content-Description:

どんなアプリ? このアプリはFacebook上でTwitterのタイムラインを表示して、そのTweetの中で『いいね！』することが出来ます。 『 このツイート面白いんだけど、RTするほどでもないし、Favするのもちょっと違うなー 』という時、Facebookで気軽にいいね！する という仕組みです。

3/5 兵庫県立大学神戸キャンパスで行われた 「Web制作者、開発者の為のFacebook勉強会」 に参加しました。 また、今回Lebe Inc.の藤井さんにお声掛け頂き発表させて頂きました。 勉強会タイムテーブル Facebookについて制作者,開発者視点でLT Facebook 基礎編 Facebook アプリ開発編 ソーシャルゲーム CityVille編 ワークショップ Facebook提案を考える Facebookについて制作者,開発者視点でLT なんかLTも豪華なメンバーだったんです。 肩パッドさん(@katapad) ひろきさん(@hiloki) シナチクさん(@_sakotsu) 須川さん(@sugawa) 小山さん(@coyummy) Facebookについて、いろんなお話を聞くことができました。 特にFacebookの今後については、やはりみなさんだいたい同じ印象をお持ち

JavaScript Advent Calendar 2010 の23日目です。 最近WebSocketを色々試してました。 WebSocketはブラウザとサーバ間で双方向通信が出来るプロトコルです。 WebSocketChatやWebSocketSlideとかを作りましたが、Javascript側があまり慣れていないこともあってどうしても表示処理部分とWebSocketオブジェクトの管理がごちゃごちゃになりすぎるので、WebSocket接続イベント登録用のライブラリを作りました。 使う人は中身を知らなくてもwebsocketのイベント時の表示を考えるだけで大丈夫なように作ったつもりです。 表示部分がないのでライブラリファイルの使い回しが可能ですね。 本当ならecho serverを作って試してもらうとかする方が良かったんですが、すいませんタイムリミットです。 jWebSocketDele

誰得プラグインは儚いです。一瞬の煌きの為に生まれては消え去っていきます。 そんなプラグインたちを表すかのようなプラグインが完成しました、儚いですね。 使い方 jQueryとjdtelementvanishを読み込んで、実行します。儚いですね。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jdtElementVanish.js"></script> <script type="text/javascript"> jQuery(function($) { //プラグイン実行(bodyを選ぶとより儚いですね) $( "div#container" ).jdtElementVanish( { "interval" : 1 * 1000, "ani

JavaでGmail。 public static void main(String[] args) { MailSender oMail = new MailSender( "smtp.sample.com", 25 ); //Gmail送信 //MailSender oMail = new MailSender( "smtp.gmail.com", 465, "xxxxx@gmail.com","xxxxxxx" ); oMail.addToAddress( "xx1@local.jp","送信先" ); oMail.addToAddress( "xx2@local.jp" ); oMail.addCCAddress( "xx3@local.jp" ); oMail.addBCCAddress( "xx4@local.jp","BCC" ); oMail.setFromAddress(

Maven ■ 説明 Mavenはライブラリーファイルの管理を一元化するツール。 インターネット上のレポジトリからjarファイルをダウンロードして使えるので、便利。 初回のダウンロードは結構時間かかります。インターネット接続してないと使えません。 ローカルのレポジトリを使う手もありますが。 ■ インストール これもダウンロードして好きな所に展開。 ■ 環境変数を設定 一応mavenのチェック コマンドプロンプトで mvn –v を実行。 動けばOKです。 M2Eclipse ■ 説明 Eclipseでmavenを使うとか、mvnで生成されたwar(Webサイト)プロジェクトを簡単に管理とか出来ます。 ■ インストール アップデートサイトhttp://m2eclipse.sonatype.org/sites/m2e/ から更新します。 ■ プロジェクト作成 「ファイル」→「新規」→「mave

FireWorksの長方形角丸で縦横の長さの比率が同じならきれいに角丸が出来ますが、縦横の比率が違うとどうも崩れる。 で、探していたらバシャログさん経由できんくまデザインさんの記事が。。。 そのままではCS5で動かなかったので、改変。 元々の動きが分からないのですが、たぶんFireWorksの仕様上『角丸長方形』のまま角をキレイにするのは難しそう。 なので、『長方形』の形式で角を変更するようにしています。 きんくまデザインさんのもとコードはこちら→Fireworksでくずれた角丸を元通りにするコマンド （きんくまデザインさんの記事でライセンスがMITになってたんですが、ライセンス/著作権者名も明記がなかったんですが、どこに書くのがよいのかわかりません・・・） CS5用 var replaceroundRect = function() { //クリップにコピー fw.getDocument