Html5とAngularJSで作るエンタープライズ業務システム

株式会社スタイルズさんの勉強会に参加してきました。

a392a3fc2e14746aa7c4d442eb.doorkeeper.jp

 

AngularJSって、jsの有名フレームワークとして、話題にはよく聞くけれど、事例はあまり聞いたことがなかったので、どんな風に使われるのか興味がありました。

 

■プロジェクト概要

flex3で構築されたタブ、チャート、グリッド等を利用したRIA(Rich Internet Application)をhtml5でリプレース。

 

開発工数100人月超。

画面数150超。

バッチ数60超。

開発期間10ヶ月+5ヶ月。

デカくて、タイトですね。

 

■開発メモ

・JHipstarは神(YeomanのSpring Boot + AngularJSのテンプレート)

jhipster.github.io

 

Yeomanってすごいのですね。

まだ少ししか触ったことなくて、神と崇めるほどの恩恵を感じてみたいです。

 

・AngularJSの開発

実際にフレームワークを理解する期間として、AngularJSを1ヶ月間、勉強したそうですが、それでも充分ではなかったとのことで、AngularJSの難しさ、学習コストの高さが伺えました。

そして、経験の浅い人もアサインされる予定だったため、ココだけ作ればオッケーという雛形を作って、AngularJSがよくわからなくても開発が行える環境を作ったのだそうです。

開発のコモディティ化

こういう努力は大事ですね。

 

・Metronicも神(デザインテンプレート)

非デザイナーで画面を作成していったのだそうですが、デザインを買ったのだそうです。

そういう選択もありですね。

 

Metronic | Dashboard

 

・Kendo UI

こちらもお買い上げ。グラフやグリッド等の部品を持つUIフレームワークなんですが、クライアントからExcelを出力できる機能があるとのことで、ぶったまげました。

 

www.telerik.com

 

様々なライブラリを組み合わせていて、面白いなと思いました。

ライブラリは、そのまま使えると素晴らしいが、ちょっとでも違うことをしたいと思ったら地獄と云われていました。

確かに。。

フレームワークの選定は重要。

 

こちらの会社、弊社から歩いて行けるほど近かったので、非常に親近感がありました。

とてもいい勉強会でした。

phina.jsでゲームを作った

phina.jsというjavascriptライブラリを使って、ゲームを作りました。

phinajs.com

 

アイディアを即座に形にできるゲームライブラリとありますが、様々なクラス、メソッドが用意されています。また、タイトル画面とゲームオーバー画面にテンプレートが用意されていて、ゲーム部分だけを集中して作れたりなど、まさにそのとおりだなと感じました。

ゲームを仕上げている方は、だいたい、この水色のテンプレートを使っていますね。

 

これが作ったゲーム

 

ドキュメントはまだまとまっていないみたいですが、サンプルは非常に豊富です。

それら、サンプルを見ながら、だいたい3、4時間くらいで作りました。

おおまかには、initに部品を配置して、updateに動作を書いていく感じかなと理解しました。

 

サンプルはアドベントカレンダーにたくさんある。

初めての方には、8日目のエントリがおすすめ。

qiita.com

 

私、ゲームは普段、作らないので、他のライブラリとの比較はできないんですが、ゲーム開発で様々なゲーム開発ライブラリを見てきた作者のphiさんが、それらのいいところをとって作っているそうなので、いいものなのでしょう。

 

作者による紹介はこんな感じ

phiary.me

 

自分の考えたことが、簡単な実装でどんどん動くようになっていくのはとても楽しかった。

プログラミングは、近年、子ども向け教室が盛んだったり、必修化が検討されたりと、低年齢化が進んでいるので、phina.jsは、初学者に易しく、楽しいという特徴から、scratchのように親しまれる存在になっていくのではないでしょうか。

また、なにかアイディアを思いついて、phina.jsを使ってみたいと思います。

 

6月6日追記

新しいゲームを作った

 
6月8日追記
また新しいゲームを作った
 
6月15日追記
また新しいゲームを作った
 
7月21日追記
また新しいゲームを作った
 
あとは、こちらをみてください。

コーチングのプロが教える「ほめる」技術

コーチングのプロが教える 「ほめる」技術

 

管理者なので、勉強に読みました。

本書は「アクノレッジメント(承認すること)」で部下をやる気にさせると書かれています。

認めるというのは、相手に対して、ただ「すごい!」とほめるのではなく、相手をよく観察して「あなたの〜がいいね」と、その人が聞きたいと思っていること(努力していることや、気をつけていることなど)を指摘するということ。

正しく評価されるのって、きちんと見てくれているのだなと思えて、嬉しいものですよね。

 

他にも、存在を承認する手段として、

・相手からのアクションに対して、すぐにレスポンスする

・仕事を任せる

・意見を求める

・謝る

など、具体的な事例があり、なるほどと思いました。

 

まずは、観察ですね。

さあ、才能に目覚めよう(同僚)

さあ、才能(じぶん)に目覚めよう―あなたの5つの強みを見出し、活かす

 

以前、自分のことで記事を書きましたが、研修でみんなの強みが発表されていましたので、同じグループの人のことを考えて、理解を深めてみたい。

 

Tさん

・成長促進

ほかの人たちが持つ潜在的な能力を見抜くことができる。

 

・回復志向

問題を解決することが好き。

 

・個別化

一人ひとりが持つ個性を観察し、理解できる。 

 

・適応性

その時々の状況に容易に対応できる。

 

・学習欲

学ぶことが好き。

 

Tさんは新人のOJTをする機会が多く、T塾なんて云われているのだけれど、成長促進、回復志向、個別化、適応性、学習欲のすべてが教えるということにつながっていているから、やはり向いているようだ。

 

Kさん

・調和性

衝突や摩擦から得るものはないと考え、同意点を求める。

 

・公平性

人々を平等に扱うことが大事と考える。

 

・個別化

一人ひとりが持つ個性を観察し、理解できる。 

 

・最上志向

弱点を克服するより、強みをより伸ばすことを好む。

 

・共感性

周囲の人の感情を察することができる。

 

Kさんは社内でグループリーダーをしているから、会社で最も直接、部下を見ている人だ。

温和な感じだけれど、人をよく観察しているので、人を動かすのがうまい。

調和性、公平性、個別化、共感性には納得感がある。

 

Aさん

・適応性

その時々の状況に容易に対応できる。

 

・共感性

周囲の人の感情を察することができる。

 

・戦略性

乱雑な中から最善の道筋を発見することができる。

 

・個別化

一人ひとりが持つ個性を観察し、理解できる。

 

・最上志向

弱点を克服するより、強みをより伸ばすことを好む。

 

Aさんは酒好きで、よく笑う。

個別化で人を観察して、うまくコミュニケーションをとっているのではないか。

仕事では接点がないので、一緒に仕事をしてみたいところ。

 

Sさん

・最上志向

弱点を克服するより、強みをより伸ばすことを好む。

 

・調和性

衝突や摩擦から得るものはないと考え、同意点を求める。

 

・慎重さ

用心深く、まじめ。

 

・達成欲

何かを成し遂げたいという欲求が強い。

 

・コミュニケーション

説明すること、描写すること、進行役を務めること、人前で話すこと、書くことが好き。

 

Sさんはすごく人当たりが良くて、誠実な人という印象がある。

話すことや、やることがとても丁寧。

調和性、慎重さ、コミュニケーションがそれに当てはまる。

 

自分以外でみてみても、ストレングスファインダーは当たってるなという感じは結構ある。

自分の強みをアピールする必要がある就職の面接などで、大いに活用できるのではないでしょうか。

さあ、才能に目覚めよう

さあ、才能(じぶん)に目覚めよう―あなたの5つの強みを見出し、活かす

 

会社から配布されました。

ストレングスファインダーといって、本付属のIDでインターネットからアンケートに回答すると自分の強みを5コ教えてくれる。

 

その内容を基に、研修がありました。

簡単に云うと、短所を克服するよりも長所をより伸ばすことのほうが効率的であり、社員が活き活きと働くことができる。

そんな個の強みを活かした強固な組織作りを行っていくのだ。

という内容でした。

弊社は「社員全員がキーマンになる」という事業計画があり、その一環として「個人の強みを活かす会社を目指すには」という勉強をしたのでした。

 

私の強みは、

・収集心

物や情報を手に入れ、集め、整理して保管することが面白いと考える。

 

・調和性

衝突や摩擦から得るものはないと考え、同意点を求める。

 

・最上志向

弱点を克服するより、強みをより伸ばすことを好む。

 

・分析思考

理論が堅固であることを強く求める。

 

・原点思考

過去を振り返って、答えを探す。

でした。

 

かなり当たっている気がします。

収集心、分析思考、原点思考が相関しているところが気に入りました。

情報を駆使して問題解決みたいな。

 

その後、この本を読みました。

強みのタイプ34コの特徴、どういう場面で強みが活かせるかが書かれている。

読みものというより、辞書的な感じ。

強みに仕事を合わせるって、そんなに都合よく仕事があるのだろうか。

難しそうだなと思いました。

帳票に気をつける

仕事の話です。

いま、LAMP環境のwebシステムを作っている。

このシステムにはExcel形式の帳票出力機能があり、設計段階では、PHPExcelを使えばできる!と軽く考えていたのだが、総合試験になって、大層な件数を処理しなくてはいけないことが分かった。

というか、これは、もともと要件定義書に書いてあったことなのだけれど。

 

処理時間が長くなるのは仕方がないとして、メモリを使いまくっている。

それが、何人ものユーザから同時に使われるということで、流石にこれはまずいなと思いはじめ、急遽、仕様を変更した。

 

・変更前

画面から帳票出力指示をして、サーバで帳票を作成し、ブラウザに直接ダウンロードする。

 

・変更後

画面から帳票出力予約をし、帳票作成はバッチから起動した常駐プロセスで行う。

帳票作成バッチは予約順位の早いものから同時処理可能件数を超過しないよう帳票を作成し続ける。

出力予約をした帳票作成状況の確認画面を作成し、作成済みの帳票はその画面からダウンロードする。

 

さらに云うと、Excelに改ページ数の制限があり、データが多くなると、ブックを分割せざるをえなかったことや、PHPExcelもかなりメモリを使うので、メモリを節約するテクニックが必要であったなど、帳票処理は全般的に綱渡り状態であった。

ヒヤリハット

 

いま思えば、昔、帳票作成用にサーバが分離されているシステムを見たことがあったが、同じく負荷分散を考慮しての構成であったわけだ。

オンラインでの大量処理は向いていない。

最初からこういう発想ができればよかった。

 

”要件定義書はよく読む”

”webシステムの帳票はあぶない”

教訓を忘れないために、反省の意を込めてブログを書きました。

mvnoにmnp

携帯電話はauiPhone5sを使っていたのだけれど、インターネットのだら見や、ゲームなど、高額な利用料金の割に大した用途で使っていないので、利用料金と使用時間を減らしたいなと思っていた。

スマートフォンのスマートは「賢い」の意。

端末は賢いけれど、賢く使っている持ち主はどれくらいいるのかしらと思うわけ。

その時間で、読書でもしていたほうが有益じゃないかと思っていたら、社長も、先日、読書が人生を豊かにするという話をしていた。

読書は大事なのだ。

で、ちょうど先月、auの誰でも割の更新月になり、違約金なしで、解約できるタイミングがきたのを機にmvnoにmnpしました。

 

■mvno事業者の選定

mvnoは、各キャリアのsimカードを使うので、同キャリアから購入した端末はsimカードをそのまま入れ替えて使うことができる。

 

現時点で、auiPhoneは、au回線でmvnoをしているmineoでしか使えない。

iPhoneをそのまま継続して使いたかったけれど、iPhoneはバージョンアップすると使えないなど、トラブルが多いようなので、やめた。

動作確認端末を見ると、注意が多くて萎えてくる。

新規でandroid端末を買うことにした。

mineo.jp

 

mineo以外は、docomo回線を使ったmvnoとなる。

評判のよいIIJmioに決めた。

www.iijmio.jp

 

月額料金は、音声通話機能付きsim700円+データ容量は3GBで900円 = 1,600円。

これと別に通話料が30秒 / 10円。(「みおふぉんダイアル」というアプリ経由の場合)

 

今まで使っていたauiPhoneは、

基本使用量934円+インターネット接続サービス300円+パケット通信量定額サービス5,700円 = 6,934円。

通話料は30秒 / 20円。

 

月で5,334円の節約。

年で64,008円の節約。

あと30年生きたら、1,920,240円の節約。 

 

ただし、mmsは使えなくなります。

sms、LINEで代替する。

 

softbank回線を使ったmvnoはまだない。

今後、出てくるものと予想されている。

 

■端末の選定

現在、IIJmioから買える端末は、3種。

ASUS ZenFone 2 Laser 27,800円

富士通 arrows M02 29,800円

・HUAWEI P8lite 28,600円

 

値段は横並び。

サービスが提供する端末は無難に使えるだろうから、この中から選びたい。

国産スマホはイマイチな印象があるから、ダメだ。

HUAWEIは中国だから、怪しい。

台湾は親日の国だから、好きだ。

消去法で「ASUS ZenFone 2 Laser」にした。

後日、もうちょっと調べてみると「HUAWEI P8lite」もよい端末らしい。

形はこっちのほうが好みだったし、amazonギフト券のプレゼントもしていたので、こっちでも良かったのかなと思った。

 

■契約

IIJmioの初期契約パッケージをamazonから買う。

IIJ IIJmio SIM 音声通話 パック みおふぉん IM-B043

 

IIJmioから買うと3,000円なので、amazonで買ったほうが断然お得。

ただのシリアル番号なのに、なんでこんなに安くなるのだろう。

 

auに電話でMNP予約番号発行の手続き。

結構待たされて、イラっとする。

ネガティブサービスは手薄にしているのだろうか。

 

IIJmioホームページから契約。

MNP予約番号と初期契約パッケージのシリアル番号を入力。

プランを選択して、購入端末を選択。

本人確認は自動車免許証の写真をアップロード。

本人確認後、端末とsimカードを発送。

 

端末とsimカードを受け取ったら、専用電話番号から切り替えを行う。

数時間後、新端末で同じ電話番号が使えるようになる。

 

家から一歩も外へ出ずに、インターネットと電話だけでmnpできるなんて、スゴイ時代になった。

 

連絡先の移行は端末にソフトがプリインストールされていて、bluetooth経由で簡単にできた。

アプリもほとんど同じものがある。

音楽もiTunesに取り込んだ形式(.m4a)でandroidから聞くことができた。

 

しばらくして気づいたのが、smsの返信が以前使っていたiPhoneに行ってしまっていたこと。

これは、Apple IDに登録した電話番号がiMessageになってしまうため。

Apple IDにログインして、電話番号の登録を解除して、解決。

 

■感想

契約は、最初は難しそうに思ったけれど、実際にやってみると超簡単。

サービスは、外で動画を見なければ、データ量は3GBで充分だし、通話もネット接続も不自由はない。

ただ、androidに慣れませんね。

端末もosもアプリもiosの劣化という感じで、androidのほうがいいという要素はSDカードが使える以外に未だ見つかりません。。

iPhoneは端末の種類が少ないことで、開発すべき範囲が明確になり、品質が安定しているのだと思う。

シンプル=大事。

高いだけの価値があったことがよくわかった。