2020年 1月 の投稿一覧

【Flutter】Redux使用時にStatelessWidgetをアニメーションさせたい時の方法

FlutterでReduxアーキテクチャパターンを採用している場合、StatelessWidgetでの構築がメインになると思います。

ウィジェットをアニメーションさせたい場合が必ず出てくると思いますが、アニメーションは基本的にStatefulWidgetで行う事が前提となっているようで私は悩みました。

 

公式のドキュメントをみてみると、Statelessでアニメーションをさせる例がありますが、パラメータとしてStatefulWidgetで作成したAnimationControllerを持っている為、StatefulWidgetから呼び出す前提の方法になります。

 

この記事では、完全StatelessWidgetだけでウィジェットにアニメーションを持たせる方法を紹介したいと思います。

 

FlutterのReduxについてはこちらの記事でまとめています。

ここから先の解説はこの記事に沿ってReduxを導入した前提で進めていきますので一度ご覧ください。

FlutterにReduxアーキテクチャを実装させる

続きを読む

【Flutter】公式より多機能なWebViewプラグイン「flutter_inappwebview」の使い方

以前に公式のWebViewプラグイン「webview_flutter」について何度か紹介しましたが、その後「flutter_inappwebview」というとてもマルチな機能を搭載していて便利なプラグインを知りました。

webview_flutterの記事はこちら↓

【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

今回はこの「flutter_inappwebview」の特徴と使い方を紹介したいと思います。

続きを読む

FlutterにReduxアーキテクチャを実装させる

Flutterでアプリ開発を深く進めていたら、Widget間のデータのやり取りや状態(State)の管理、UIの制御が複雑になり、シンプルなアプリの域を超えてしまうとデータ管理が難しいなと思い、「状態管理」をするためにFlutterにソフトウェアアーキテクチャを導入することにしました。

 

今回は、Web開発で以前に利用した事があり、Flutterでも利用可能な「Redux」アーキテクチャパターンを採用してみることにしました。

この記事では、FlutterでどのようにReduxアーキテクチャパターンを導入・利用していくのかについて紹介していきます。

続きを読む

Rails+Vue+VueRouterでhistoryモード時に直接表示で404エラーになってしまう対策方法

Railsでwebpackerを利用してVue.jsを取り入れた完全SPAなサイトを構築しようとして、ページのルーティングを設定するためにVueRouterを導入しました。

VueRouterでルーティングを設定すると、デフォルトで下のようなURLに「#」が追加された状態で識別されてしまいます。

 

「#」が途中に混じっているのはあまりいいとはいえないため、VueRouterに「mode: ‘history’」という設定を加えて消してあげます。

 

これで解決か・・・と思いきや、新たな問題が発生してしまいます。

ページ切り替え後のURLを直接アドレスバーに入力して読み込みをかけると、Routing Errorもしくは404エラーが発生してしまいます。

 

調べても対策方法がまちまちで結局どうすればいいか悩みましたが、自己解決(正しい直し方かは不明)したので、今回はこのエラーの原因と対策方法について紹介したいと思います。

 

前提条件

・Rails 6.0.2

・vue 2.6.11

・vue-router 3.1.3

続きを読む