Sign in

目的と背景

主に学習目的でwebアプリをAWSやGCPなどで運用しているのですが、なるべく低コストで運用しようとして各サービスの無料枠で色々頑張っているとデータのIO先をころころ変えたくなります

でちょうど良くLaravelのEloquentで簡単に実装したCRUDがあったので、これにリポジトリパターンを適用してアプリケーションで利用するデータのストレージエンジンの交換を容易にできる状態を実装してみました。

現状

課題

やりたいこと

→ リポジトリパターンで交換しやすいようにした上でMySQL使わない実装に取り替えよう

実装before / after
before

↑ Eloquentのall、findメソッドを利用してコントローラでデータ取得を行なっています。今回の要件は

なので以下の仕様を満たす実装をします。

after(実装サンプル)

↑ Repositoryにデータの取得処理を隠蔽した状態です。こうすることでEloquentとControllerを疎にしてRepositoryがどんな方法でデータを取得するのかControllerは気にしなくて良くなります。実際のRepository実装ではなくInterfaceを注入していますが、このInterfaceにどの実装を注入するかを後述のServiceProviderで解決することで実装の取り替えを容易にするという目的を達成します。

↑ Repositoryの中身です。これはEloquentでデータソースを取得するパターンのものです。

↑ Interfaceです。

↑ ServiceProviderでInterfaceとRepositoryをbindします。実装を取り替えたい場合はここでクラスを切り替えるだけで対応できます。今回は1つのInterfaceにつき常に1つのRepository実装がbindされていますが、同じInterfaceでも特定のクラスにおいては異なるクラスを注入したいという場合には以下のように制御できます。

$this->app->when(PhotoController::class)
->needs(Filesystem::class)
->give(function () {
return Storage::disk('local');
});
$this->app->when([VideoController::class, UploadController::class])
->needs(Filesystem::class)
->give(function () {
return Storage::disk('s3');
});

↑の3つを触りたくて

をやってみたのでそれのログ記事です。

■ Vue CLI 3.0のインストール

https://cli.vuejs.org/guide/installation.html

■ Firebaseのインストール

■ プロジェクト作成

$ vue create sample
$ yarn serve


■ 概要

こんにちは。Applivマンガの開発の責任者の工藤です。

2018年1月ごろから電子コミック書店の開発をやって8月末に本リリースしました。(https://manga.app-liv.jp)

CGM、無料漫画コーナー、有料漫画ストアの3フェーズくらいに分けて開発してきた中で色々試してきたことがあり、

その中からいくつかやって良かったものをリリース後の振り返りも兼ねて投稿したいと思います。

書いてたら結構長くなってしまったので今回はDDDまわりのみとして他の内容は次以降に書きます(たぶん)。

DDDの基本的な話はググればいっぱい出てくるので飛ばしています。

なので対象読者としてはDDD系の資料はざっと適当に斜め読みして大体わかってるけどめんどくさそうだなと思ってる人で、そういう人が本稿で「あー …


概要

画像が多いVue.js実装のwebアプリに`vue-lazyload`を導入してンダリングタイムの短縮を実施したので、使用したライブラリの紹介をします。

使ったもの

https://github.com/hilongjw/vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.

(これ系では一番スターついてる 2018/05)

インストール

$ npm install vue-lazyload -D

(`-D`は` — save-dev`の省略オプション)

CDNもあります。
https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src=”https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)

</script>

組み込み

// main.js
window.Vue = require(‘vue’);
import VueLazyload from ‘vue-lazyload’;
Vue.use(VueLazyload, {
preLoad: 1.3, // 事前ロードする高さの割合指定
error: ‘images/error.png’, // エラー時に表示する画像指定
loading: ‘images/loading.gif’, // ロード中に表示する画像指定
attempt: 1 // ロード失敗した時のリトライの上限指定
});

Components
遅延ロードしたいimgタグのsrcを以下のように`v-lazy`で指定します。


<img v-lazy=”title.image” />

表示エリア外の画像はスクロールイベントをフックに表示エリアの高さから必要なコンテンツが読み込まれるようになりました。

まとめ

https://caniuse.com/#search=srcset
srcsetが主要ブラウザでだいたい実装されてretina対応とか要らなくなったみたいにlazy loadもさっさとネイティブで実装されればいいのになーと思います。

vueのコンポーネントシステムが優秀でこういったサードパーティの実装をさくっと組み込めちゃうので立ち上げ期の最適化よりとにかくスピード優先で、出して改善出して改善をやりたいときにはこういった良くできたフレームワークは良い仕事をしてくれるなーと感じました。

以上、Vue.jsアプリに簡単にlazyloadを組み込める`hilongjw/vue-lazyload`の紹介でした。

ta9to

電子コミックストア開発中 https://manga.app-liv.jp

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store