Tagbangers Blog

Frontend

【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...

Maiden Work

こんにちは、藤岡です。 先週は期末テストがあってお休みさせていただいたので、ブログをかけませんでした。 楽しみにしてくださった皆様方、申し訳ありません。 さて、今週はというと、いよいよアプリの開発に携わることになりました。 具体的に何をするかというと、モックアップという作業で、リニューアルするアプリの模型を作ります。 以前の記事で紹介したNativeScriptで書いていくので、iOSとAndroid版を同時に作ることができます。 まずはurlの名前をつけました。 最初はたかが名前だと思っていましたが、最近はプログラム開発においてどういった名前をつけるかということは、かなり大事なことなんだと考...

NativeScript 触ってみたよ

こんにちは、藤岡です。 Angularを使ってNativeScriptでアプリを作りました。 まずはNativeScriptのホームページを参考に環境構築をし、チュートリアルに沿ってアプリを作ってみました。 完成したものは、このようになりました。 機能としては「ログインしてページを遷移させ、リストを追加し表示させる」だけのものですが、多くの要素が詰まっています。 ちなみに、実機にインストールして起動してみましたが、うまく動いていました。 ソースコード: https://github.com/hiroki0976/NativeScriptTutorial NativeScriptの最大の魅力は、...

templateタグについて

結構昔からあったようなのですが知らなかったので、、 templateタグというものがありまして、素敵だったのでご紹介 templateタグ ページがロードされるときはレンダリングされず、javascriptでアクティベートする必要があるタグ。 テキストではなく、HTML要素として存在しています。 document.importNode() を使って.content のクローンを作ることで、アクティベートできます。(importNodeはデフォルトはシャロークローン) .content プロパティはテンプレートの中身を持つ読み込み専用の DocumentFragment のため、ブラウザでこのプ...