albatrosary's blog

Azure と Angular と Wercker CI とか

Todos in Angular2 for JavaScript

前回の続きで今回はTodosを作ってみる。Todosはいたるところで書かれているので「Hello World」的には良いかと思う。普通に書き進めるのもどうかなと思うのでAngular1で書いたTodosをAngular2に書き換える感じで記載する。UIとしてはBootstrapを利用していま…

Angular2 for JavaScript

Angular2もベータ版となり、触りだす方も多くなったと思います。しかし、Angular2のサイトではTypeScriptのサンプルは豊富ですが、ノーマルなJavaScriptで記述されているものがあまり見当たりません。 angular.io あまりAngular2を触ってませんが、学習目的…

2015年振り返り

2015年は、2014年をより濃い感じで活動できたんじゃないかなと思う。だらだらと書きつづる。 まず、2015年のテーマとして考えていたのがエンタープライズにモダンWebの利用を促進するところにあった。SIer×モダンWebといったところ。 結果として次のことは出…

Angular2の「5 MIN QUICKSTART」をやったから勢いでTodosもやってみた - AngularJS Advent Calendar 2015

「5 MIN QUICKSTART」の勢いでTodos。このエントリーは「AngularJS Advent Calendar 2015」12月21日の記事です。 作業ディレクトリの作成 適当な名前でディレクトリを作る mkdir angular2todos && cd $_ モジュールのインストール npm init -y npm install a…

Angular2の「5 MIN QUICKSTART」をやってみた - AngularJS Advent Calendar 2015

Angular2の「5 MIN QUICKSTART」を触ってみた。このエントリーは「AngularJS Advent Calendar 2015」12月20日の記事です。 angular.io Angular2のQuick Startは、JavaScript、TypeScript、DartとあるがJavaScript、TypeScriptをやってみる JavaScript 作業デ…

Visual Studio Codeでタブを2スペースにする

自分はコードを書くとき"タブ=2スペース"派なのでVisual Studio Codeもそうしたい。設定を探していたらあった。 設定 "editor.tabSize": "2", "editor.insertSpaces": true, editor.tabSizeは1タブをスペース2個分に調整してくれる editor.insertSpacesはタ…

ngReact - AngularJS Advent Calendar 2015

Yeomanでネタになるジェネレータ無いかなと探していたらngReact成るものがあったのでさっと見てみます。このエントリーは「AngularJS Advent Calendar 2015」12月15日の記事です。 github.com はじめに ngReactをgit cloneする。ディレクトリ移動してbower i…

systemjs - Yeoman Advent Calendar 2015

systemjs を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月8日の記事です。 www.npmjs.com SystemJSはモジュールローダー、jspmはSystemJSのパッケージマネージャ、この辺りを見る jspm.io - Frictionless Browser Package Management gith…

JavaScript 「再」入門を読んで - MDN Advent Calendar 2015

「JavaScript 「再」入門を読んで」このエントリーは「MDN Advent Calendar 2015」12月2日の記事です。 developer.mozilla.org JavaScriptの文法とかちょっとしたクセみたいなのがあるけどそれはそれで面白いと思う。TypeScript何か使うとそれが半減するかな…

入門編を読んで - MDN Advent Calendar 2015

「入門編を読んで」このエントリーは「MDN Advent Calendar 2015」12月1日の記事です。 developer.mozilla.org Firefoxブラウザに付属している「スクラッチパッド」がいいな。コンソールで叩くよりもエディタとしての役割もありイイ。 起動方法 添付画像の通…

ng-poly - Yeoman Advent Calendar 2015

ng-poly を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月6日の記事です。 www.npmjs.com インストール $ npm install -g generator-ng-poly $ yo ng-poly 何と言っても構成選択が多い ? What is the app's name? mkdir プロジェクト名して…

angular - Yeoman Advent Calendar 2015

既に定番のangular を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月5日の記事です。 www.npmjs.com インストール $ npm install -g generator-karma generator-angular $ mkdir mydir && cd $_ $ yo angular 実行 $ grunt serve ブラウザ…

ngdoc - Yeoman Advent Calendar 2015

ngdoc を紹介する。ngdocと言ってもYEOMANジェネレータの。AngularのngDocの書き方に従えば自プロジェクトを良いようにドキュメント化してくれる。このエントリーは「Yeoman Advent Calendar 2015」12月4日の記事です。 www.npmjs.com ngDoc ngDocの書き方は…

hottowel - Yeoman Advent Calendar 2015

hottowel を紹介する。何と言ってもこれJohn Papaさんが作ったジェネレータでテンプレートとかが超参考になる。このエントリーは「Yeoman Advent Calendar 2015」12月3日の記事です。 www.npmjs.com John PapaさんはAngularスタイルガイドをまとめた人。Angu…

2.0じゃなくって2.5があるよと言われたからやってみるよ - Firefox OS Advent Calendar 2015

タイトル通りで、2014/10/5のMozilla Open Web Day in Tokyo | Mozilla Japanで購入したFlameがまだFirefoxOSバージョン1.3だったので2.0に入れ替えた。ってやったら2.5入れろという指示が群馬県の人からあったので入れた。基本的にはここに書いてある通り。…

日本語入力できるというのでIME入れてみた - Firefox OS Advent Calendar 2015

前回アップデートとしたFlameの入力が英語版だけだったので、IMEを入れてみた。入れたやつは「The Trial period has expired.」と表示される、あら。このエントリーは「Firefox OS Advent Calendar 2015」12月3日の記事です。 IMEのダウンロード github.com …

FlameのFirefoxOSバージョンが古かったので入れ替えてみた - Firefox OS Advent Calendar 2015

タイトル通りで、2014/10/5のMozilla Open Web Day in Tokyo | Mozilla Japanで購入したFlameがまだFirefoxOSバージョン1.3だったので2.0に入れ替えた。基本的にはここに書いてある通り。このエントリーは「Firefox OS Advent Calendar 2015」12月3日の記事…

angular-winjs - Yeoman Advent Calendar 2015

angular-winjs を紹介する。このジェネレータはAngularとWinJSを使ったものでWinJSプラグインのangular-winjsを利用している。このエントリーは「Yeoman Advent Calendar 2015」12月2日の記事です。 WinJSとは "Windows Library for JavaScript"でMicrosoft…

angular2-gulp-webpack - Yeoman Advent Calendar 2015

angular2-gulp-webpack を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月1日の記事です。 www.npmjs.com 構成 Angular2 typescript gulp webpack インストール $ npm install -g generator-angular2-gulp-webpack $ mkdir agw && cd $_ $ y…

Advent立ち上げ人なので責任持って初日は書くよ。 - HTML5 Advent Calendar 2015

HTML5も昨年正式勧告となり次のHTMLを目指し色々と楽しんでいると思いますが各ブラウザの実装状況は今日時点でどうなっているでしょうと去年とまったく同じで。このエントリーは「HTML5 Advent Calendar 2015」12月1日の記事です。 HTML5 TESTとは HTML5 TES…

Angularを簡単に済ませるには - AngularJS Advent Calendar 2015

Angularでさくっと何か作ってみます。"5 min quickstart"のようなものです。このエントリーは「AngularJS Advent Calendar 2015」12月12日の記事です。 Step0: 作成するファイルの構成 Step1: 環境の作成 作業ディレクトリを作りindex.htmlを用意する $ mkdi…

AngularUI - AngularJS Advent Calendar 2015

Angular2に対するUI Bootstrap(ng-bootsrap)の開発も始まったが、Angular1に対するUIもまだまだ開発が進んでいます。Bootstrap以外にもUIコンポーネントがあってAngularUIというところにまとまってます。IDEのプラグインなんかもあったり。このエントリーは…

ui bootstrap for angular 2 - AngularJS Advent Calendar 2015

AngularはCSSなコンポーネントは用意していません。なのでBootstrapやUIkitなどのCSSフレームワークを利用するとさくっとそれなりのUIが作れます。ただこうしたCSSフレームワークで定義されているイベント(JavaScriptで書かれた部分)との連携には一工夫必要…

Angular 1とTypeScript - AngularJS Advent Calendar 2015

Angular1で作ったモジュールをTypeScriptを使ったものに変更してます。このエントリーは「AngularJS Advent Calendar 2015」12月3日の記事です。 まだ余計なところ書き方が間違っているところがありますが、慣れたらそんなに面倒でも無いと思う。個人で開発…

yeomanでAngularジェネレータ作った - AngularJS Advent Calendar 2015

以前にも書きましたがAngularを使ったYEOMANジェネレータを作ってます。このエントリーは「AngularJS Advent Calendar 2015」12月4日の記事です。 albatrosary.hateblo.jp 使い方 $ npm i -g generator-angular-eggs $ mkdir sampleapp && cd $_ $ yo angula…

Angular2 チュートリアル的な - AngularJS Advent Calendar 2015

Angular2のチュートリアルは何か無いかなということで"Try Angular 2"というのがありましたのでざっと見てみます。このエントリーは「AngularJS Advent Calendar 2015」12月2日の記事です。 Try Angular 2 これは"Angular Korea Meetup"の資料のようです。綺…

ささっとAngular2を動かしてみる - AngularJS Advent Calendar 2015

何はともあれ、ささっとAngular2を動かしてみたい!というときのためのYEOMANジェネレータを使ってAngular2を動かしてみる。このエントリーは「AngularJS Advent Calendar 2015」12月5日の記事です。 node.jsのインストール もうフロントエンド開発では常識…

エンタープライズで意外とAngularが人気?

久しぶりに10/7(水)エンタープライズ向けに登壇してきました。もう珍しくなくなったSingle-page Application(SPA)の話でしたが、SPA押しという雰囲気ではなく、そういうアーキテクチャもありますよ的な緩い感じで。人数もあまり多くはなかったので和気あいあ…

TEAN(TingoDB, Express, Angular, Node.js)という構成?

以前のブログでMEANスタックについて書き、色々なところで話題になりそれなりによかったかなと思っているところです。MEANは、MongoDB、Express、Angular、Node.jsの頭文字からこう呼ばれていますが、詳しくはブログを読んで下さい: albatrosary.hateblo.jp…

とほほさんもAngular入門

懐かしの「とほほ」さんも「AngularJS入門」出されましたね。「とほほ」さんにはWebを始めた頃大変おせわになっていました。感謝します。 Angular入門については、もう十分過ぎるくらい資料もあるし、エンジニアの皆さんもAngularの良し悪しはあるにせよちょ…

Webエンジニアはどれだけ「Extensible Web」に興味あるか

今Web業界で注目されるキーワード「Extensible Web」ですが、これは「現在のWebが抱える大きな問題を解決しようとする考え方」ということです。そして2013年に策定された The Extensible Web Manifesto というのがあります: HTML5で策定された仕様は使いづ…

Bootstrap v4の記事をHTML5 Experts.jpに書いた

Bootstrap v4の記事をHTML5 Experts.jpに書いたんです。まだアルファ版なのでいろいろとあるとは思いますが。書いていることも変わるかもしれませんし、勘違いしているかもしれませんし。 【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootst…

サイトをリニューアル、今回のポイントは?

ashiras xyz のサイトをリニューアルしました。リニューアルはだいたい2時間くらいで完了でしょうか(やっぱYEOMAN使うと早い)。「ashiras.xyz」というのは自分が仕事するのに使っている所謂「屋号+.xyz」です。「xyz」の意味ですが、アルファベットの最後…

AzureのTOPページが変わった!

AzureのTOPページ、かっこいい!ライセンスの更新があるので7/15までにアクセスして下さいと。

Webのスマホアプリはショートカットが作れないからと言っている君

最近ネイティブかWebかで2年くらい前に盛んになった話が再度浮上しているようです(再度か再々度かしりません、何回も同じ議論している。もう必要ないんじゃない?そういう議論)。その中にWebアプリはブラウザ立ち上げてからアプリを立ち上げる、ネイティ…

「SPAがネイティブアプリをぶっ壊す」そうです!

ネタとしてはちょっと古い感じがしますがSingle-page Application(SPA)の記事です。 SPAがネイティブアプリをぶっ壊す:HTML5/Javascriptが変えるWebの未来 - Qiitaqiita.com 立派に釣ってるのでお見事というしかありませんが、自分の名前が最初にでているの…

Visual Studio Codeをインストールしてみた - de:codeに感化されている今日このごろ

すっかりde:codeに感化された感満載ですが、その中で「Visual Studio Code」の話がありましたのインストールしてみました。 https://code.visualstudio.com/ インストール手順は簡単で サイトに有る「Download Code for OS X」ボタンをクリック ダウンロード…

Angular1.4.0になりました -「rc」がとれた

今から22時間前にAngular 1.4.0から「rc」が取れましたね。長い一週間でした。1.4があと一週間でリリースされますとアナウンスのあった3/21のngJapanから。このAngular 1.4.0ですが、たぶん推測ですがGoogle I/Oで何かしらの話があるんじゃないかと(無いか…

de:code 2015(5/26-5/27) に行ってきました

de:code 2015を聞きに行きました。de:codeは IT 技術者の方々が抱えている課題に対して、マイクロソフトが今、そしてこれから先を見据えてどうお応えできるか ー。その技術を凝縮してお伝えする 2 日間の技術コンファレンスです。 今年は、過去 TechEd Japan…

結構見通しの良いAngularのNew Routerを触る

ng-japanで新しいRouterの話がありました。新しいRouterはAngular 1系、今週リリースされるであろうAngular 1.4と新しいAngularでもあるAngular 2をサポートしているということです。かつ、使いやすさも整理(?)されています。期待していてくださいという…

最近のJavaScriptフレームワークの評価とか

最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え「gitなんか覚えなくたって死なない」とか、UXうえい!みたいな話だと思いきや…

Angular 2 は ES6とWeb Componentsを意識した作り?(Angular ハンズオン in 鹿児島)

Angular 2 のサイトが公開されています。Angularのロゴも微妙に変わったようで縁のグレーっぽいところがなくなりスマートなデザインになっています。そしてサイトのはじめに「Angularは、モバイルとデスクトップのWebアプリケーションを構築するための開発プ…

第55回 HTML5とか勉強会(大ライトニングトーク大会 with Web 26th Anniversary)

Webが生まれて26歳になりました。それを記念してhtml5jでは「第55回 HTML5とか勉強会(大ライトニングトーク大会 with Web 26th Anniversary)」を開催しました。登壇内容は次の通りで16名によるライトニングトークで"Web"をお祝いしました。 タイトル 登壇…

その性能測定値って信頼できる数値なのですか?

性能測定はとても重要で、どのようにして性能を測定したかや、どいういった機能について性能を測定したかが重要です。部分的に性能測定を行い、このフレームワークは遅いとか早いとか言ってもあまり議論にはならないと思いますので、そういった方法や前提事…

Aurelia.jsという新しいJavaScriptフレームワーク

Aurelia.jsはAngular teamで開発を行っていた方が Durandal Inc. というところで新しく作ったJavaScriptフレームワークのようです。Aurelia.jsに関しては下記サイトを見て頂けると良いと思います。今回はその味見をしてみましたのでメモを取ります。 Home | …

「ng-japan 2015」開催されます! 〜 最近イベントネタしか書いてないけど 〜

2015年3月21日(土)「ng-japan 2015」が開催されます。USからもスピーカー3名をお招きしてのカンファレンスとなります(一応、通訳がいるとか)。 ng-japan ng-japan - The first AngularJS conference in Tokyo, Japan (2015/3/21) たいぶAngularJSもdisら…

「第54回 HTML5とか勉強会」まとめ

「第54回 HTML5とか勉強会」は「HTML5カンファレンス特集 + α」をテーマに株式会社インターネットイニシアティブ様で行われました。2015/1/25(日)に行われたHTML5カンファレンスで注目を得たセッションを幾つかピックアップして行いましたが、多くの方にお集…

HTML5 Conferenceのスタッフをやってきた

1/25(日)のHTML5 Conferenceがまぁー無事終わりましたね。大きなトラブル無く終わったのは良かったと思います。自分はボランティアスタッフ担当統括ということでスタッフとして参加させて頂きましたが。完全に今回は裏方でしたね、インカム付けてウロウロ。 …

YEOMANハンズオンを鹿児島でやってきました

いまさらYEOMANされどYEOMAN的なこともあり、鹿児島でYEOMANハンズオンをやってきました。何かを学ぶにはきっかけが必要になりますが、今回のハンズオンが良いきっかけになれば幸いと思い鹿児島まで行ってきました。 鹿児島でもYEOMANハンズオン開催! HTML5 …

まもなくHTML5 CANFERENCEが開催

HTML5 CANFERENCEが今月末の1月25日(日)に開催されます。今回はボランティアスタッフ統括ということで完全裏方で右往左往しつつイベントに参加させて頂いております。既にボランティアスタッフ申込、一般申込は終了していますが、LT枠はまだクローズさ…