Ionic3でAndroidアプリを作る時に困ったいろいろ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近(2018年10月)、Ionic3でAndroidアプリを作って、Play Storeで公開しました。 そこに至るにはいろいろと罠がありましたので、その記録を思い出せるうちに書いて残しておこうと思います。 困ったり解決したりする度にツイートしてたからいけるはず……！！ いくつかの記事にわけて、シリーズとしてまとめておきます。 なお、なんとかリリースできたアプリはこちら。日本語入力速度を測定します。→フリックとローマジ 〜日本語入力スピード測定〜 シリーズ一覧 小さめの奴をまとめて(この記事) Ionicアプリにおける、色の指定のしか
Angular+Firebase ユーザー設計とデータの保護 - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angularのルーティング設定（応用編） 次記事：Angularのngrxを使って状態管理を行う（理論編） この記事で行うこと 前回の記事ではAngularのガードを導入しました。 本稿ではAngular+Firebaseを使った場合のユーザー設計、およびデータの保護について扱っていきます。 ユーザーのデータ設計 認証時のロジックをangularで実装 Firestoreのルールを設定する Firestoreのデータ保護ルール アプリケーションの設計をする際、DBにアクセスを行う入力値のバリデーション設計は、一定のセキュリティを担保する上で必須の工程です。ソースをすべて読むことができるクライアントサイドではこの処理を行うことができないため、サーバーサイドでどのように設計するかが肝になります。 Fi
firebase storageから音声ファイルをダウンロードして再生 - Qiita
この記事で書くこと Firebaseの環境構築や、firebaseのインストールは参考文献に記載しているページに詳しく記載されていますので割愛します。 この記事は、「AngularのプロジェクトにFirebaseを導入する」のangularfire2とfirebaseをインストールまでを終了した状態から開始するものとします。 また、AngularFire2を用いてFirebase Storageからファイルのダウンロード、ダウンロードした音声ファイルの再生について記載します。 angularfire2とは Angularで使い勝手がよくなるようラッピングされた、Firebaseクライアントです。 RxJSを使ってクライアントとFirebase間の同期を行うのが特徴で、現在（2018年9月）のところCloud Firestore、Realtime Database、Authenticatio
AngularDartのアプリをNetlifyでデプロイする - Qiita
課題 AngularDartで意気揚々とWebアプリを作成したものの、Netlifyにデプロイする方法は公式ドキュメントから発見することができませんでした。 npm/ruby/python/goは対応していますが、残念ながらDartはまだ1のようです。 解決策 ドキュメントには見当たりませんでしたが、Netlifyの仕組み上シェルコマンドは実行することができます。そこで、以下のスクリプトをリポジトリに配置し、これを呼び出すことで無事デプロイできるようになりました！ やっていることはdartのSDKを落としてきてbuildを走らせているだけです。DART_VERの部分は要件に応じて変更して下さい。 # !/usr/bin/env bash set -eux DART_VER='2.1.0' curl -o dart.zip https://storage.googleapis.com/dar
Angular でhtml lang を変更する - Qiita
import { Component, LOCALE_ID, Injector, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { constructor( private injector: Injector, private titleService: Title, @Inject(DOCUMENT) private _document: any ) { const locale = this
DjangoとAngularを連携させる時の設定のお話 - Qiita
はじめに フロントにAngular、バックエンドでDjangoを採用した時、Apacheに載せるのにちょっと苦労したのでそのまとめです。 流れ そもそもこの流れで正しいのかって話ですが、 クライアントがApacheにリクエストを投げる APIへのリクエストかそれ以外へのリクエストかを振り分ける APIへのリクエストなら対応するViewを実行してレスポンスを返す 静的ファイルへのリクエストは普通に返す それ以外へのリクエストならtemplateを返す このような形です。 設定 以下の順で行います。 Apacheとpythonの連携 DjangoとAngularの連携 OSはLinux、pythonは3系の想定です。 Apacheとpythonの連携 mod_wsgiのインストール 公式のインストール方法に則ってインストール mod_wsgiとは Apache上でWSGI(Web Server
Angularを学習するにあたって参考にした書籍など - Qiita
前置き 以前、仕事でAngular使うことになったので整理するという記事を投稿しました。 あれから少し経って、だんだんAngularのことがわかってきたので、勉強につかった書籍やサイトなどをまとめておきます。 ※Angular 6を使ってた頃の話になります。 書籍 Angular Webアプリ開発 スタートブック Angular Webアプリ開発 スタートブック 最初に買った本です。 適当に寄った書店でAngular関連の本がこれだけ置いてあって、 とりあえず試しに買ってみた本でした。 感想としては、うーん、、、どうなんでしょう。 内容は薄めです。 ハンズオンのような形式で、かなり易しめに書いてありますが、 かゆいところに手が届いておらず、私の欲しかったような内容ではありませんでした。 とはいえ、書いてある通りに実装すれば動くものは作れましたし、それでなんとなく全体像が掴めたようなところは
Angular でアコーディオンを実装 - Qiita
<!-- アコーディオンを開く閉じるのボタン --> <div class="pointerCursor" (click)="onAccordion($event)"> <i [ngClass]="showDetail ? 'fa fa-minus-circle' : 'fa fa-plus-circle'"></i> 詳しい情報を{{showDetail ? '隠す' : '表示する'}} </div> <!-- アコーディオンの中身 --> <div *ngIf="showDetail" [@accordion]> 〜アコーディオンで表示したい内容〜 </div> import { trigger, style, animate, transition } from '@angular/animations'; @Component({ selector: 'sample-
ASP.NET CoreとAngularでWebページを開発 - Qiita
ASP.NET CoreとAngularでWebページを開発 Visual Studioを使用したASP.NET Core開発でAngularのページを作成する。サーバからデータを受信したり、ページに入力した値をPostする方法について記載する。 環境 Windows 10 ver 10.0.17134 Visual Studio Community 2017 ver 15.7.1 .NET Framework ver 4.7.03056 .NET Core Framework ver 2.0.7 Angular ver 4.2.5 Getする component.ts側は、http.getでASP側のコントローラ（クラス名＋メソッド名）に対応したURLを指定する。データはthis.productsに格納される。
ngrxのaction/reducer/effectの定義をシンプルにする - Qiita
はじめに Angularと組み合わせてngrxを使うと便利だ、という記事をあちこちで見かけるので使ってみようと思ったのですが、独特な「Actionに1つ1つ文字列を割り当てて、クラス化する」という文化にぎこちなさを感じていました。(ngrx/platform actions参照) これはTyped Actionというもので、Typescriptの型チェックの機能を使って、Actionが持つパラメータ(Payload)を入力補完できるようにするために使われています。 よく見かけるカウンタの例を見てみると分かる通り、Action名を変えたかったらあちこちに影響が波及するし、独特な作りがあるのでAction/Reducerのboilerplate(テンプレ)による自動生成を使おう、と言われていたりします。それでも同じ文字列をコピペしまくるのはちょっと…今どき感がない…? 調べてみると同じことを感
別ページにsubmit - Qiita
やりたい事 ・angularで作ったページから、新規タブで別ページにsubmitする ※外部サービスを別タブで開き、ログイン画面をスキップしたい 課題 ・普通にcomponent側からsubmitさせると、Not Foundになる →Cannot POST /***/newtab...という感じのエラー 対応 ・submitをリンクとして設定 <form name="gdlogin" action={{actionUrl}} method="POST"> <input type="hidden" name="sessionid" value={{sessionId}} /> <a href="javascript:gdlogin.submit()" id="outserve">ｶﾞﾝﾀﾞｧｧｧｧﾑ!!</a> </form>
[Angular] ngComponentOutlet を使ってモーダルダイアログを実装する - Qiita
$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 11.0.5 Node: 12.18.3 OS: darwin x64 Angular: 11.0.5 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-b
![[Angular] ngComponentOutlet を使ってモーダルダイアログを実装する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/388b5bd108262f5f97af8684e08eba9a973e9f2d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTkzMzQyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTAwODg4MTU5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTdkM2Q3MzZlZDRkOWEyOThkYmM1YzQ3NmYzNmI1MzFh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df6ef6496ea559ea2ba01a9233a5c9b84%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhciU1RCUyMG5nQ29tcG9uZW50T3V0bGV0JTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJUFCJUUzJTgzJTgwJUUzJTgyJUE0JUUzJTgyJUEyJUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MDhmNDU0Nzc5ZjUyYWUxNjUxODdhOGNkNGUwZDk1Y2I%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTNmMDNkNmIxNjdmOWNjYjdjYTFiYzcxMjgwODFjOGE4%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4232ec7d689ccd4d449839c922943d88)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular Materialのsidenavをコンポーネントとして実装する - Qiita
Why should you try angularjs - Qiita
【ionic】@InputでObjectをバインドするといろいろハマる【Angular】 - Qiita
Angular FormGroupの setValue() と patchValue() - Qiita
Angular: No component factory found for ~. Did you add it to @NgModule.entryComponents? - Qiita
RxJSを覚えないAngularの書き方 - Qiita
angular + firebase逆引きサンプル集 - Qiita
Angularのルーティング設定（応用編） - Qiita
