albatrosary's blog

UI/UXとエンタープライズシステム

2014-01-01から1年間の記事一覧

ブログ「JavaScriptの関数 - console.blog(self);」を読んで試してみた

JavaScriptの関数に関するブログ JavaScriptの関数 - console.blog(self); が書かれてましたので実際に色々試してみました。ちなみにコンソールはchromeなら「ツール」-「デベロッパーツール」で開くことが出来ます。コンソール無いでの改行は「shift+enter…

SPA開発のために 〜 Express編およびmongoose編 〜

前回、データベースのインストールを行ったので、今回はアプリケーションサーバの構築を行います。今回はExpressを利用します。Expressはnode上で動くWeb Applicationフレームワークです。日本語ドキュメントもあります。インストールはいたって簡単でnpm in…

SPA開発のために 〜 MongoDB編 〜

管理しているサイトを少し高機能にするためAngularJS + node.js + express + mongoose + mongoDBの組み合わせでアプリケーション開発を行いたいと考えています。今回はそのmongoDB編で概要をまとめます。 尚、mongoDBのバージョンが2.6.3になりコマンドやコ…

デザイナーだってYEOMANを使いたいんだ! 〜 とあるデザイナーのためのYEOMANマニュアル - gruntコマンド編 〜

開発中もっとも使われるコマンドはgruntです。このgruntはJavaScriptで記述されたタスクランナーです。定義がGruntfile.jsにされていますので少し見ていきます。ここが分かると grunt serve grunt build 以外にもコマンドがあるのが理解できます。 ジェネレ…

デザイナーだってYEOMANを使いたいんだ! 〜 とあるデザイナーのためのYEOMANマニュアル 〜

「YEOMANを使う」ということはちょっとしたことだけ我慢すれば簡単に使えます。では何を我慢するのかですが「黒い画面を使う」ということを少し耐えればとても便利なツールになります。 今回は、とあるデザイナーのための利用マニュアルとして作成しています…

DartがECMA標準だって?!

米グーグルはオープンソースのプログラミング言語「Dart」が国際標準化団体ECMAの正式仕様として承認されたことを発表した。 次はenumとdeferred loadingの正式サポートを:グーグルのプログラミング言語「Dart」、ECMA標準に - @IT この記事を読んでびっく…

そんなにメンテナンスが大変ならAngularでも入れなよ 〜 簡単なサイトをAngularに変えてみた 〜

html5jエンタープライズ部のサイトはベタなHTMLで出来ているのだがサイトをメンテナンスしていてイライラがピークに達したためAngularのルーターを使うことでイライラを解消しました。つまりメンテナンス制の向上というやつです。 JavaScriptフレームワーク…

AngularJS、KnockoutJS、Sencha Ext JSで実装されているデータバインディングの違いをコーディングすることで明らかにする!

AngularJSを筆頭にKnockoutJSとSencha Ext JSでもデータバインディングが実装されました。この違いを簡単なサンプルを作ることで比較します。JavaScriptフレームワーク選定で個々の特徴を他者から聞き取るだけでなく、実際に同じ機能を様々なフレームワーク…

「Running the Gaia codebase」をやってみた!Firefox OSのビルド&エミュレータを動かしちゃった

Sencha Ext JS 5のコードリーディングは疲れたのでひとまず休憩ということで「Firefox OSのビルド&エミュレータ」をやりました。こちらにマニュアルがあります。 Running the Gaia codebase - Mozilla | MDN サイトを見ればできますが手順の整理 「Running t…

「JavaScriptの実態に迫る AngularJSを選ぶ理由 ~ハンズオンで学ぶ、基礎からのコーディング手法~」に参加しました

6/18 Open Network Space でAngularJS Japan User Group管理人-金井さんによるAngularJAハンズオンがありましたので参加させて頂きました。内容は初心者向けのハンズオンで金井さんのライブコーディング&解説を行いつつ、それを見ながらコーディングを行うと…

YEOMANでハイブリット開発(generator-cordova)

前回、PhoneGapジェネレータでハイブリットアプリを開発するYEOMANジェネレータを紹介しましたが、今回はCordovaです。といっても殆ど同じではあります。単純にジェネレータの作りが違うということです。 環境構築 $ npm install -g generator-cordova $ mkd…

YEOMANでハイブリット開発

HTML5かネイティブかという話でいいとこ取りのハイブリットアプリケーションですが、エンタープライズな現場の方から色々お話をお聞きすると、ハイブリットには行かずHTML5かネイティブに寄るようです(HTML5というよりWebという表現が正しいです)。 ハイブ…

黒い画面使わなくたってGruntイケル! 〜 Chromeを拡張するかっこいい(と思うんだけど)「Grunt Devtools」〜

WebデザイナーやWeb開発入門者にとって黒い画面は超難易度が高いというお話をお聞きします。よくYEOMANのお話をさせて頂いているのですが、そのときでも「黒い画面は・・・」という声が多数寄せられましたので「じゃー」ということで色々調べてみました。 Ch…

D3.jsを使ってみたyo

Data-Driven Documents(データ駆動ドキュメント)、略してD3と言います。データとDOMを結びつけデータを可視化します。 具体的なサンプルが D3.js - 日本語ドキュメント にありますのでご確認ください。そしてD3.jsはデータに基づいてドキュメントを操作する…

knockoutjsとYEOMANと、knockoutを味見するにもbower

knockoutjsのサンプルソースを見ながら味見をします。YEOMANのgeneratorにknockoutがあるのですがあまりメンテナンスされていないのでgenerator-webappにbowerコンポーネントとしてknockoutjsを追加します。 今回は 一般的なknockoutjsのインストール方法 サ…

エフスタ!!春のITまつり ~エンタープライズ開発の全て!~ 参加レポート

4/12(土)エフスタ主催の「エフスタ!!春のITまつり ~エンタープライズ開発の全て!~ 」で登壇してきました。今回のテーマが「エンタープライズ開発(業務システム)の全て」ということですので登壇だけでなく刺激の多いイベントとなりました。 本日のアジェ…

「IE6はEOLだが、これからのWeb系システムは本当にブラウザでいいのか? - エンタープライズWebプラットフォーム大戦争」〜 ナイトセミナー・レポート 〜

4/9に「さくらインターネットセミナールーム(東京都新宿区西新宿4-33-4 住友不動産西新宿ビル4号館 6F)」にて第9回html5jエンタープライズ部ナイトセミナー「IE6はEOLだが、これからのWeb系システムは本当にブラウザでいいのか? - エンタープラ…

「RとRuby によるデータ解析入門-読書会」 〜 参加レポート 〜

4/5(土)に兵庫県尼崎市で行われた「RとRuby によるデータ解析入門-読書会」への参加レポートです。RもRubyも少し触ったことがある程度なので復習の意味も含め勉強してきました。詳細はこちらです: 4月5日 R と Ruby によるデータ解析入門 読書会 第1回(兵庫…

DEMOを見て感じるHTML5!!~そして時代に必要なスキルも教えちゃいます!!~ 参加レポート

本日は渋谷ヒカリエにてMicrosoft MVPでもある山崎大助さんの「DEMOを見て感じるHTML5!!~そして時代に必要なスキルも教えちゃいます!!~」セミナーへ参加させて頂きました。さて、HTML5を利用する上でのスキルというのはどのようなものでしょうか?HTML…

オープンソースカンファレンス in 浜松に参加して

2014/3/22「オープンソースカンファレンス in 浜松」へ参加しました。業務アプリケーション開発に関する15分の登壇とYEOMANのデモ展示しました。まだまだ「いまどき」の開発環境については普及していないという印象を受けました。ので、今後もOSCをベースと…

YEOMANをインストールしよう!(だけど解説はMACだけね)

Single-page Applicationなどブラウザ上で動くアプリケーションを開発するときにかなりイカしてる統合開発ツールYEOMANのインストール手順を記載します。過去インストールはちょっと大変といった発言をしたため修正です。 nodebrewのインストール nodebrewを…

YEOMANハンズオン in 福岡

昨日(3/15(土))福岡にてYEOMANハンズオンが行われました。ハンズオンの内容は YEOMANをインストールして色んなgeneratorを使ってみよう generator-generatorを使ってみよう いろんなgruntを使ってみよう です。 YEOMANのインストールとgenerator YEOMANの…

gruntを使おう 〜 CoffeeScriptもlintっちゃうyo 〜

CoffeeScriptを使う機会が増えましたが、コーティングルールを書いて周知させるのも面倒なのでlintしちゃいたいと思うんですが、そんなときに使用するのがgrunt-coffeelintです。 インストール npm install grunt-coffeelint --save-dev Gruntfile.jsの読み…

gruntを使おう 〜 SASSをドキュメント化するyo 〜

CSSでのコーティング量も増えCSS Preprocessorを使う機会も増しSASSを利用しています。そんなときに使用するのがgrunt-styleguideです。 インストール npm install grunt-styleguide --save-dev Gruntfile.jsでの読み込み grunt.loadNpmTasks('grunt-stylegu…

gruntを使おう 〜 もしgruntタスクを動かしたときにエラーになったら 〜

gruntタスクを実行していてプラグインがエラーになったらどうしますか?多分みなさん次の対策をとるでしょう。 ググって問題解決する ググっても駄目なときエラーを自力で修正する とりあえず途方に暮れる 現時点でgrunt-connect-proxyがエラーになりました…

業務系アプリケーションの開発プロセスとかスタイルとか

業務系アプリケーションでアジャイル開発を行っています。私はアジャイル開発というものは気に入っていて好んで利用しています。しかし最近、いくつかのプロジェクトでアジャイル開発に参加させて頂いているのですが、どうも疑問が多いので整理したいと思い…

gruntを使おう 〜 CoffeeScriptをドキュメント化するyo 〜

JavaScriptでのコーティング量も増えaltJSを使う機会も増しCoffeeScriptを利用しています。そんなときに使用するのが grunt-codo です。 インストール npm install grunt-codo --save-dev Gruntfile.jsでの読み込み grunt.loadNpmTasks('grunt-codo'); 使い…

フロントエンドエンジニアの原点に戻ってHTML5を見つめ直す 〜 HTML5とか勉強会 in SENDAI 2014への参加レポート 〜

2014/3/8(土)、仙台は仙台市シルバーセンター第2研修室にて「HTML5とか勉強会」が開催されました。東京ではすぐに満席になる人気勉強会がこうした地方で聞けるということで期待です。 地方版HTML5とか勉強会は好んで参加しており福島、福岡など行かせて頂い…

gruntを使おう 〜 JavaScriptをドキュメント化するyo 〜

JavaScriptでのコーティング量も増えJavadoc同様ソースコードからドキュメントを作成する機会が増えています。そんなときに使用するのが grunt-contrib-yuidoc です。 インストール npm install grunt-contrib-yuidoc --save-dev Gruntfile.jsでの読み込み g…

gruntを使おう 〜 ファイルの内容を変えるプラグインだyo 〜

gruntを使ってリリースモジュールを作成する際にまれにindex.htmlとかファイルの内容を変えたいときがあります。たとえば index.htmlにモック開発時のテストコードが入っているが本番では利用しない 本番のディレクトリ構成が特殊でリリース時に<script src="scripts/main.js">を変更したい…