OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScriptで画像プレビュー機能を実装するシンプルなコード

※2022年から技術系の記事は[個人ブログ](https://yamaday0u.net/category/programmer/)に投稿しております。ぜひこちらもご覧ください→[yamaday0u Blog](https://yamaday0u.net/category/programmer/)

Ruby on RailsのアプリでJavaScriptを使ってプレビュー機能を実装するコードを解説します。

こんな感じで画像ファイルを選択すると、プレビューが表示される機能を目指します。
[![Image from Gyazo](https://i.gyazo.com/6f0909148809c6e6057f2da3045b3b82.gif)](https://gyazo.com/6f0909148809c6e6057f2da3045b3b82)
## 実行環境
Rails 6.0.3.1
macOS Catalina バージョン10.15.7

## ビューのコード
ビューはきわめてシンプルです。

```erb:app/views/messages/_form.html.erb
<%= form_with model: @message, id: 'new_message', local: true do |f| %>
  <%= f.text_field :content, placeholder: 'type a message' %>
  <%= f.file_field :image %>
  <%= f.submit '送信' %>
  <div id="image-list"></div><%# プレビューを表示する部分 %>
<% end %>
<%# ↓投稿編集ページ用の画像表示箇所↓%>
<%= image_tag @message.image, id: 'image' if @message.image.present? %>
```

## JavaScriptのコード
コードは以下の通りです。流れをシンプルにして説明すると、

- 画像ファイルが選択されるとその画像ファイルに対してURLが生成
- 生成したimg要素のsrc属性にそのURLをセット
- プレビュー表示用のdiv要素の中に子要素のdiv要素とimg要素を追加する

この流れでプレビュー画像を表示します。

```app/javascript/packs/preview.js
// プレビュー表示機能は新規投稿("/new/")か投稿編集("/edit/")ページでのみ有効にする
if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function(){
    // プレビューを表示するための要素を取得
    const ImageList = document.getElementById('image-list');

    const createImageHTML = (blob) => {
      // 画像を表示するためのdiv要素を生成
      const imageElement = document.createElement('div');
      // 表示する画像を生成
      const blobImage = document.createElement('img');
      // img要素のsrc属性の値をセット
      blobImage.setAttribute('src', blob);

      // 生成したHTMLの要素をブラウザに表示させる
      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    };

    document.getElementById('message_image').addEventListener('change', function(e){
      // 画像が表示されている場合のみ、すでに存在している画像を削除する（編集ページ用）
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }

      // 発火したイベントeの中の、targetの中の、filesという配列に格納された画像を変数に代入
      const file = e.target.files[0];
      // 画像のURLを生成
      const blob = window.URL.createObjectURL(file);

      createImageHTML(blob);
    });
  });
}
```
ビューファイルとJavaScriptのファイルを見比べやすいように横並びにした画像を用意しました。
[![Image from Gyazo](https://i.gyazo.com/c9226622251555e2f9d746063930c39d.png)](https://gyazo.com/c9226622251555e2f9d746063930c39d)

最後に、application.jsに以下の記述を追記して、turbolinksはコメントアウト（または削除）し、preview.jsを読み込むことを忘れないようにしましょう。

```app/javascript/packs/application.js
require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./preview") //このコードを追記
```
Ruby 3.0.0 から 2.7.2 にダウングレードさせる。


#エラー
Unicorn が起動できない問題にぶつかった。

```
[User@ip-address app_name]$ bundle exec unicorn_rails -c /var/www/rails/app_name/config/unicorn.conf.rb -D -E production
master failed to start, check stderr log for details
```

#ヒントになったサイト
https://teratail.com/questions/323548
>解決した方法
Rubyのバージョンを2.7.2、unicornのバージョンを5.4.1にダウングレードしたら動きました。
どうやらRubyの3.0.0にunicornが対応していないらしいです。




```
[User@ip-address app_name]$ cd log
[User@ip-address log]$ tail unicorn.log
I, [2021-02-21T04:10:46.311290 #15000]  INFO -- : Refreshing Gem list
/home/User/.rbenv/versions/3.0.0/lib/ruby/gems/3.0.0/gems/unicorn-5.8.0/lib/unicorn.rb:80: [BUG] Segmentation fault at 0x0000000000000001
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-linux]

-- Control frame information -----------------------------------------------
I, [2021-02-21T04:14:21.956504 #15066]  INFO -- : Refreshing Gem list
/home/User/.rbenv/versions/3.0.0/lib/ruby/gems/3.0.0/gems/unicorn-5.8.0/lib/unicorn.rb:86: [BUG] Segmentation fault at 0x0000000000000000
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-linux]

-- Control frame information -----------------------------------------------
```
エラーログを見てみると、確かに 3.0.0 が邪魔をしている様子。

#バージョン確認

```
[User@ip-address app_name]$ ruby -v
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-linux]
[User@ip-address log]$ unicorn -version
unicorn v5.8.0
```

##Gemファイル編集
```
[User@ip-address app_name]$ vim Gemfile #rubyを2.7.2に、unicornを5.4.1に書き換える。
```

##bundle install
```
[User@ip-address app_name]$ bundle install
Your Ruby version is 3.0.0, but your Gemfile specified 2.7.2
```
おや、エラーだ。Gemfileを書き換えただけではダメみたい。


##rbenvでインストールされているバージョン確認する
```
[User@ip-address app_name]$ rbenv versions
* 3.0.0 (set by /var/www/rails/app_name/.ruby-version) 
```


##rbenv で ruby 2.7.2 をダウンロードする。
```
[User@ip-address rails]$ rbenv install 2.7.2
Downloading ruby-2.7.2.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.2.tar.bz2
Installing ruby-2.7.2...
Installed ruby-2.7.2 to /home/User/.rbenv/versions/2.7.2
```

##再度rbenvでバージョン確認する
```
[User@ip-address app_name]$ rbenv versions
  2.7.2
* 3.0.0 (set by /var/www/rails/app_name/.ruby-version)

##rbenvで2.7.2に置き換える。
[User@ip-address rails]$ rbenv global 2.7.2
[User@ip-address app_name]$ rbenv local 2.7.2
[User@ip-address app_name]$ rbenv versions
* 2.7.2 (set by /var/www/rails/app_name/.ruby-version)
  3.0.0
```


※ 修正（2020年2月22日）
この後、私は手探りしながら以下のコマンドを打ち込んでいましたが、不要のようであるため、コードから削除しました。
[User@ip-address app_name]$ rbenv rehash

参考サイト：[rbenvでrehashがいらなくなった](https://blog.bgbgbg.net/archives/2596)
（@jnchito 様、ご指摘ありがとうございます。）



##bundle install
```
[User@ip-address app_name]$ bundle install
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Fetching rake 13.0.3
Installing rake 13.0.3
Fetching concurrent-ruby 1.1.8
Installing concurrent-ruby 1.1.8
Fetching i18n 1.8.9
Installing i18n 1.8.9

```

通った。
swift辞書「要素を非表示にする」

#お断り
この記事は自分専用メモなのですごい初歩的な事しか書いていませんがご了承下さい。
確認環境
Interface:Storyboard
Life Cycle:UIKit App Delegate
Language:Swift
◉Use Core Data
__○Host in CloudKit
◉Include Tests

#この記事で出来る様になる事
ボタンが押された時に要素を非表示にする

#実装
###UIの実装
Image Viewを配置した後AutoLayoutのHorizontal Center in Container,Vertical Center in Containerにチックを付けて動かない様にします。次にImageで好きな写真を選択します。次にbuttonを配置してAutoLayoutのHorizontal Center in Containerにチェックを付けて動かない様にします。次にadd new constraintsのconstrain to marginsチェックを取ってから下の数値を120にして、最後にpushと名前を変えるこれで完成です。![スクリーンショット 2021-02-21 13.59.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/b2717bb1-9c54-3d66-fa78-54854e0c1580.png)
###コードの実装
最終的なコードはこちらです。

```swift
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var Item: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    @IBAction func push() {
        Item.isHidden = !Item.isHidden
    }

}
```
**@IBOutlet var Item: UIImageView!**ではImageViewとこのコードを関連づける働きが有ります。
**@IBAction func push()**では関連づけしたボタンが押された時に実行される関数です。
**Item.isHidden = !Item.isHidden**ではItemを表示するか非表示にするかを決定する要素がbool型で管理されているので!で反転したbool値を代入して表示非表示を切り替えます。
###関連付け
**Outlets**のitemをImageViewを関連づけて最後に**Received Actions**のpushは![スクリーンショット 2021-02-21 8.23.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/9c584c1b-b9ce-daaf-2761-b981c28bc72e.png)
この選択した物を選びます。
これで完成です。![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/4f3dbd76-7842-6694-5bd7-19decb705881.gif)
#細かいところ
特に無し
AWSのボリュームを変更して反映する

# 概要
掲題の通りです。
たまにしかやらないせいで毎回やり方調べるハメになるので、備忘として手順やらまとめておきます。

# 結論
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html 
に載ってる通りにやればいいよ

# 手順
## コンソール側での作業
いつのまにか、AWSコンソール上からでもボリュームの変更はできるようになっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163629/8d3af85f-f8aa-627f-9fcf-aa152ab24165.png)

増やす分には特にデータ消えたりみたいな問題にはならないので、淹れたてのコーヒーにミルクを注ぐくらいの気持ちでポチっと押します。

## CLI側での作業
EC2にログインして作業します。

```bash
# 状況確認
$ df -hT
ファイルシス   タイプ   サイズ  使用  残り 使用% マウント位置
/dev/xvda1     xfs         16G   12G  4.3G   74% /
tmpfs          tmpfs      395M     0  395M    0% /run/user/1000
$ lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  32G  0 disk # 32GBに反映されてる
└─xvda1 202:1    0  16G  0 part /

# 実際に拡張する
$ sudo growpart /dev/xvda 1
CHANGED: partition=1 start=4096 old: size=33550303 end=33554399 new: size=67104735 end=67108831
$ lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  32G  0 disk
└─xvda1 202:1    0  32G  0 part / # 反映された

$ df -hT
ファイルシス   タイプ   サイズ  使用  残り 使用% マウント位置
/dev/xvda1     xfs         16G   12G  4.3G   74% / #こっちはまだ

$ sudo xfs_growfs /dev/xvda1
meta-data=/dev/xvda1             isize=512    agcount=9, agsize=524159 blks
         =                       sectsz=512   attr=2, projid32bit=1
         =                       crc=1        finobt=1 spinodes=0
data     =                       bsize=4096   blocks=4193787, imaxpct=25
         =                       sunit=0      swidth=0 blks
naming   =version 2              bsize=4096   ascii-ci=0 ftype=1
log      =internal               bsize=4096   blocks=2560, version=2
         =                       sectsz=512   sunit=0 blks, lazy-count=1
realtime =none                   extsz=4096   blocks=0, rtextents=0
data blocks changed from 4193787 to 8388091

$ df -hT
ファイルシス   タイプ   サイズ  使用  残り 使用% マウント位置
/dev/xvda1     xfs         32G   12G   21G   37% / # OK!
```
ちなみに、 `grawpart [device] [number]` の `[number]` 部分には、パーティションの番号を指定します。
今回は `/dev/xvda1` が対象だったので、 1 を指定しています。