Tagbangers Blog

Frontend

Devチーム研修 Angular (Material)について

こんにちは! 朝家を出るときは寒いなと思っているのに、会社に着く頃にはじわりと額に汗が滲む山﨑です。 ご近所でも、「あの子はよく額に汗が滲んでいる」と評判です。   さて、前回はOpsチームで行った、AWSの環境構築についてでしたが、 今回はDevチームにて、Angular Materialを利用したWebページの作成について研修を行いました。   入社初日に先輩社員から 「研修の中でJavaでMacのコマンド作るんすよ大変スよー」 と言われていたので、日曜から月曜の通勤電車の中まで、みっちりJavaの基礎から勉強していた私。   蓋を開けると 「いやでもそれツマンナイから実際にフロントの開発...

Angular Material 6でFont Awesomeを利用してアイコンを表示する

Angular Materialではを使用することでMaterial Iconsを簡単に利用することができます。 Angular Material - Icon Material Icons 利用する際はindex.htmlでスタイルシートを読み込むことを忘れないよう注意してください。 しかしMaterial Iconsは種類が少なく、欲しいアイコンがない場合があります。 そんな時はFont Awesomeが便利です。 Font Awesome かなりの種類のアイコンが揃っており、基本的に無料で利用することができます。 有償のPro版では各アイコンの見た目の違うバージョンが利用できます。 A...

Amazon Linux に Google Chrome をインストールする

PhantomJS の開発が終了したらしい。 https://github.com/ariya/phantomjs/issues/15344 ということで、CI サーバ上で動作しているヘッドレスブラウザを Chrome にかえるべく以下のサイトにたどり着きました。 https://intoli.com/blog/installing-google-chrome-on-centos/ 以下のコマンドで一発インストール OK。 curl https://intoli.com/install-google-chrome.sh | bash 試した環境は以下の通り。 $ cat /etc/system...

【NativeScript】ブレイクポイントを用いたデバッグ

NativeScriptで開発を進めていて、ブレイクポイントを張ってデバッグを行う手法があることを発見したので、紹介します。 ※公式によると、Androidのみしかサポートされていません。 まず、以下のコマンドでエミュレータを立ち上げます。 tns debug android そして、立ち上がる時に、コンソールに以下のようなURLが流れてきます。 # NativeScript Debugger started # To start debugging, open the following URL in Chrome: chrome-devtools://devtools/bundled/in...

TypeScriptのthisについて

TypeScriptで開発をしていて、thisキーワードで引っかかってしまったので、共有したいと思います。 具体的には、JavaScriptとTypeScriptでthisの扱いが異なるために問題が発生しました。 TypeScriptで、関数の定義方法が2つあり、ラムダ式の var lambda = () => { // 処理 } と、function式の var func = function() {   // 処理 } があります。 その中でも、2つ目のfunctionを用いたものについては、thisを定義し直す必要があって、ラムダ式を使う前に var _this = thi...

Angular5へアップデートする

11月の頭にAngularのバージョンアップが行われ、最新のAngular5が発表されました。 それに伴い現行のプロジェクトで、あるエラーに出くわしたので、その解決法を紹介します。 まず、エラーの内容は以下の通りです。 https://github.com/KillerCodeMonkey/ngx-quill/issues/76 しかし、この議論からは解決策が得られなかったので他の方法を探しました。 すると、pachage.jsonを一括で更新するncuコマンドを実行することで解決することができました。 具体的には、 npm install -g npm-check-updates でncuを...

RxJS基礎

NativeScriptで開発していく上で、RxJSの知識が必要になってきたので、勉強しました。 今日は、RxJSとはどういったもので、どういう時に使えるのかサンプルを示しながら軽く説明したいと思います。 まずはRxJSに入る前に、Reactiveというのがどういうものなのかわかっていないといけないので、そこについて押さえておきます。 このスライドがわかりやすかったのですが、「Reactive」とつくものは全て プログラミングモデル ランタイム アーキテクチャ の3つの要素からなります。 そして、それぞれ Reactive Programming Reactive Streams Reacti...

【NativeScript】Progress所感

こんにちは、藤岡です。 最近は業務でNativeScriptを使ってアプリケーションを作成しているので、その中で便利だと思ったUIをいくつか紹介したいと思います。 このページで大体の概要はつかめるかと思いますが、カレンダーやチャート、データフォーム、サイドドロワーなどを作ることができます。 angularを使ったサンプルはここから参照できます。 具体的にどういったものが作れるのかというと、データフォームですら鮮やかなアニメーション(特にAndroid版)を使うことができます。 静止画なのでわからないかもしれませんが、Android版では時計の針がタップしたところにアニメーションを伴って動くよう...

夏休み入りました。

こんにちは、藤岡です。 大学は夏休みに入ったので、出勤できる日にちが増えました。集中的に作業が進められるのでいつもより効率がいいです。 NativeScriptとAngularを使って開発をしているのですが、今まではほぼJavaしか触っていなかったので、新鮮味があって楽しいです。 アプリの画面遷移では、パスを指定してルーティングを通したり、どのようなディレクトリ構成にしたらわかりやすいかを考えて作っていくので、アプリ開発の基礎を実際的に学べている気がします。 親要素に対してどのように子要素を配置するのが自然かを考慮してルーティングしなければならなかったりもするので、案外奥深いです。 https...

NativeScriptのAndroidエミュレータ導入でコケたお話

こんにちは、UIチームの楠です。 弊社では現在のNativeScriptを使用したネイティブアプリの作成に取り組んでいますが、導入の際、コケた部分についてお話したいと思います。 前提として、NativeScriptオフィシャルのドキュメントに従って必要なもののインストールを進めました。 難なく全てインストールされたように見えた後、確認のために tns doctor してみたところ、 You need to have Android SDK 22 or later and the latest Android Support Repository installed on your system...