【Rails6】vue.jsを使って部分SPAなフロント開発をする方法

前回の記事ではRails6環境でRailsの「webpacker」を使用せず、

フロントエンドをwebpackにそれぞれ役割分担させよう！という趣旨の記事を書きました。

少し続きまして、今回は具体的にVue.jsを使ってフロント周りをどんな感じに作っていくのかを、ディレクトリ構成と役割をメインに一つの例を紹介したいと思います。

続きを読む

【Rails6】webpackerを使わずにフロントエンドをwebpackに任せる方法

前回の記事までで、既存プロジェクトのRails5からRails6へのバージョンアップの説明は終わりましたが、今回はタイトルの通り、Railsのwebpackerを使用せず、バックエンドをRails、フロントエンドをwebpackにそれぞれ役割分担させよう！という趣旨の記事になります。

なぜwebpackerを使用しないで役割分担させる必要があるのかも含めて紹介していきます。

続きを読む

【Rails】WindowsでRails5からRails6にバージョンアップさせる②

前回の記事の続きで、既存サービスをRails5からRails6へバージョンアップについてです。

前回はこちら↓

【Rails】WindowsでRails5からRails6にバージョンアップさせる

 

この記事では、Gemfile再構成～rails serverコマンドで起動まで紹介します。

 

今回修正する既存のアプリの元のバージョン

・Ruby 2.4.4

・Rails 5.2.1

続きを読む

【Rails】WindowsでRails5からRails6にバージョンアップさせる

Rails6が登場して、既存のアプリもいつかバージョン上げないとなと前から思っていたのですが、Flutterでアプリ開発を行う前にと思い、ついにバージョン上げの作業を開始しました。

私のローカル環境はWindowsでしたので、ここではWindowsでのやり方をメインに進めていきます。

少し長くなりそうなので、この記事ではRubyとRailsのバージョンアップまでを紹介して、それ以降はまたの記事で紹介します。

 

既存のアプリの元のバージョン

・Ruby 2.4.4

・Rails 5.2.1

続きを読む

【Flutter】WebView_Flutterを使ってDartとJavaScript間でデータのやりとりをする方法

前回の記事でFlutterにWebViewを使うことができるWebView_Flutterという公式プラグインについてご紹介しました。

今回は、Webview_Flutterを使ってどうやってFlutterアプリ(Dart)とWebページ(JavaScript)間でデータ交換をするのかについて紹介していこうかと思います。

前回同様、あまり情報がなく基本的に私が試した内容を紹介する為、正確な方法なのか正しい認識なのかは少しわからない点もあります。

Webview_Flutterの導入と基本的な使い方については前回の記事をご覧ください。

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

続きを読む

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

FlutterにもWebViewを使うことができるWebView_Flutterという公式プラグインがあります。

この記事では、このプラグインを使ってアプリにWebサイトの表示とアプリの中に実装したローカルHTMLファイルを表示させる方法を紹介します。

pub.dev: https://pub.dev/packages/webview_flutter

 

ただ、WebViewを取り扱っている日本語ドキュメントが少なく、英文もしくは中国語ばっかりだったので（2019年現在）、私のできる範囲で調査した内容をこの記事で紹介します。

私のようにFlutterでWeb技術を搭載したいと考えている人の参考になればと思います。

続きを読む

【NativeScript-vue】WebViewを使ってアプリ側とデータのやり取りをする方法

先日、NativeScript-vueで、WebViewとアプリ間でデータのやり取りってどうするんだろう？と疑問に思って実際に調査してみました。

今運営しているAnybookをアプリ化する時に、HTMLを利用したアイテム達をどうしても利用したいと考えていて、Webとアプリの間でデータ通信できたら便利だなぁという考えに至りました。（他にもいろいろ理由がありますが…）

2019年現在、NativeScript-vueの記事はとにかく少ない状況なので、上記のようなデータ通信をやりたい人の助けになればと思います。

続きを読む

NativeScript-vue入門！特徴と環境作成について

Web開発技術を利用したスマホ向けアプリのクロスプラットフォーム開発（１つのソースでAndroid / iOS両方のアプリを動かす開発方法）というと、Cordova、Monaca、ionicなどのWebViewを軸にした開発方法を思い出しますが、今回紹介する、「NativeScript-vue」は少し異なった特徴を持っています。

続きを読む

【JS】オシャレで高機能なテキストエディタプラグインQuill.jsの使い方

JavaScriptにはブログのような記事を書くことができるWYSIWYG(カスタマイズ可能な高機能エディタ)エディタプラグインがいくつかありますが、私のおすすめ（これしか使ったことない…）のQuill.jsというプラグインの使い方を紹介します。

ちなみに無料・商用利用OKのプラグインです。

続きを読む