Re* Programming

Thoughts, stories and ideas.

勉強会とか

プログラマー向けデザイン勉強会を開催しました

9/21(土)にプログラマー向けデザイン勉強会を開催しました。 「プログラマー向けデザイン勉強会」http://connpass.com/event/3086/開催内容 8月にデザイナー向けプログラミング勉強会(DmP [http://designer-meets-programming.github.io/] )を開催しましたが、今回はその逆バージョンです。 PmDは座学形式で開催するということもあり最終的に60人弱に参加頂きました。 もともと東京で @satococoa [https://twitter.com/satococoa] さんが主催されている P4D [http://prog4designer.github.io/] というイベントがあるのですが、この勉強会はそこで行われた P4Dを パク・・・参考にさせて頂き開催しました。 私が第二回の D4P (プログラマ向けデザイン勉強会) に参加した経緯もあり、それを大阪でやってみたいというということから実現しました。 開催に伴い P4Dの @ken_c_lo [https://twitter.com/
1 min read
Node.js

Sails.js v0.8.9 の 各オブジェクトへのアクセスをまとめてみた

Sails.js の最新版 (記事作成時v0.9.3) が結構変わっているようなので、今まで使っていた v0.8.9 のtips(というには大げさですが)をまとめておきます。 Sails.js v0.8.9 0.8.x Documentation [http://08x.sailsjs.org/#documentation/new-to-nodejs] 導入については過去記事 [https://nantokaworks.com/?p=1101]を参照のこと Sails.js オブジェクト sails オブジェクト global["sails"] すべての sails 環境下で sailsオブジェクトが取得できる express
1 min read
勉強会とか

プログラマー向けデザイン勉強会を開催します #pmd01

9/21(土) に プログラマー向けデザイン勉強会(PmD)を開催します。 PmD? PmDは、Programmer meets Design の略です。 プログラマーがデザインを勉強したり、気軽に自サービスのデザインについて相談したりする会を目指しています。 今回は、デザイナー視点の話をセミナー形式で聞く会にしようと思っています。 プログラマー向けデザイン勉強会http://connpass.com/event/3086/DmP? 先日、デザイナー向けプログラム勉強会 [http://connpass.com/event/2884/](DmP)を開催しました。 こちらはプログラムを勉強したい人向けにワークショップ形式で行ないました。 第1回目は 外部サイトのRSSをJavaScriptで取得してサイトに表示してみようという内容でした。 勉強会の開催情報等はFacebookページなどで随時更新していきます。 DmP Facebook ページhttps://www.facebook.com/dmposaka 次回以降、色々なパターンで開催していこうと思っていますので、こちらも
勉強会とか

第14回 リクリセミナー 「Web制作の未来、あなたの未来」でLTをしてきました

7/27 第14回 リクリセミナー 「Web制作の未来、あなたの未来 [http://recreators.doorkeeper.jp/events/4128] 」でLTをしてきました。 こもりさんのメインセッション [http://www.slideshare.net/gaspanik/recre-vol14-web-design-process-for-the-future] から始まり、色々な立ち位置で仕事をしている6名のLTということで参加者としても非常に楽しみな内容でした。 こもりさんのお話ですが、Web制作の未来ということでデザイン寄りな内容に終始するかと思いきや、それだけにはとどまらずフロントサイドの開発手法・ツールの紹介など150分めいっぱいいろんな話を聞くことが出来ました。 他の5名のLTも非常に面白い内容でした。 私はプログラマとしての立場でLTをする予定だったのですが、もう話す内容が無いんじゃないかと思うくらいでした(笑) もはや与えられた8分というLTの時間すべてをメインセッションで紹介されたツールのデモで実演する方が良いかと思ったりもしたのですが、いや
1 min read
grunt

PhpStormからCakePHPをGrunt.jsで起動する

先日、第7回PHP関西勉強会 [http://kphpug.doorkeeper.jp/events/4708]でLTをさせて頂きました。 PhpStormとGrunt.jsで作るCakePHP快適開発環境 [http://www.slideshare.net/kamiyam/phpstorm-grunt] from kamiyam . [http://www.slideshare.net/kamiyam] 私の中ではLTの構成として * GruntとCakePHP * PhpStormとGrunt という二部構成だったのですが、まぁこれが5分で終わるはずもなくほどんど解説すること無く終わってしまったので、フォロー記事を書いてみました。 * PhpStorm 6.0.3 GruntとCakePHP まずは第一部、GruntとCakePHPの構成についてです。 * ・CakePHPのフォルダ構成などに合わせたビルド実行 * ・CSS/JS/PHP(CTP)の変更監視・LiveReload * ・PHP -Sを使ったサーバ起動(PHP5.4 <) * ・Apache・
6 min read
Node.js

Node.js勉強会 in 大阪 を開催しました

5/25 に (第二回)Node.js超初心者勉強会と、通常版の(第一回) Node.js勉強会を開催しました。 Node.js 超初心者勉強会 in 大阪http://atnd.org/events/39286Node.js 勉強会 in 大阪 http://atnd.org/events/39288 午前の超初心者向けのセッションもあったので、準備でいっぱいいっぱいでしたがなんとか無事開催することができてよかったです。 午前のセッション 本当に超初心者向けのセッションということで、インストールセッションを行ないました。 Node.jsを使う人が増えるといいなということと、使う人が増えてむしろ教えて貰いたい(?)ということで開催しています。 詳しい説明ではありませんが、Github にまとめていくことにしています。 * Node.js超初心者勉強会 資料 [https://github.com/kamiyam/Osaka-Node-Beginners/wiki] インストールして始めてみようという人にはいつでも参加してもらったり、
2 min read
勉強会とか

スーパーハッカソン2013に参加しました

5/11 大阪グランフロント内の イノベーションハブ で行われた スーパーハッカソン2013 に参加しました。 参加しましたというか、5/18まで参加していました。 スーパーハッカソン 2013http://super-hackathon.net/2013/ [http://super-hackathon.net/2013/ title=]行き場を無くした動物たちの問題を解決する1画面のサービス「pitto」 今回のスーパーハッカソンで完成したみなさんの作品の一覧は、非常に良いまとめ記事があることもあり、この記事ではその一週間の参戦記ということでまとめてみました。 ハッカソンとはなんぞ? ハッカソンという言葉を説明すると、> ある決められた一定期間の間、個人・あるいはチームを組み、プロダクトを完成させるというもの。 ハッカソンを行う期間は1大体日〜3日という場合が多いのですが、スーパーハッカソンでは前回同様一週間という形式になっています。 (内々ではスッパソンと呼ばれていました) チーム制とパーティ このハッカソンでは、チーム参加が必須となっていてそのチームも最大5人までとい
5 min read
Node.js

5/25(土) に第1回 Node.js 勉強会 in 大阪 を開催します。

概要 Node.jsの勉強会(第1回) を 5/25(土) に午前と午後の2部構成に分けて開催します。 名前が安直なんですが、 Node.js 超初心者勉強会 (午前)http://atnd.org/events/39286午前は、Node.jsのインストールから始めたい デザイナー・コーダー・プログラマなど 超初心者向けの内容です。 そのため、Node.jsのインストールから始めます。 Node.js 勉強会 (午後)http://atnd.org/events/39288 午後は、Node.jsのことをもう少し深く知りたい方が対象となる内容です。 Node.jsに関わる方に色々お話して頂く内容です。 今回は、発表者の方を募集せずに開催決定した事もあって私が立て続けに発表していますが、興味が有る方はぜひ発表をお願いします (^^; 2部構成について もちろん片方のみ参加・両方共参加。どちらでも構いませんが、超初心者向け勉強会は本当にインストールから始めます。
1 min read
勉強会とか

PHPカンファレンス関西2013にNode.js界隈の人として出演します

6/1(土)に大阪で PHPカンファレンス関西2013 [http://conference.kphpug.jp/2013/] が開催されます。 その会場 Aにて「多言語パネルディスカッション」(13:20〜14:20)というセッションがあるのですが、そこでNode.jsの人として出演することになりました。 セッションプログラムhttp://conference.kphpug.jp/2013/program/難しいながらも Node.js を続けてきて、声を掛けていただけるのは非常にありがたいことですし、嬉しい限りです。 PHPカンファレンスは普段PHPで開発しない私がなぜか毎年LTをしたり、遠方から来られるPHPに関わる方々と久しぶりに会えるイベントなので非常に楽しみにしています。 まだ募集は開始していませんが、興味がある方はぜひ参加してみてください。 200人規模のイベントは最近参加していないので緊張しそうですね。。。 (2013.5.1追記) 参加登録が始まったようです。http://conference.kphpug.jp/2013/information/entr
1 min read
Node.js

Node.js の MVCフレームワーク Sails.js が良さげなので少し試してみた

Sails.js [http://sailsjs.launchrock.com/] はNode.jsのフルスタックMVCフレームワークです。 Railsを意識しているフレームワークのようで、Node.js環境において非常に簡単にWebアプリを構成できそうです。 記事作成時の環境です。 * Node.js v0.10.1 * npm npm v1.2.15 インストール では早速導入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
11 min read
grunt

Yeomanでフロントエンドとバックエンドサーバを一緒に開発する

先月、HTML5など勉強会 [http://atnd.org/events/37124]に参加した時、雑談タイムで 「 yeoman を使ってバックエンドの開発とかできないですか? 」 という内容に対して、フォローとして 「 gruntでリバースプロキシ使えますよ 」 っていうお話をした。 そのまま記事に書かずじまいで申し訳ないなーと思っていたら、@bathtimefish [https://twitter.com/bathtimefish] さんがブログをアップされていた。 その記事、 YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 [http://bathtimefish.hatenablog.com/entry/2013/04/22/125127] でリバースプロキシを使った手法が挙がっていたのですが、gruntのモジュールを使うともう少し楽ができそう。 私は、easymock [https://github.com/cyberagent/node-easymock] を知らなかったですし、やはりyeoman [http://yeoma
4 min read
Node.js

WindowsでNode.js(npm)触るならnodistを使うといいかもしれない

たまにWindowsでもNode.jsを使いたい時無いですか? 私はnode.js(と言うよりnpm)を使ってツールをインストールしたい場合があり、一応(?)Node.jsをインストールしています。 ただNode.jsはバージョンが上がるのが早いので(公式の便利なインストーラがあるとはいえ)都度更新しなければなりません。 ある時ふとしたきっかけでWindows用の便利なバージョン管理ツール「nodist」を見つけてからそれを使うようにしています。 nodisthttps://github.com/marcelklehr/nodist nodistはWindowsのみで使えるNode.js用のバージョン管理ツールです。 下記環境でテストしてみました。 * Windows7 Professional 64bit * nodist v0.3.5 まず、nodistコマンドを使えるようにします。 任意の場所に zip [https://github.com/marcelklehr/nodist/archive/master.zip ] ファイルをダウンロードするか、git
2 min read
お知らせ

meteorworks(メテオワークス)として独立することになりました

一応、技術ブログ(のつもり)ですが、今回はご報告ということで。 私、@kamiyam [https://twitter.com/kamiyam] は4月2日よりmeteorworksという名前で、フリーランスとして独立することになりました。 このブログは今後も meteorworks のブログとして続けていくつもりです。 以前、私が何をしている(何が出来る)人かわからないという話があったので、自己紹介も兼ねて少し整理したいと思います。 Java、C#, PHP, Node.js でWeb関連のサービスのバックエンドを得意とするエンジニアです。 WordPressサイトやSNSのAPI連携、サーバインフラ周りをすることが多いと思います。 最近、特に力を入れているのは Node.js です。 Socket.io の面白さ、楽しさをそのまま伝わるような仕組みづくりを行なって行きたいと思います。 あと、大阪の勉強会で技術的な発表させて戴く機会が多くなってきました。 ただ 「知っている」ということと「人に伝えられる」ということは、まったく意味が違っていて自分の技術向上に対して
1 min read
grunt

grunt 管理下で Express(Node.js)を開発できるgrunt-init-express を公開しました

gruntで Expressを使った開発を行う環境を生成するgrunt-initテンプレートを公開しました。 grunt-init-express https://github.com/kamiyam/grunt-init-express 概要 grunt を使うとSass、LESSのコンパイルやWebSocketを使ったLiveReload、ファイルの圧縮など様々なことがことができますが、grunt-init コマンドを使うことでscaffoldingな構成を簡単に生成することができます。 すでに提供されているテンプレートを使用することもできますが、今回のようにベースとなるテンプレートを自分で作成することもできます。 公開されている grunt-init の 他のテンプレートについては過去記事 [https://nantokaworks.com/?p=964]を参照してください。 grunt-init-express はこんな機能があります。 gruntからNode.jsを実行 Node.jsをgruntのプロセスで管理するため gruntコマンドを使用します。 Node.j
3 min read
grunt

Grunt.js 処理中にsayコマンドを実行すると開発も気持ちスピーディに!?

はい、ネタです。みんな大好き sayコマンド。 MacOSではターミナルで say hogehoge と実行すると喋ります。 $ say hello world !! 「hello world!!」 出来ましたよね。 話は代わって、Grunt.js では grunt-exec を使うことでシェルコマンドが実行出来ます。 よくGruntの処理が終わったらGrowlで結果を表示したり、処理に応じていろんな出力を行っています。 そこでGrunt実行中に処理の内容をsayコマンドで喋らせれば面白いんじゃないかと思い、やってみました。 手順 ベースはこのgrunt-contrib-livereloadの記事 [https://nantokaworks.com/?p=827]です。 (今回の分もgist [https://gist.github.com/kamiyam/5160439/]に一式おいてあります。) 流れとしては次の通りです。 * grunt-exec をロード * execで使用するsayコマンドを記述 * 各タスクごとに設定したコマンド処理を埋め込む
2 min read
grunt

grunt-init を使えば色々なプロジェクトのひな形の生成が簡単に

grunt-init [https://github.com/gruntjs/grunt-init] を使うと色々なプロジェクトのひな形を簡単に自動で生成してくれるようになります。 Project Scaffoldinghttp://gruntjs.com/project-scaffoldingここでいう色々なプロジェクトとは 次の項目を開発する際のパッケージのことです。(grunt公式から引用) grunt-init-commonjs [https://github.com/gruntjs/grunt-init-commonjs]Create a commonjs module, including Nodeunit unit tests. grunt-init-gruntfile [https://github.com/gruntjs/grunt-init-gruntfile]Create a basic Gruntfile. grunt-init-gruntplugin [https://github.com/gruntjs/grunt-init-gruntplugin]
4 min read
grunt

matchdepを使ってGrunt.jsのプラグインを自動ロードする

Gruntが0.4系になってGruntのプラグインが細分化されました。 名称が grunt-xxx となるものが非常に多くなりましたね。 また、細分化された分 Gruntfile.js でロードするプラグインの数が多くなっています。 packege.json にこのような記述があったとしましょう。 { "name": "grunt-plugin-auto-load", "version": "0.1.0", "Dependencies": {}, "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-connect": "~0.1.2", "
1 min read
Node.js

Node.js 超初心者勉強会を開催しました

3/8 Node.js [http://nodejs.org/] を使って開発をしたことが無い、あるいは触ってみたいという方を対象に勉強会を開催しました。 Node.js 超初心者勉強会 in 大阪http://atnd.org/events/37147私は大阪Node学園 [https://twitter.com/ong_tweet](モード学園ではない)という Node.js の勉強会の運営スタッフをしているのですが、今回はそのNode学園とは別枠で開催する事となりました。 Node.jsは「インストール」するまでの敷居が高くてなかなか使うに至らない場合が多く、普段は別の言語を使っているプログラマ / サーバーサイドの処理を知る一歩としてNode.jsを触ってみたいデザイナー を対象にしようというのが今回の勉強会の趣旨でした。 また、ワークショップの性質上あまり多くの方を見ることはできないので 「npm install」 などのコマンドを知っている方はなるべく参加しないで欲しい(サポート役として参加なら可)としてみました。 当日のツイートは Togetter [http:/
1 min read
javascript

jQuery公式PluginRegistryに自作プラグインjqKeycodeBinderを登録したよ

概要 2013年1月17日、jQuery公式プラグイン・レジストリが公開されました。The jQuery Plugin Registry http://plugins.jquery.com/いままでの jQuery プラグインは、そのソースコード・実行ファイルが 作成者自身のサイトや Google Code [http://code.google.com/] / github [https://github.com/] などいろんな場所に置いてありました。 良さげな jQueryプラグインを見つけたその場でダウンロード出来ればいいのですが、時間が経って 「あのプラグインを紹介していたサイトはどこだっけ?」 みたいな話になることが多く、探すのも一苦労でした(よね?) jQuery公式でプラグインのインデックスを作って検索できるようにしよう。というのがこのサイトの目的だと思います。 実際のプラグイン本体はjQueryのサイトに配置せず、github に登録された Repository から指定されたファイルの内容を読み取り表示する。 というスタイルを取っています。 プラグインの開発
2 min read
grunt

Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜導入編〜

概要 解説編 [https://nantokaworks.com/?p=818]でも書きましたが、Yeoman [http://yeoman.io/]はビルドツールです。 ファイルの変更を監視してブラウザのリロードをかけたり、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 [http://yeoman.
6 min read
grunt

grunt-cli (grunt.js v0.4.x)で LiveReload を試してみた

GRUNT [http://gruntjs.com/]のバージョンがv0.4.0になり、記述・利用方法が一新されました。 Grunt 0.4.0 released [http://gruntjs.com/blog/2013-02-18-grunt-0.4.0-released] 主な変更点と言えば、 * grunt-cli をグローバルインストール * gruntを各プロジェクトごとにローカルインストール * プラグイン(contrib-xxxなど)は細かく細分化された * (プラグインはpackage.json に記述し npm install でインストール) Yeoman [http://yeoman.io/]も1.0から grunt-cli をインストールする形になっています。 手順 今回はLiveReloadを試してみたいと思います。 grunt-contrib-livereload [https://github.com/gruntjs/grunt-contrib-livereload]
2 min read
tool

Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜解説編〜

以前、勉強会で発表したスライドがあるのでこちらのほうが概要は理解しやすいかもしれません。 WEBアプリケーションビルド・ テストツール YEOMAN [http://www.slideshare.net/kamiyam/ss-15731663] from kamiyam . [http://www.slideshare.net/kamiyam] Yeomanとは Yeoman [http://yeoman.io/]は簡単に言うとビルドツールです。 もしかすると、一般的にビルドっていう言葉は聞きなれないかもしれません。サーバサイドの言語を書くプログラマなどを例にします。 大雑把ですが、プログラマは 「人が読み書きできるソースコードを書いて、PCが理解できる実行ファイルに変換する」 という作業をおこなっています。 (例外はありますが・・・) つまり、 * ・JavaやC#などのコードを書いて実行ファイルに変換(コンパイル) * ・使っているライブラリなどとに関連付ける(リンク) これがビルドです。とは言え、今はコードを書く際 IDE (VisualStudio、ecri
1 min read
eclipse

「第二回 JetBrainsユーザーグループ in 大阪」 で WebStormについて発表してきました

1/30 「第二回 JetBrainsユーザーグループ in 大阪 [http://www.zusaar.com/event/489010]」 で WebStorm [http://www.jetbrains.com/webstorm/]について発表してきました WebStormでできること [http://www.slideshare.net/kamiyam/webstorm] from kamiyam . [http://www.slideshare.net/kamiyam]WebStorm (とそれを含むIntelliJ IDEA)は HTML,CSS,JavaScriptのコード書くのに非常にいいよね。という内容です。 特にJavaScriptに対してが非常によく、私はNode.jsでサービス作るときにWebStormを使っています。 5分LTということであまり多くは伝えられなかったのですが、まぁ細かい所はまた別の機会に。 ともあれ、@yusuke [https:
2 min read
勉強会とか

2012 発表振り返りと 2013 新たな世界へ

年が明けてしまいました。おめでとうございます。 昨年もいろんな方にお声掛けを頂き充実した一年でした。 (若干遊びすぎた感もありますが・・・) まずは去年各勉強会で発表させていただいた資料など。 2012 勉強会スライド 大阪Node学園 1時限目Socket.IOとリアルタイムなナニか [https://nantokaworks.com/demo/slide/20120128/]大阪Node学園 3時限目Socket.IOハンズオン [https://github.com/kamiyam/Osaka-Node-Gakuen-3rd/wiki/%E5%A4%A7%E9%98%AANode%E5%AD%A6%E5%9C%92%EF%BC%93%E9%99%90%E7%9B%AE] プレゼン勉強会勉強会での発表がきっかけでこんなにもモテ男になった俺 [http://www.slideshare.
1 min read

消えていく儚さを演出するjQueryプラグイン jdtElementVanish

誰得プラグインは儚いです。一瞬の煌きの為に生まれては消え去っていきます。 そんなプラグインたちを表すかのようなプラグインが完成しました、儚いですね。 [https://static.nantokaworks.net/demo/jdtplugins/jdtelementvanish/index.html] [https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/jdtplugins/jdtelementvanish.zip] 使い方 jQueryとjdtelementvanishを読み込んで、実行します。儚いですね。<script type="text/javascript" src="js/jquery.js"></script> <script type="
1 min read