山田悠の投稿 - Crieit

遅延ロードさせてWebアプリを高速化する

2021-05-10T22:06:08+09:00

遅延ロードとは

基本的にwebアプリは表示するデータを読み込んでからページを表示します。
しかしそれだと重いデータを取得・表示する場合、ページの表示速度が落ちて重たい動作になります。
なので先に軽い部分だけを読み込みそのページに移動してから重いデータを読み込むことで
すべてを表示するまでの時間は変わらない（むしろ少し落ちる）がページの移動速度を大幅に上げることができます。
体感上はかなりサクサクした動作になります。

↓ツイッターの遅延ロード

実装

gem 'render_async'

を書きbundle

次にrenderを書き直します。

変更前：

```erb:index.html
<%= render "data", posts:@posts %>


これを

```erb:index.html
<%= render_async data_path %>
or
<%= render_async data_user_path(@user) %>

このようにする。

次にルーティング

get "data", to: "posts#data", as: "data"
#↓パラメーターが必要な場合
get "data_user/:id", to: "posts#data_user", as: "data"

  def index
    #@posts = Post.all
  end

  def data
   @posts = Post.all
   render partial: "data", locals: {posts:@posts}
  end

  def data_user
    @user = User.find_by(name: params[:id])
    @posts = @user.posts.all

    render partial: "data_user", locals: {posts:@posts}
  end

最後はレイアウトに

```erb:application.html.erb
<%= content_for :render_async %>


を追加。
これだけで遅延ロードが完成します。
![スクリーンショット 2021-05-10 192747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/e7e53d4b-7114-b09c-cf2e-a54ec754d08c.png)


# turbolinksを使用している場合
このままだと時々表示されない場合があります。

<%= render_async data_path, html_options: { 'data-turbolinks-track': 'reload' } %>

html_options: { 'data-turbolinks-track': 'reload' }を追加して
config/initializersにrender_async.rbを作りましょう

```render_async.rb
RenderAsync.configure do |config|
  config.turbolinks = true # Enable this option if you are using Turbolinks 5+
end

jqueyを使う

kaminariやjscrollで無限スクロールなどを実装している場合、これをしないと動きません。

config/initializers/render_async.rb RenderAsync.configure do |config| config.jquery = true end

まとめ

遅延ロードって大きなサービスだと結構使われているのに日本語の情報が少なくて困ったので書きました。
体感上の動作速度がかなり変わるのでぜひやってみてください。

宣伝

https://ammot.net/

AmmotというSNSを作りました。
文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能な自由なSNSです。
マークダウンにも対応しているので皆さん大好きなソースコードもきれいに載せれます。
ぜひ使ってみてください。

僕のツイッターアカ
https://twitter.com/yamada1531

制限の少ない自由なSNS　～Ammot～

2021-04-14T20:37:19+09:00

初めに

この度Ammotというwebアプリを開発しました。
「制限の少ない自由な投稿を」がコンセプトで文字数が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能です。
「ツイッターは文字数制限がきつい、ただfacebookは実名制だしデザインがごちゃごちゃでいや」
という声を聴いたので作ってみました。

https://ammot.net/

qiitaのほうでも宣伝したのでよかったら見てください（ちょい違う内容です。）
https://qiita.com/UTOG/items/d5e6194aaa31b54e97c9

どんなサービスか

↑これがログイン後のトップです。フォローしたユーザーの投稿がHOMEに流れて、
サイドバーにはおすすめの投稿と現在人気のタグを表示しています。

文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能です。

先ほどサイドバーにおすすめを表示していると書きましたが
実はサイドバーはおすすめ機能などなくランダムで表示してるだけです。。。
おすすめ機能（レコメンド）を実装できなかったというのもありますが、僕自身レコメンド機能が結構嫌いなんですよね。同じ、似たようなものばかり出てきて飽きてきますしたまには普段と全く違うものを見たい時もあるでしょう。
だからタイムライン（home)には好きな投稿が流れるようになっていてサイドバーは完全ランダムにしました。

ツイッターのいやなとこ

文字数制限
編集ができない（個人的にめちゃ嫌）

facebookのいやなとこ

制限はないがデザインがぐちゃぐちゃ
実名制はなんかいやだ

この二つSNSの問題を解決するのがAmmotです。

工夫した点

無料プランにこだわった

こういうものはバズらない限り、すぐには成功しません。使用者が全くいなくても１年は公開しようと思います。
でも使用者がいないのに月数百円も取られるの馬鹿馬鹿しいじゃないですか。だからドメイン以外はすべて無料です。
ただherokuの無料プランだとドメインを設定できないのでCloudflareを使い設定しました。

参考記事：
https://qiita.com/serinuntius/items/f7f08b2221f5ad068f5d

しかし、やはりSNSは速度が非常に重要なので少しだけ批判を受けました。自分はもう少しユーザーと投稿が増えてきたら有料のサーバーにしようと思います。

使用した技術

rails6
ruby2.7
postgresql
heroku free
aws s3

gem 'ridgepole'
gem 'slim-rails'
gem 'html2slim'
gem 'pry-rails'
gem 'devise'
gem 'kaminari'
gem 'activeadmin'
gem 'rack-attack'
gem 'rails-i18n'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'carrierwave'
gem 'rmagick'
gem 'rinku'
gem 'fog-aws' 
gem 'dotenv-rails'
gem 'omniauth-google-oauth2'
gem 'omniauth-rails_csrf_protection'
gem 'redcarpet'
gem "rouge"
gem 'redis-rails'
#一部抜いてます

まとめ

今回の開発は今までやらなかったことにめちゃ挑戦できたので楽しかったです
苦手なjquery・javascriptもプレビュー機能のおかげでちょっとわかった気がしてます。

文字数制限や実名制で不便を感じたことのある人はぜひAmmot使ってください！お願いします。

↓URL
https://ammot.net/

↓僕のAmmotのアカウント
https://ammot.net/user/yamada

↓僕のツイッターのアカウント
https://twitter.com/yamada1531

プログラムコードを販売できるサービスまとめ

2020-10-18T18:32:30+09:00

今回はプログラムコードを販売できるサービスをまとめました。

山田悠の投稿 - Crieit

遅延ロードさせてWebアプリを高速化する

遅延ロードとは

実装

jqueyを使う

まとめ

宣伝

制限の少ない自由なSNS　～Ammot～

初めに

どんなサービスか

ツイッターのいやなとこ

facebookのいやなとこ

工夫した点

無料プランにこだわった

デザインとUIにこだわった（つもり）

機能性

マークダウン

使用した技術

まとめ

プログラムコードを販売できるサービスまとめ

code-sell

piecex

osadasoft

補足

まとめ

山田悠の投稿 - Crieit

遅延ロードさせてWebアプリを高速化する

制限の少ない自由なSNS ～Ammot～

プログラムコードを販売できるサービスまとめ

制限の少ない自由なSNS　～Ammot～