はてなブックマーク

5/23 decode18 に登壇で参加してきました。貴重な経験をさせて頂きましてありがとうございました。かなり釣りっぽくなってしまいましたが「３大フレームワーク（Angular, React, Vue.js）比較によるエンタープライズ Web アプリケーション開発の最適化」というタイトルです。Web Components から始まり、これらフレームワークがそのポリフィル（正確な表現ではありません）になり得るのか？ってのが一つのテーマでもありました。明言はしてませんが、これわかる人にはこのポイントがわかったんじゃないかなと思います。それとAzureです。ちょっと簡単に喋ったテーマを整理します。 Web Components ポリフィルとしてのWebアプリケーションフレームワーク デリバリーを含む、Webフルスタックとは これからのWebアプリケーションエンジニア Web Component

Angular と Azure Function と Swagger を利用している。Swagger はあまり好みじゃなかったんだが他に良いAPI設計する場所とそれを管理する場所も見つからなかったので、遅ればせながら本腰入れて利用しようと思った次第でメモ的な何か。 いい加減な説明 Swagger Swagger は RESTful APIを構築するためのオープンソースのフレームワーク app.swaggerhub.com Azure Function Azure Function は サーバーレス コンピューティングで云々。 azure.microsoft.com Angular フロントエンド Web アプリケーションを作るもの。 https://angular.io/angular.io やってみる（思考実験含む） Azure Function を利用するとSwaggerで（という表現

2017 年は個人的にも会社的にも飛躍の年になりました。これも皆様に支えられてのことかと感じています。仕事は主に Angular の導入支援や開発、教育などを柱に Web 全般を行いました。当然一人では出来ないので 「仲間（メンバー）」の力を借りて何とか年を越したという感じがします。 良かったこと エンジニアとして育ってきた環境は違うけど、方向性が同じように感じるメンバーと仕事が出来ている メンバー教育に力を入れることができた Microsoft MVP に成れた Angular を主題とした登壇が多くできた SIer 系企業で Angular が流行りだしている（ように感じます） 皆様に支えられて仕事が頂けている 悪かったこと 勝ち戦に負ける振る舞いに結果的になった コードを書く時間が減った（コードレビューばかりしている） ぷるりく減った ブログを書く量が減った 経費が増えた ヤケ酒が増

通常、Azureを使っていると複数人で管理する場合が当然のようにあるかと思います。Azureのサイトにはそうした場合の権限に関することと設定方法について記載があります。ただ記事と若干の違いがあったためメモ的に記載したいと思います。 azure.microsoft.com Microsoft Azure には、3 種類の管理者ロールがあります。 管理ロール 制限 Description アカウント管理者 (AA) 1 Azure アカウントに 1 人 Azure サブスクリプションをサインアップまたは購入し、アカウント センターにアクセスして多様な管理タスクを実行する権限を持っている個人。管理タスクには、サブスクリプションの作成、サブスクリプションの取り消し、サブスクリプションの料金の変更、サービス管理者の変更などがあります。 サービス管理者 (SA) 1 Azure サブスクリプションに

Azure App ServicesはGoのサポートがあります。現在、Azure App Serviceプラットフォームでサポートされているバージョンは64bit Go 1.4.2とGo 1.5.1です（らしい）。Azure Appサービスを作成してセットアップして、新しいGoアプリに対応し、デプロイメントを設定する必要があります。 Go on Azure Goを実行させるための手順は次の通り： 新しいWebアプリケーション(WebApps)を作成します。 github、gitbucketなどにリポジトリーを作成します WebAppに作成したリポジトリーを登録します ローカルで server.go を作成しリポジトリーに push します package main import ( "fmt" "net/http" "os" ) func handler(w http.ResponseWr

Angular 4 のリリースを目の前に Angular Community の分裂がいよいよ表面化し始めた。AngularJSから言われていたその独特な記法は JavaScript エンジニアから敬遠されることもあり、そうしたことが払拭されなかったことが原因なのでは無いかと思う。今 Angular は岐路に立たされている。何かというと Angular は 「Angular2」 からはじまりましたが、それをフォークしたかのように 「Angular 2」 が現れ、ほぼすべての人がこちらに移行していったように思えたが若干まだオリジナルの「Angular2」を使っている Community メンバーもいる。新しく入った Community メンバーには 「AngularJS2」 といってどこからフォークされたかわからないような正しくないAngular の利用者まで現れている。そうこうしているうち

dotnet (ここでは、あえて dotnet と記します)には Angularテンプレートが用意されているという話を聞きましたので実際に触ってみました。ここで dotnet のバージョンは RC4 を使う必要があります。Angular のテンプレートがあるというだけではさほど珍しいものでもなく、むしろ、なら angular-cli を使ったほうが遥かに利便性は良いと思います。 dotnet の Angular テンプレートの魅力は Angular Universal を基本的に利用しているところです（現時点で Angular Universal をサポートしているのは Node.js と dotnet core だけ）。 GitHub - devCrossNet/universal-cli: CLI tool for Angular2 GitHub - dotnet/core: Home

タイトルの通りです。「いくらユーザが古いブラウザを使っていてもサポートしちゃいかんよ」です。以前から方々で言われている通りで記事も多くあります。よく言われるのが「ある程度動けば」とか「機能が落ちても」というような話がありますが、そういう問題では無いです（下記記事を読めばわかる）。 なぜサポートが終了した Web ブラウザーを使うと危険なのか? – monoe's blog Internet Explorer のサポート終了 ざっくり言うと、サポートされていない古いブラウザを使い続けるとマルウェアへの感染などリスクが高まる等脅威があり、そうしたブラウザをユーザへ供用することは間接的に加害者になる、などなど。 Web を何かしらで生業にしている会社なら当たり前のような気がします。ので適当にピックアップしたサイトの推奨環境を見てみます。 サイト 最新を推奨しているか 推奨環境URL Yahoo

Angular を勉強する最良の方法は angular.io を読む コードやissueを読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。アドベントカレンダーですので初心者向けに利用している教科書をgitbooksに書き起こしました。細かい説明はあまり書かれてませんので、気になることはご自身で調べると良いと思いますし、やはり angular.io のチュートリアルなどはやっておくべきことと思います。そこに行く前のより簡単なものです。 こちら → https://albatrosary.gitbooks.io/start-angular/content/ 章立ては下記の通りです： Introduction Angularとは アプリケーション開発をするための環境 angula

「クソazureが！」とそのときは思った。何と言ってもAngularで作ったアプリをgithubからデプロイする評価で幾つかインスタンス作ったら一瞬にして（5日ほどで）サブスクリプション 15,000円分が消滅するとは…ほんとにクソだ！とは思いましたが、冷静に考えると"App Service"はどんな料金体系で、もっと格安なのあれば変えとけばいいんじゃない？ということになり改めて見直してみました。 通常Web Appsを作成する場合の価格レベルは「Standard: 1 S」で設定されています。 さてでは価格体系は一体どういうものがあるのかというと となっていて「Standard: 1 S」だと評価のみで利用するにはちょっと高い感じもしなくもないです。で、Freeというのがあるのでそれを選択すると「タダ！」。最高です。 この変更はスケールアップで表示されます。スケールアップをクリックした後

「Angular v2は事前コンパイルすることができる」ということを聞いても何のことだろうと思ってしまう。何故このように事前コンパイルする必要があるかというと「開発したAngular2アプリケーションをより効率の良いもの」にするためです。この「効率」というものを具体的にコードを書いて見ます。サンプルコードはAngular2チュートリアルを使っています。 事前コンパイルはngcコマンドで行いますが、そのモジュールが@angular/compiler-cliから提供されます。これにtsconfig.aot.jsonというファイルを追加することと、package.jsonに"ngc": "ngc -p ./tsconfig.aot.json",というスクリプトを定義すること、そしてbootstrapを定義しているmain.tsに対してAoT(Ahead-of-Time)ファイルmain.aot.

機械学習とかAIとかドローンとかVRとか最近バズり出してますが、さして興味もなく、というよりそこに注力している時間があったらWeb開発に時間を使おうと考えているので全然触れてもいなかったジャンルでした。が、TechFeedがナイトセミナーをするというので行ってみた。TechFeed はキレーションサービスを行っているサービスで話題のITネタを調べるには丁度良いサイトだと思ってます。 techfeed.io さて、セミナーの内容ですがこちらを見て下さい。内容はかなりガチでした。とぅぎゃったのでログを読んでみてください。 techfeed.connpass.com togetter.com 感想ですが、セミナーでは数学の知識が無くても誰でも機械学習は扱えるという話でしたが、そこは微妙な気がしています。おもちゃ的にデータ入れて何か統計っぽいことしてやっぽいというのは使っているということにはならな

Angular 2 RC5から導入されるNgModuleを使ってTodosを作ってみます。NgModuleの導入により@Componentで定義されていたものをNgModuleでまとめて定義することが可能となるようです。詳しくは @laco 氏のこちらを見て頂けると良いと思います。 ng2-info.github.io 変わるところとしては次のようなところのようです： bootstrap関数の呼び出し @Componentのdirectives @Componentのpipes Todosを作ると少なくともコンポーネントが4つは作ると思います。 元となるコンポーネント: todos.ts 入力のコンポーネント: todos.input.ts 一覧のコンポーネント: todos.body.ts 詳細機能用のコンポーネント: todos.detail.ts このコンポーネント郡をひとつにまとめ

ようやく触り始めてるAngular2です。Angular2に定義されている@Inputと@Outputについて触ってみている、ぱっと見キモい。どんな振る舞いをしているのかイマイチわからないのでメモ程度に備忘します。@Inputと@Outputは梱包しているComponentと梱包されているComponent(ダジャレではない)の関係をまず定義する必要があります。 @Inputも@Outputも梱包されているdetail-appへ定義する @Inputは「my-app」から属性経由で値を「detail-app」が受け取るパターン @Outputは「detail-app」から「my-app」へイベントを送るパターン @Inputが扱うのは文字列で@Outputはイベント通知できるPrimise的なもので、でないと「Uncaught (in promise): TypeError: this.d

前回はSpring Bootだったが今回はもう少し基本的なところでアノテーション。まぁ「注釈」というくらいなのでマーキング程度だと思うのですが、アノテーションベースで色々な振る舞い（処理）が行われるとはてさてという感じになるのでがっつりお勉強した。 kumamotojava.doorkeeper.jp やったこと まずアノテーションを身につける前に基本的なデザインパターン実装をやった リフレクション Factoryパターン Proxyパターン 一通り終わった後に待望のアノテーション。アノテーションは「NotNull」チェック用のアノテーションを作った、そうこう言う感じってか何もしていない。やっぱり何もしていない。。。（俺は正しかった）。。。 package megascus.annotation.handson.beanvalidation; import java.lang.annota

今年もngJapanをやらせて頂いた。ngJapanというのはAngularの通常の勉強会よりもちょっと大きな規模で行うイベントで今回はスタッフ入れて200名くらいの人に来ていただいた。キャンセル待ちを入れるとだいたい400名という感じなのだが、東京によくある当日ドタキャン4割（当日キャンセルせず来なかった人）というのが今回もありこれは泣けた。 ngjapan.org とは言えゲストも豪華で、受付も豪華。うん、受付が一番豪華だったかもしれません。 総評 Angularは2の動向や1.5 Componentの話もあり話題には事欠かないと思います。要約すると Web Component指向 RxJS/SystemJS/TypeScriptなどのAngular外との組み合わせ に尽きる。もう1.4のころのような書き方はしないというのが全体としての共通事項だったように思えます。 次にやること An

Angular2を触り始めているが、YEOMANジェネレータがあまりないので自分で作っています。今Angular2を始めている人達の多くがangular2-seed: github.com を利用していると思いますが（実際はよくわかりません）、Angular2にはangular-cliというのがあり、これを使うとディレクトリ構造とか開発環境とか多分ベストプラクティスが整う。angular-cliはember-cliを元に書かれています。 github.com angular-cliの使い方はgithubを見れば良いのですがemberに慣れていない人は若干戸惑うところもありますので備忘録的に記載します。 インストール npmを使ってインストールします。グローバルインストールするのですが、プロジェクトを作成したときもローカルにangular-cliがインストールされ以降はローカルを使うようです

以前から熊本でJavaの勉強会に参加していたが、今回はSpring Bootのハンズオンをしてくださった。どちらかと言うと自分がAngularをやっていて、そのRESTなサーバをJavaで作りたいが最近のJavaはよくわからんということでやって頂いた、感謝。 kumamotojava.doorkeeper.jp やったこと githubに書かれているチュートリアルを解説付きでコーディングした。IDEはNetBeensで、テキストはこちら： github.com mavenのインストールからプロジェクトの作成 Thymeleafの追加 JPAの追加 htmlでの表示 RESTでのAPIアクセス JDBCでのDBアクセス デプロイ実行 全体的にSpring Bootの初心者ハンズオンはできた 感想 やっぱり最近のJava(というかSpring)はアノテーションベースだなと。最近と書いたがだいぶ

エンタープライズ的な的な仕事上、Windowsマシンが欲しかったので、いい時期でもありSurface Pro 4を購入した。メインはMac Book Proだがセカンドマシンとして威力を発揮してくれるのではと期待しての購入です。 仕事は基本的にエンタープライズWeb的な仕事がほとんどで、それなりにモダンWeb開発に必要なツールは入れとかないとという感じです。インストールしたものはこれです。 git bash python2.7 Ruby Visual Studio 2015 Community Windows 10 SDK nodist nodejs yo grunt-cli bower gulp live-server Visual Studio Code 準備 買ったら普通にパスワードとか設定します。Windows10ではパスワードとは言わずPINと呼んでいます。Windows10、特

MACでNodeJSを利用するときにはnodebrewを使うのが良いんじゃないかという感じですが、Windowsの場合はどうするのかということで、最近Sureface Pro 4を買ったついでに色々探してみた。Windowsの場合はnodistを利用するらしい（と言っても更新見るとだいぶ前からあったね）。 github.com 準備 WIndowsの場合には下記を済ませておく Git bashのインストール githubへのアカウント登録 ここまでできているものとして話をすすめる nodistのインストール インストーラーが用意されているのでダウンロードし実行する Download the installer here(<-githubを見てね) Run the installer and follow the install wizard 設定はset NODIST_X64=0をgit

これまで行ってきた「Angular2 for JavaScript」をいよいよTypeScriptに書き換えます。Angular2チュートリアルにコードがあるので「書く」という意味ではわざわざブログにするものではありませんが、JavaScript からTypeScriptに書き変えることで、モジュールローダ、アノテーション等の役割が理解できると思います。 利用するライブラリ等はAngular2チュートリアルに従います インストールするツール 次のツールをnpmインストールします。 npm i typescript --save-dev npm i concurrently --save-dev npm i lite-server --save-dev これらライブラリを利用するためのコマンドをpackage.jsonに定義します。 "scripts": { "tsc": "tsc", "t

モダンWebアプリケーションを開発するには、モジュールローダーを利用しているライブラリやフレームワークが多くなってきています。Angular2もSystemJSを利用していてモダンWebアプリケーションの開発が行えるようになっています。ここではモジュールローダーの話は割愛します。こちらを読むと良いのではと思います。 medium.freecodecamp.com (意訳版) qiita.com SystemJS Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel. github.com Angular2でSystemJSの利用 Angular2でSys

Angular2もベータ版となり、触りだす方も多くなったと思います。しかし、Angular2のサイトではTypeScriptのサンプルは豊富ですが、ノーマルなJavaScriptで記述されているものがあまり見当たりません。 angular.io あまりAngular2を触ってませんが、学習目的で次のことを行いました。 コンポーネントの利用 ルータの定義と利用 サービスの依存性注入 カスタムフィルタの作り方 作業フォルダーを作る mkdir Angular2Study && cd $_ 必要なライブラリをインストール npmを利用した場合 npm init -y npm install angular2@2.0.0-beta.1 --save npm install rxjs@5.0.0-beta.1 --save HTMLとして次のように定義しライブラリを読み込ませます。 <!DOCTYP

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

HTML5も昨年正式勧告となり次のHTMLを目指し色々と楽しんでいると思いますが各ブラウザの実装状況は今日時点でどうなっているでしょうと去年とまったく同じで。このエントリーは「HTML5 Advent Calendar 2015」12月1日の記事です。 HTML5 TESTとは HTML5 TESTとは555のチェックポイントから各ブラウザの実装状況をチャックするツールです。これは W3C が行っているものではなく github アカウント"NielsLeenheer"氏によるものです。 HTML5test - How well does your browser support HTML5? NielsLeenheer/html5test · GitHub ブラウザを点数評価してみる Google Chrome [バージョン 46.0.2490.86 (64-bit)] 昨年： Goog