OmniAICreator/Qiita-1.07M huggingface dataset:
CodeBuild設定メモ


## 命名例

dev-myservice-api-codebuild

## ソース設定

今回はGitHub Organization内のprivate repositoryから取得。
personal access tokenで取得していたが、terraform化する時に`source.auth`がOAUTHしか指定出来なかったのでterraformでは`auth`項目を設定せずにAWSコンソール上でpersonal access tokenを保存した。
personal access tokenは個人アカウントではなく、organization共用のアカウントを作ってそのユーザで生成したものを使う。

## 環境
ビルドをカスタムイメージ上で行って実行用イメージをECRなどにpushする場合、docker in dockerよりもDockerのマルチステージビルドで行ったほうが色々楽だった。
ECRにpushする時にdocker in dockerだとAWS CLIのインストールから認証まで面倒を見ないといけないが、AWSが提供しているマネージドイメージであればbuildspec.yml内でAWS CLIが利用できるのでCodeBuildからECRへのログインが簡単になる。
あとビルドイメージ用のECRリポジトリを用意しなくてよくなる。

動作させるサブネットを指定する時はプライベートサブネット。
VPC設定が正しいかどうかを「VPC設定の確認」というボタンで検証できるのでいちいちビルドしなくてもよい。
buildspec.yml内で利用する環境変数も設定出来る。

## Buildspec

CodeBuild標準は`プロジェクトルート/buildspec.yml`というファイルを置いておけば勝手に読み込んでくれるが、dev/stg/prdのような環境毎にファイルを分けることも出来る。
`プロジェクトルート/codebuild/${env}-buildspec.yml`のようなディレクトリとファイルを作成している場合、CodeBuildのbuildspec名指定でどのファイルを読み込むか指定できる。
今回は環境毎にbuildspec.ymlを分けたが、基本的に一緒なのでbuildspec.yml自体は1つで各動作は環境変数で変更するようにしたほうが良さそう。
ビルド開始時にビルドするブランチを指定出来るが忘れることもありそうなので、buildspec.ymlでcheckoutする。(ビルド開始時のデフォルト設定も出来るようにしてほしい…)


## アーティファクト

成果物をS3に配置することも出来る。
今回はビルドしたイメージをECRにpushしたので使わない。(pushはbuildspec.yml内で行う)

## ログ

ビルド時のログを意図的に出力するようにしないと確認できないので設定する

## ビルド開始
GitHubなどから取得している場合ソースバージョンが指定できる。
ブランチやタグなどが指定出来、developブランチはそのまま`develop`と入力すればブランチが切り替わる。
buildspecでcheckoutするようにしているので普段は入力しなくてもいいが、buildspec.yml自体の変更がある時は明示しないといけない。
Jupyterのmatplotlibを使用する際の日本語豆腐を解決

# TL;NR
dockerでmatplotlibの文字化けと戦う

### 環境: 
docker on ubuntu18.04
python3

### 課題:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325310/0def2c79-10f0-7e2e-289b-0e2537fd04f5.png)

### アクション:

matplotlibのfont.familyのフォントを指定

    import matplotlib.pyplot as plt
    plt.rcParams['font.family'] = 'IPAGothic'
    plot somthing
    
    UserWarning: findfont: Font family ['IPAGothic'] not found. Falling back to DejaVu Sans(prop.get_family(), self.defaultFamily[fontext]))

fontキャッシュ削除

    rm ~/.cache/matplotlib/fontList.*

fontダウンロード(今回はIPAGothicを使用)
https://ipafont.ipa.go.jp/old/ipafont/download.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325310/b9fcf968-235e-fb69-722e-853b3897c0a6.png)

matplotlibのfontPathを特定

    print(matplotlib.matplotlib_fname())
    /usr/local/lib/python3.5/dist-packages/matplotlib/mpl-data/matplotlibrc

ファイルを展開し.ttfファイルをdockerのfontPathにcopy

    docker cp ipag.ttf コンテナNAME:/usr/local/lib/python3.5/dist-packages/matplotlib/mpl-data/fonts/ttf/

# Done

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325310/3e2182b4-c389-83ff-da6b-62550f5c6571.png)

# 恒久対応
matplotlibrc設定ファイルを修正

    cp /usr/local/lib/python3.5/dist-packages/matplotlib/mpl-data/matplotlibrc ~/.config/matplotlib/

ファイル内のFontセッションを修正

    font.family         : IPAGothic
Graalvmを触ってみてハマった事など

# Graalvmを触ってみてハマった事など

## Graalvmとは

```

GraalVMは、JavaScript、Python、Ruby、R、Java、Scala、Kotlin、ClojureなどのJVMベースの言語、およびCやC ++などのLLVMベースの言語で作成されたアプリケーションを実行するためのユニバーサル仮想マシンです。

GraalVMはプログラミング言語間の分離を取り除き、共有ランタイムでの相互運用性を可能にします。スタンドアロンでも、OpenJDK、Node.js、Oracle Database、またはMySQLのコンテキストでも実行できます。
```
公式の翻訳まんまだけど。  

[公式](https://www.graalvm.org/)からは代表的な機能として
- Polyglot
- Native
- Embeddable
とかあったのだけど今回Nativeを触る  
native-imageを触ってみた

## Nativeを触る前に

[意外と知らないJITコンパイラとAOTコンパイラの違い](https://furien.jp/columns/338/)は読んでおくといい

通常scalaなどは`JITコンパイラ` 生成物が中間ファイルでjavaに任せて実行する。  
`AOTコンパイラ`だとOSに依存した実行ファイルを生成する。  
OS側にはjavaは不要になり実行ファイルのみで起動が可能になる。

### 環境構築など
[ScalaをGraalVMで動かす&ネイティブイメージ化する](https://qiita.com/petitviolet/items/0ccdf3d376b482f13c43)主にここを参考にできるので  
省略

ただ`native-image`などは追加でインストールする必要に変わったので
その当たりは公式を参考に下記みたいに追加する必要がある。  

```
$ $GRAALVM_HOME/bin/gu install native-image
```

また今回はコマンドラインだったけど、`brew search graalvm`だと
```
brew search graalvm
No formula or cask found for "graalvm".
Closed pull requests:
Add GraalVM Community Edition 1.0.0 RC12 (https://github.com/Homebrew/homebrew-cask/pull/58492)
Add GraalVM v1.0.0-rc10 (https://github.com/Homebrew/homebrew-cask/pull/57374)
```
な感じなんでupdateとかすればbrewでインストールは可能になりそう  

### scalaをnative化

DB接続系のライブラリなどを使うとリフレクション周りで落ちた

制約事項[LIMITATIONS.md](https://github.com/oracle/graal/blob/master/substratevm/LIMITATIONS.md)に記載されているので確認すると良い。

後で知ったが[GraalVM の native image を使って Java で爆速 Lambda の夢を見る](https://qiita.com/kencharos/items/69e43965515f368bc4a3)こちらに上がってる記事でリフレクション周りの設定は少し解決できるっぽい

## 感想
まだscalaでしかやってなかったがnodeなどもちょっと試してみたい。  
またnative以外ももうちょっと理解はしていきたいと思う  

### 参考URL
- [ScalaをGraalVMで動かす&ネイティブイメージ化する](https://qiita.com/petitviolet/items/0ccdf3d376b482f13c43)
Dagger2についてメモ

# Dagger2とは
依存性注入フレームワークのこと。

# 内容
自身の理解のために、公式ページの以下の内容を荒く訳してます。
https://dagger.dev/users-guide.html

- Declaring Dependencies
- Satisfying Dependencies
- Building the Graph

## `@Inject`アノテーションについて
Daggerがクラスのインスタンスを作成するために使用するコンストラクタに`@Inject`アノテーションを付与する。新しいインスタンスが要求される際に、Daggerは要求されたパラメータを取得し、このコンストラクタを呼ぶ。

```Thermosiphon.java
class Thermosiphon implements Pump {
  private final Heater heater;

  @Inject
  Thermosiphon(Heater heater) {
    this.heater = heater;
  }

  ...
}
```

Daggerは`@Inject`が付いたフィールド変数に直接注入する。
この例では、フィールド変数のheater、pumpにHeaterインスタンスとPumpインスタンスを注入する。

```CoffeeMaker.java
class CoffeeMaker {
  @Inject Heater heater;
  @Inject Pump pump;

  ...
}
```

## `@Provides`、`@Module`について
デフォルトでは、Daggerは要求された型のインスタンスを構築することで各依存関係を満たす。
しかし、`@Inject`はどこでも使えるわけでない。

- インタフェースは構築できない
- サードパーティのクラスはアノテーションを付与できない
- 設定可能(Configurable)なオブジェクトは設定していなくてはいけない

これらのケースでは`@Provides`アノテーションを付与されたメソッドを使う。
返り値の型は依存関係を満たすものを定義する。
例えば、provideHeater()はHeaterが要求された時に呼ばれる。

```java
@Provides static Heater provideHeater() {
  return new ElectricHeater();
}
```

`@Provides`メソッドは自身が依存関係を持つことを可能にする。
以下は、Pumpを要求された時にThermosiphonを返すメソッド。

```java
@Provides static Pump providePump(Thermosiphon pump) {
  return pump;
}
```

全ての`@Provides`メソッドはモジュールに所属しなければならない。
モジュールとは`@Module`アノテーションを付与したクラスのこと。

```DripCoffeeModule.java
@Module
class DripCoffeeModule {
  @Provides static Heater provideHeater() {
    return new ElectricHeater();
  }

  @Provides static Pump providePump(Thermosiphon pump) {
    return pump;
  }
}
```

## `@Component`について
`@Inject`と`@Provides`が付与されたクラスは、それらの依存関係がリンクされたオブジェクトのグラフを形成する。
アプリケーションのメインメソッドやAndroidアプリケーションのようなコードを呼び出すものは、明確に定義された一連のルートを介してグラフにアクセスする。
Dagger2では、その一連は引数を持たないメソッドを持つインターフェースによって定義され、望む型を返す。そのようなインターフェースに対して`@Component`アノテーションを付与し、modulesパラメータに対して必要なモジュールクラスを渡す。
Dagger2はそのインターフェースを実装する。

```java
@Component(modules = DripCoffeeModule.class)
interface CoffeeShop {
  CoffeeMaker maker();
}
```

その実装はDaggerの接頭辞を持つインタフェースと同じ名前を持つ。
実装上ではbuilder()メソッドを呼ぶことでインスタンスを取得し、返されたbuilderを使い、依存関係をセットし、新しいインスタンスをビルドする。

```java
CoffeeShop coffeeShop = DaggerCoffeeShop.builder()
    .dripCoffeeModule(new DripCoffeeModule())
    .build();
```

デフォルトコンストラクタでアクセスできる全てのモジュールはもし何も設定されていなければビルダーが自動的にインスタンスを構築するので削除できる。
モジュールの`@Provides`メソッドが全て静的なら、その実装はインスタンスを全く必要としない。
もし、ユーザーが依存関係インスタンスを作成することなく、全ての依存関係が構築できるなら、生成された実装にはcreate()メソッドが用意される。これを使用し、ビルダーを処理せず新しいインスタンスを取得できる。

```java
CoffeeShop coffeeShop = DaggerCoffeeShop.create();
```

CoffeeAppは注入されたCoffeeMakerを取得するためにCoffeeShopのDaggerに生成された実装を使用できる。

```CoffeeApp.java
public class CoffeeApp {
  public static void main(String[] args) {
    CoffeeShop coffeeShop = DaggerCoffeeShop.create();
    coffeeShop.maker().brew();
  }
}
```

グラフが構築され、エントリポイントが注入されたので、Coffee Maker Appが実行できる。

```
$ java -cp ... coffee.CoffeeApp
~ ~ ~ heating ~ ~ ~
=> => pumping => =>
 [_]P coffee! [_]P
```

以上です。
fontawesomeが表示されず◻︎(四角)になってしまう場合の対応方法


今回の記事では、[fontawesome](https://fontawesome.com/)という超便利なWebアイコンツールを使おうと読み込んだものの、
うまく表示されない場合の解決パターンをご紹介します。

# バージョンの確認

まずバージョンの確認をしましょう。
CDNを使用している場合は、リンク内にバージョンが書いてるのでそこを確認して下さい。

```html:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
```

この場合は「v5.8.2」です。
2019年5月時点では、このバージョンが最新になります。

旧バージョンは4から始まるバージョンです。

```html:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

「4.7.0」と書いています。

このバージョンの違いで、使用できるアイコンの種類と、cssでの指定方法が変わってきます。

## 使用できるアイコンの確認
バージョンごとの使用できるアイコンの確認する方法のご紹介です。
まず、普通に[fontawesome](https://fontawesome.com/)のページより検索した結果が、新バージョンで使えるアイコンです。

トップページ下の部分の↓赤枠で囲まれているところから飛んだ先が旧バージョンで使えるアイコン一覧です。

<img width="1448" alt="Font_Awesome.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240803/e1728b16-465a-ca04-2d9e-697363202a7e.png">

## CSS指定の確認

CSSで指定する場合、`content: "\f105";`という感じで記述してあげます。
さらにfont-familyも指定する必要があるんですが、これがバージョンによって違います。

新バージョン

```css:
li::before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f105";
}
```

旧バージョン

```css:
li::before {
  font-family: FontAwesome;
  content: "\f105";
}
```


# Freeのアイコンか

PROと書いてあるアイコンは有料版しか使えないので、注意しましょう。

<img width="1382" alt="acorn___Font_Awesome.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240803/6ead53a1-c048-c285-2d64-9e81132b3050.png">

# その他

他にも、font-weight の値を変えてみると表示されたりします。
この記事に書いてある方法で表示できるようになれば幸いです！
文字列のアルファベットを数字に直して加算して出力する


渡された文字列のアルファベットを数値に直して加算して結果を出力するプログラムです。C言語です。

アルファベットのAからZまでが1から26まで（小文字のaからzまでも同様に1から26）

の数値に対応し、語の文字列のアルファベットを順に加算していった結果が、その語の値となります。

スペースを空けても渡された引数を全て読み込むので、英熟語にも対応し、英文も対応していて、その和を返します。

```lc.c
/*
  文字列のアルファベットを数字に
  直して加算して出力する

  filename : lc.c
  Usage1 : lc alice pleasance liddell
  Usage2 : echo alice pleasance liddell | lc

  output : alice pleasance liddell 164

  to complie : cc lc.c -o lc
*/
#include  <stdio.h>
#include  <stdlib.h>

int pv(char *sp) {
  int s=0;
  printf("%s ",sp);
  while(*sp!='\0'&&*sp!='\n') {
    if (*sp>='A' && *sp<='Z')
      s+=*sp-'A'+1;
  else if (*sp>='a' && *sp<='z')
      s+=*sp-'a'+1;
    ++sp;
    }
  printf("%d\n",s);
}

int main(int argc,char *argv[])
{
  char  *sp;
  char  sentence[65536];
  int   i,s,cnt,ch;

  if (argc==1) {
    sp=sentence;
    while(1) {
      ch=fgetc((FILE *)stdin);
      if (ch==EOF) exit(0);
      if (ch=='\n') {
        *sp='\0';
        pv(sentence);
        sp=sentence;
        }
      else *sp++=ch;
      }
    }
  else {
    for(i=0,cnt=1;cnt<argc;cnt++) {
      sp=*++argv;
      while(*sp!=0) {
        sentence[i++]=*sp++;
        }
      *sp='\0';
      }
    }
  
  pv(sentence);
  exit(0);
}

```

### おまけ

lcのguiのラッパーです。bashのシェルスクリプトです。zenityのインストールが必要です。
(1)lcをPATHの通ったディレクトリに置き、
(2)Arch Linux:`sudo pacman -S zenity`,Ubuntu:`sudo apt-get install zenity`等としてzenityをインストールし、
(3)`chmod +x lc-gui`として実行権を付け、
(4)`./lc-gui`として実行してください。

```lc-gui
#!/usr/bin/bash
while :
    do
    i=$(zenity --entry --title="Letter Count" --text="Input text" --entry-text="")
    j=`echo $i|/home/gar/bin/lc`
    if zenity --question --text="$j\ncontinue?"; then
        continue
    else
        break
    fi
    done
```
[Python3.6]サーバで作成してダウンロードしたCSVをExcelで開くと日本語が文字化けする時の対処法

# 環境
* macOS Mojave ver10.14.3(Client)
* Excel for mac ver16.23(Client)
* Django 2.1(Server)
* CentOS 7(Server)
* Python 3.6(Server)
* Apache 2.4(Server)
* mod_wsgi 4.6.5(Server)

# 原因
エンコード用の文字コードにutf-16を指定していない。

# 対処法
ファイルを開く（作成する）際にencodingにutf-16を設定する。

```
open('filename', mode, encoding='utf-16') 
```
Unity Exploderアセットで、"Tag: Exploder is not defined."とでる場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37406/80735222-8d9b-1ade-1e54-90ce834a5c81.png)
Exploderアセットで、

* Exploder Object
* Exploder Singleton

この２つがあればいいと思っていたのですが、
何かのタイミングで

```Tag: Exploder is not defined.```
というエラーが頻発するようになり、
デモシーンを確認するとFragmentというスクリプト使っているようなのでこれも置くようにしたら、
エラーがなくなりました。

ただ、このfragment何もしなくても、問題なく生成される場合もあるので、なかなか気づかない。

Fragmentスクリプトを追加すると 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37406/8bc63ddb-fa29-7e27-a7ca-936a29058271.png)

改善されました。

## TIPS

また、exploderアセットを使う場合、処理負荷が気になったところ、
破壊対象はすべて```Exploder```タグをセットしておくと処理負荷が軽減されました。
（もともと楽してsingletonで消していたので、破壊対象が多い場合かなり違う）
element ui enterキーで フォーム送信

以下でフォームを送信せず、メソッドを動かせる。

onSubmit メソッドを動かす。

参考
http://imejin.biz/magazine/el-form-submit-on-enter/


```

<el-form  :rules="rules" ref="form" :model="form" @submit.native.prevent="onSubmit('form')">

                <el-form-item label="占いたい人の名前" prop="name">
                    <el-input v-model="form.name"></el-input>
                    <div class="t-c view-count"><span v-if="fortune.higawari">毎日変わるよ！</span></div>
                </el-form-item>

                <el-form-item style="text-align: center;">
                    <el-button type="success" native-type="submit">占う</el-button>
                </el-form-item>
            </el-form>

```
[GASで実装する] 同一ページ内で任意の場所までスクロールするやつ

#GASは1プロジェクト1ページ
ページ内遷移も簡単ではない
移動したい先に`<タグ id='xxx'>`をおいて、そこに`<a href="#xxx"></a>`みたいなことはできない

##情報量が増えてくると、何らかのナビゲーションは必要
ということで調べてみた

複数ページを作成して、`doget.gs`にパラメータを設定して分岐させる。という方法をわかりやすく説明されているのがこちら
[GoogleAppsScript(GAS)でページ遷移を擬似的に実装する方法](https://qiita.com/kakkiichan/items/a6a653bbe113a1dee2eb)
同様の実装は複数のブログなどでも紹介されているので、割とポピュラーな実装方法なのかも

##jQueryならなんかできるっぽい？
わからなかった（どうもjQueryのコードは見ても理解できない）

##jQueryがダメならVueで何とかできる？
Watchは使えるか？

```vue.js:watch
watch: {
  '$route': function (val) {
    if (val.hash.match(/^#/)) {
      document.getElementById(val.hash.replace(/^#/, '')).scrollIntoView()
    }
  }
}
```
今回のケースでは使えなかった

##smoothscrollってどうよ
続いて参考にさせていただいたサイト
[意外と簡単！Vue.jsでスムーススクロールとトップへ戻るボタンを実装する方法](https://cleysense.com/blog/smooth-scroll-with-vuejs/)

CDNから

 ```vue.js:CDNのリンクをhtmlに追加
<!-- vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- vue scroll 画面スクロール用 -->
<script src="https://cdn.jsdelivr.net/npm/vue-smooth-scroll@1.0.13/dist/vue-smooth-scroll.min.js"></script>
```

```vue:smoothscroll.html
<a href="#section1" v-smooth-scroll>go to Section1</a>
.
.
.
<div id="section1">セクション１</div>
```

```vue:vuedirective.js
Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    };
    window.addEventListener('scroll', f)
  }
});
```
上記をVueインスタンスの前に記述

以上でとりあえず動く

「トップへ戻る」的なボタンの実装がうまくいかないのが気になるので引き続き調べる

#参考
[vue-smooth-scroll](https://www.jsdelivr.com/package/npm/vue-smooth-scroll)
[HTML Service: Create and Serve HTML](https://developers.google.com/apps-script/guides/html/)
[Django][CentOS7][Python3.6]ディレクトリアクセス時に発生するPermission denied 13の対処法

# 環境
* Django 2.1
* CentOS 7
* Python 3.6
* Apache 2.4
* mod_wsgi 4.6.5

# 問題
ルートディレクトリから対象ディレクトリまでの全てのディレクトリのオーナーをapache:apacheに、権限をdrwxrwxrwxに変更したが```Permission denied```となる。

# 原因
SELinuxが有効になっていた。

# 解決策
SELinuxを無効化する。
[参考]https://qiita.com/hanaita0102/items/5d3675e4dc1530b255ba
ngrok大好きな私がServeoで感動した話

### 追記(2020/01/03)
[コメントで教えていただいた](https://qiita.com/sskmy1024y/items/8395c85d09931d7dea27?utm_campaign=email&utm_content=link&utm_medium=email&utm_source=public_comment#comment-1c04e71f9ff2bb8b1a76)のですが、2020年1月3日現在[一時的にサービスダウン](http://serveo.net/)しているようです。
同じようなサービス[`localhost.run`を使ってみた](https://qiita.com/sskmy1024y/items/2c5946d587b5aca6c99e)ので、よろしければ。

# はじめに
自分用のメモみたいなものなので、言いたいことしか書かれてないです。

# まずngrokとは
[ngrok](https://ngrok.com/)ってご存知ですか？
ローカル上で開発してるサーバーやネットワークサービスをそのまま外部に公開できるサービスで、`heroku`のサーバーに上げない版みたいなやつです。
`localhost` にドメインを振り分けてくれるイメージですかね。

## 使い方

インストールが必要です。

```bash
$ brew cask install ngrok
```

使い方も簡単で、

```bash
$ ngrok http <localhostのポート番号>
ngrok by @inconshreveable     (Ctrl+C to quit)    
                                                                                                                                                                                                                                                                              
Session Status                online                                              
Account                       hogehoge (Plan: Free)
Version                       2.3.29
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://<ランダムな文字列>.ngrok.io -> http://localhost:2300
```

Forwardingの横に書かれている `http://<ランダムな文字列>.ngrok.io` が公開アドレスになってます。

## メリット
* LINE Botをはじめ、実際に動いているサーバーに繋がないと試せないようなプロダクトを作っているときに、開発しながら試せるのがとても便利
* ローカルでの変更が即座に反映される（アップロードの必要がない）
* アクセスログが見やすい

## デメリット(?)
* アカウント登録しないと時間制限がある模様（よく調べてない）
* 無料アカウントだとドメイン指定ができないため、再起動するたびにアドレスが変わる
* 有料アカウントにすれば固定できるけど、中々お高め……

# Serveoが神だった
ngrokのドメイン固定したいな。でも有料アカウントちょっとお高いな。
そんな時に見つけたのが、[Serveo](https://serveo.net)というサービスです。**感動しました**。

## 使い方
```bash:サブドメイン指定なし
$ ssh -R 80:localhost:<ポート番号> serveo.net
```
```bash:サブドメイン指定
$ ssh -R <指定したいサブドメイン>:80:localhost:<ポート番号> serveo.net
Forwarding HTTP traffic from https://<指定したサブドメイン>.serveo.net
```

たったこれだけ。`https://<指定したサブドメイン>.serveo.net` でアクセスできる。

## メリット
* **インストールもアカウント登録も必要ない**
* **サブドメイン指定できる**
* タイムアウト時間を指定できる
* なんか色々できる（端折った）

## デメリット
（セキュリティ面がちょっと気になる……）

#### 追記（2019/06/26)
起動した直後は好調なんですが、10分20分と経つとコネクションが切れてしまい、長期的な用途では使い物にならなかったです……。
`~/.ssh/config`を書き換えたり、 `autossh`を使ってみたりもしたのですが、ちゃんと動いてるの？といった挙動。
結局`ngrok`に戻ってしまいました。解決策ある方教えてください……。


# まとめ
最近LINE Botの開発をちょくちょくやっているので、ngrokはとても便利でした。
ただ、再起動するたびに値が変わるので、わざわざLINE Developerページに行って変更して……というのがとても不便。
そんな中で出会ったServeoは、とても魅力的に感じました。
bodymovinでSVGアニメーション書き出しやってみた

#(1)アニメーションをafterで作成
まずは素材作り。
で、ウィンドウ＞拡張機能＞bodymovin。

![スクリーンショット 2019-05-30 12.02.10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168611/704fa5c1-a4e1-de58-7014-519deceab168.jpeg)

#(2)エラーが出るよー😂→環境設定でした😅
**allow scripts to write files and access network**
と出てしまう。エラーもかわいいわい！
<img width="503" alt="スクリーンショット 2019-05-30 12.07.19.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168611/744b1ff2-e2fa-e139-6ea2-007c60c24cd8.jpeg">

なんのことはない！
スクリプトによるファイルへの書き込み〜にチェックが必要だったようです。
![スクリーンショット 2019-05-30 11.55.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168611/ca55622e-b30b-e461-c30f-0a09b05f0c03.jpeg)

左の丸にチェックが入っておりかつ保存先を指定しないと
同様のウサギが出てきて注意されます。
![スクリーンショット 2019-06-04 13.17.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168611/982a41be-c3cd-b15c-0ce5-8234be10c49b.jpeg)


で、**data.json**が吐き出されます。

#(3)lottieサイトで動作チェック
<img width="1016" alt="スクリーンショット 2019-05-30 12.18.01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168611/b000feb0-0187-637d-a843-4fd019121f14.jpeg">

下記に**data.json**をドラッグ・アンド・ドロップ。🍬
https://lottiefiles.com/preview

#(4)実装
```html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lottie</title>
</head>

<body>
<h1>テストですわ</h1>
<div id="lottie"></div>
</body>
    
<script src="js/lottie.js" type="text/javascript"></script>
<script>lottie.loadAnimation({
  container: document.getElementById('lottie'), // アニメーションをさせたいdivなどhtml要素ににつけた名前
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // 自分が書き出したjsonファイルの名前と場所（パス）を記述
});</script>
    
</html>
```

▼参考記事
https://note.mu/swcd/n/nb7bdb48e80ca#pJ64a

動かないよー！！😂の原因は
**Uncaught TypeError: Cannot read property 'appendChild' of null**でした。

```html
<div id="lottie"></div>
```
の前に

```Javascript
container: document.getElementById('lottie')
```
を書いちゃうと、lottieなんかないっすよー？
ってことで表示されなかったのですね。

▼参考記事(ありがとうございます。)
http://blog.netandfield.com/shar/2015/04/avascript.html


#(5)作成の際に気をつけること
**うまく変換されない例**
❌パーティクルなどのエフェクトを使用したアニメーション
❌画像を使用したアニメーション
❌イラストレーターaiデータのままのアニメーション
　👉シェイプ化しないと駄目みたい、、涙
Bourne/Ash shell（shシェル）で複数行をヒアドキュメントで変数に代入する

<h2>Here Documents on Bourne/Ash Shell (not bash)</h2>

> スクリプトを `bash シェル` でなく `sh シェル`（[Bourne shell, ボーンシェル](https://ja.wikipedia.org/wiki/Bourne_Shell)）互換で書くと、たいていの Linux ディストーションで動くと聞いた。
> 
> `shシェル` で**[ヒアドキュメント](https://ja.wikipedia.org/wiki/%E3%83%92%E3%82%A2%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88)を使って複数行を変数に代入できるか**知りたい。

## TL;DR

> ヒアドキュメントの変数代入は `sh` シェルでも動きます。[System7](https://ja.wikipedia.org/wiki/Version_7_Unix) の頃からできるんです。

```shell
VAR=$(cat <<HEREDOC
one
two
three
HEREDOC
)
```
```shell-session:別のシェルからshシェルに渡して実行する方法
$ echo $SHELL
/bin/bash
$ # sh シェルで実行させる
$ /bin/sh <(cat sample_script.sh)
```
- [オンラインで動作をみる](https://paiza.io/projects/pYP8awRg0KDgrRqqgc7vYg) @ paiza.IO
- 参考文献： 「[機能と特徴](https://ja.wikipedia.org/wiki/Bourne_Shell#%E6%A9%9F%E8%83%BD%E3%81%A8%E7%89%B9%E5%BE%B4)」| Bourne Shell @ Wikipedia

[Qiita 記事を「`shシェル` `複数行` `変数` `代入` `ヒアドキュメント`」とググって](https://www.google.com/search?q=site:qiita.com+sh%E3%82%B7%E3%82%A7%E3%83%AB+%E8%A4%87%E6%95%B0%E8%A1%8C+%E5%A4%89%E6%95%B0+%E4%BB%A3%E5%85%A5+%E3%83%92%E3%82%A2%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88&tbs=qdr:y)も `bash` シェルばかり。タイトルからわかる **`sh` シェルの場合の記事がすぐに出てこなかった**ので自分のググラビリティとして。


## TS;DR

Docker イメージ内で使うシェルスクリプトを組むとき、`alpine` などは `ash` の `sh` 系シェルであるため `bash` のシェルスクリプトだと動かないことが、まれに多くあります。

まぁ、「やってみろ」って話しなんですが、、、Mac のように `sh` のつもりが実は `bash` のエイリアスになっていたりするので、確信が持てなかったのです。そもそも `bash` の場合でも構文を忘れてしまうし。。。

そこで、Docker のイメージでもシンプルで基本的な `alpine` や `busybox`（`ash`シェル） のベースイメージで動作するか試してみました。

```shell-session
$ # スクリプトの中身
$ cat ./sample_heredoc.sh
#/bin/sh

VAR=$(cat <<'HEREDOC'
abc'asdf"
$(dont-execute-this)
foo"bar"''
HEREDOC
)
echo "$VAR"

$ # busybox で実行
$ docker run --rm -v $(pwd)/sample_heredoc.sh:/sample.sh busybox /sample.sh
one
two
three
$ # Alpine Linux で実行
$ docker run --rm -v $(pwd)/sample_heredoc.sh:/sample.sh alpine /sample.sh
one
two
three

```

しかし、「そもそも System7 時代からヒアドキュメント使えるよ」と Bourne Shell の Wikipedia に載ってました。。。あちょんぶりけ

> UNIX Version 7 での Bourne Shell の機能と特徴を以下に挙げる:
> 
>  - ...
>  - `<<` を使ったヒアドキュメント（`Here documents`）機能。スクリプト内に埋め込まれたテキストブロックを入力として使う。
>  - ...
>
> （「[機能と特徴](https://ja.wikipedia.org/wiki/Bourne_Shell#%E6%A9%9F%E8%83%BD%E3%81%A8%E7%89%B9%E5%BE%B4)」| Bourne Shell @ Wikipedia より）
scalajs触ってみたよ

# scalajs触ってみたよ

## scalajsとは
altJS(代替JavaScript言語)の一種でTypescriptのscala版と思えばいい
最終的にはjsファイルが作成されてnodeやbrowserなどで動かす前提です。  

- jarなどは読み込めない
- あくまでjavascript(node)を作成する


### JavaScript facades
[JavaScript facades](https://www.scala-js.org/libraries/facades.html)javascriptのライブラリをscalajsで取り扱えるようにした物  
t.ds(型定義ファイル)と思ってます。

なので[scala-js-ts-importer](https://github.com/sjrd/scala-js-ts-importer)などのTSからのコンバーターなどもありますね。

### Compatible Scala libraries
scalaをscalajsに互換性を持たせるようにしたライブラリって認識をしてる。  

## google functionsのサンプル触る
[2m/gcf-scalajs.g8](https://github.com/2m/gcf-scalajs.g8)
これがそのまま参考になった。ただ一部gcloudのコマンド周りの変更？があったので  
こちらでハマった

build.sbt
```
s"gcloud functions deploy \$functionName --local-path \${gcTarget.getAbsolutePath} --stage-bucket \${name.value} \$trigger --runtime nodejs8 --project \$projectId --region us-central1"!
}
```

この部分はコマンド実行してました。
```
$ cd target/gcloud
$ gcloud beta functions deploy $functionName $trigger --runtime nodejs8 --stage-bucket ${name.value}  --project $projectId --region asia-northeast1"
```
など書き換えが必要? --local-path がbataだとなかったので。beta有り無しがよくわかってない。




## 感想
ほとんどの参考はすでにqiitaに上がってる物を触るのがいいかと思える。
たぶんsalaをやってる人が前提node(javascript)をこれから触る必要がある場合には
選択肢のひとつとして必要になるかと。

ただnodeなどfrontに精通してる場合には、素直にtypescriptで進めるほうが
わかりやすいと思います。  


### 参考URL
- [qiita:Scala.jsことはじめ](https://qiita.com/Takashi_Kasuya/items/77385aa1fc8080778368)
- [qiita:Scala.jsを全力でオススメする](https://qiita.com/ababup1192/items/7896d26d29fdb06d7243)
- [scalajs Libraries](https://www.scala-js.org/libraries/)
cssアニメーション

#下からすすーっと出てくる奴
##メモ帳か何かに.htmlで張り付ければ見れる



```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
/* 下から上にススーっとフェードイン */

span{
    display: block;
}
.aaa{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;

    background:#2561c1;
    color: #fff;
    width: 400px;
    height: 100px;
    text-align: center;
}
.sample-text1 {
    font-size: 20px;
    font-weight: bold;
    animation-name: fadein;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

</style>
<body>
    <div class="aaa">
        <p class="sample-text1">
            『自由』にモノづくりを。
        
            <span>なんかもう一文</span>
        </p>
    </div>
</body>
</html>
Angular8の正式版が公開されました

# _Angular8の正式版が公開されました_  

by **_Shuichi Ohtsu_** 


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8-published_01.png" width= "640" >

_Angular8_の正式版が昨日(日本時間2019年5月29日）公開されたようです。上図のように、npmのパッケージサイト<https://www.npmjs.com/package/@angular/cli/>で確認することができます。



--------------------
## インストール方法


インストール方法は、従来通りです。



```
npm install @angular/cli

``` 

もしくは


```
npm install @angular/cli@8.0.0

``` 

です。

--------------------
Ionic CLIでReactが使えるようになりました

本日、Ionic CLI 5.0.0がリリースされまして、Ionic CLIでReactプロジェクトを扱えるようになりました。
https://github.com/ionic-team/ionic-cli/releases/tag/ionic%405.0.0

```bash
$ npm install -g ionic
```

でインストール可能です。Ionic CLIは `npx` でローカルで扱うこともできるのですが、多くの場合はグローバルにインストールして扱うことが多いです。

インストールが終了したら

```bash
$ ionic start --type=react
```

でIonicのReactプロジェクトを作成することができます。4つテンプレートが用意されているので、この中から自分にあったものを選択するようにしてください。

```
❯ blank      | ブランク（空白ページのみ）のスタータープロジェクト
  sidemenu   | サイドメニューナビゲーション（ハンバーガーメニュー）があるプロジェクト
  tabs       | タブが用意されているプロジェクト
  conference | デモプロジェクト
```

実装方法などをみるのには、conferenceが一番適してるかと思います。よーしつくるぞ！！という時は、それ以外のものを選択してください。

## 具体的にどういうReactプロジェクト？
`Create React App` と同様の構成で、 `React Router v4` を採用しています。 `react-scripts` が使われています。
あと、デフォルトがTypeScriptとなっているので、そこだけ注意が必要かなーという感じです。App.tsxはこんな感じ。

```starters/react/official/blank/src/App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { IonPage, IonRouterOutlet } from '@ionic/react';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import "@ionic/core/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/core/css/normalize.css";
import "@ionic/core/css/structure.css";
import "@ionic/core/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/core/css/padding.css";
import "@ionic/core/css/float-elements.css";
import "@ionic/core/css/text-alignment.css";
import "@ionic/core/css/text-transformation.css";
import "@ionic/core/css/flex-utils.css";
import "@ionic/core/css/display.css";

const App: React.SFC = () => (
  <Router>
    <Route exact path="/" render={() => <Redirect to="/home"/>} />
    <div className="App">
      <IonPage>
        <IonRouterOutlet>
          <Route path="/:tab(home)" component={Home} exact={true} />
        </IonRouterOutlet>
      </IonPage>
    </div>
  </Router>
);

export default App;

```

## Ionic CLIは何をしてるの？
Ionic本体のコンポーネントはWeb Componentsになっていますので、基本的にはWeb Componentsをnpmで呼び出してきて利用する形です。ただ、ナビゲーションスタックや非線形ナビゲーションを実装するために、`React Router v4` のRouterまわりを拡張しているので、そこあたりの設定など考えはじめると、自分でnpmでインストールして...みたいなことをするより、CLIを使ってはじめた方がお手軽かなという印象です。

## Ionic Reactはリリースされた？
現在、@ionic/reactのパッケージバージョン0.0.5でalpha版という位置づけです。

https://www.npmjs.com/package/@ionic/react

なので、CLIに導入されたといっても本リリースでないことにご注意ください。プロジェクト導入する際は

https://github.com/ionic-team/ionic/labels/package%3A%20react

あたりのIssuesをみながら検討いただければと思います。

それでは、また。
CentOS7 起動時に画面真っ暗、俺真っ白(; _ ; )

## 環境

CPU : Athlon 200GE
MothoerBoard : Asrock B450 Pro4
・HDMIで1280x720モニタへ出力
・[BIOS v3.10](https://www.asrock.com/MB/AMD/B450%20Pro4/index.jp.asp#BIOS) 2019/3/15にAthlon 2xxGE series 対応版
CentOS-7-x86_64-Minimal-1804.iso を USBに焼いてInstall

## 手順

![centos7-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71525/6407ea46-6c6d-7fd1-0385-05a334b92665.jpeg)

普通に [ Install CentOS 7 ] 
yum update の後　3.10.0-975.12.1.el7.x86_64 を選んで起動

![centos7-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71525/7e58f357-0643-2535-54f4-19e41df10667.png)

普通に起動してると思うけど、この画面の直後、真っ暗でSTOPしました ;<

![centos7-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71525/99b1d3ff-cef2-30ae-ea9c-23ac43bf74ed.jpeg)

## なぜだろう

フォーラムでアドバイス貰いました。
 1.CentOS7.5でsetupしてるけど、最新ドライバが手に入るから新しいの使ってみて
 2.Troubleshooting menuからやってみて

Troubleshooting!! 存在すら忘れてました "Orz

## 対応

[Rolling](https://buildlogs.centos.org/rolling/7/isos/x86_64/)から新しい CentOS-7-x86_64-Minimal-1902-01.iso を取ってきてUSBに焼いた。

![centos7-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71525/0ea6a3ef-d04a-fcd6-d5c0-536bb988cf9b.jpeg)
[ Troubleshooting ] の [ Install CentOS7 in basic graphics mode ] 
から Install >> yum update >> reboot

新しい 3.10.0-957.12.2.el7.x86_64 を選んで起動が成功しました。

![centos7-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71525/91805c5e-af3b-61d4-909f-e55354cc6bd3.jpeg)

## わかったこと

新しいの使っても、[ Install CentOS 7 ] を選ぶと、やはり画面真っ暗で停止します。

```
Install CentOS7 in basic graphics mode
```
これでうまくいけました。
知ってる人にとっては、当たり前ですが、こんな体験したことなかったので知識不足を感じました。
bladeで"syntax error, unexpected end of file"に少し泣かされた


bladeで「syntax error, unexpected end of file」というエラーが出たので、
ファイルの最後の方をいろいろ見ていましたが、見当違いでした。

原因は、
```@else```などのブレード構文の前後に半角スペースを入れず、
```@if(a>b)ほげ@elseふが@endif```
などと そのまま文章をつなげていたことでした。

適切にスペースを挿入してやると、
正しくif文などが評価され、エラー解消。

原因究明に少しだけ時間を食われたので、ここにメモいたします。
aタグをホバーしたときに矢印カーソルを表示したい

こうすればできるけど`#`は使いたくない。

```html
<a href="#">リンク</a>
```

カーソルプロパティがあるみたい。

```html
<a href="#" class="hoge-link">リンク</a>
```

```css
.hoge-link {
  cursor: pointer;
}
```

これでいけた。

[cursor - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
Raspberry Pi と安価なWebカメラで動画を撮影する

# この記事は？
以前書いた [Raspberry Pi と安価なWebカメラで静止画を撮影する](https://qiita.com/nara256/items/e4dd4f36df449a0a82e2) の続きです。
今回は安価なUSB接続のWebカメラを使用して、動画を撮影してみます。

# 環境
[Raspberry Pi と安価なWebカメラで静止画を撮影する](https://qiita.com/nara256/items/e4dd4f36df449a0a82e2) で作成した環境を継続して利用します。

##追加でパッケージをインストール
動画撮影では `ffmepg` を使用します。パッケージを追加でインストールしておきます（デフォルトで入っているかもしれませんが念の為）。

```bash
$ sudo apt-get install ffmpeg
```

##カメラが扱える動画フォーマットを確認する
使用するWebカメラのハードウェア仕様により、カメラ側で扱える動画フォーマットが異なります。
以下のコマンドで扱えるフォーマットを確認します。

```bash
$ v4l2-ctl -d /dev/video0 --list-formats
ioctl: VIDIOC_ENUM_FMT
        Index       : 0
        Type        : Video Capture
        Pixel Format: 'YUYV'
        Name        : YUYV 4:2:2
 
        Index       : 1
        Type        : Video Capture
        Pixel Format: 'MJPG' (compressed)
        Name        : Motion-JPEG
```

今回使用するBuffaloのWebカメラだと、カメラ側では YUYV と Motion-JPEG のフォーマットが扱えることがわかります。

#動画を撮影する
## h.264 で動画を保存する
カメラ側では h.264 のフォーマットは扱えないため、カメラで撮影した動画をラズパイ側で h.264 にエンコードして保存してみます。

```bash
$ ffmpeg \
  -f alsa -thread_queue_size 32768 -i hw:1,0 \
  -f v4l2 -thread_queue_size 32768 -s 1920x1080 -i /dev/video0 \
  -c:v h264_omx -b:v 2m \
  -c:a aac \
  -f segment -segment_time 30 -segment_format_options movflags=+faststart -segment_wrap 10 \
  output%02d.mp4
```

`ffmpeg` のパラメータの意味（超ざっくり）は以下の通りです。

- 2行目: 音声の取得関係
- 3行目: 映像の取得関係
- 4行目: 映像のコーデック
- 5行目: 音声のコーデック
- 6行目: ファイルの分割関係
- 7行目: 保存するファイル名

### 実際に動かしてみた結果
さすがにフルHD画質(1920x1080)だと厳しいです。5fpsくらいのカクカク動画になります。
試しにHD画質(1280x720)に変更しても、それでも10fps前後くらいにしかなりません。
CPUは1コアだけフルに使っている感じです。

どのレベルの動画を求めるのかにもよりますが、ヌルヌルな動画を保存しておきたい用途には厳しいと言わざるを得ません。

## Motion-JPEG で動画を保存する
カメラ側がサポートしている、Motion-JPEGで動画を保存してみます。

```bash
$ ffmpeg \
 -f v4l2 -input_format mjpeg -video_size 1920x1080 -framerate 30 -i /dev/video0 \
 -c:v copy \
 -f segment -segment_time 30 -segment_wrap 10 \
 output%02d.mkv
```

`ffmpeg` のパラメータの意味（超ざっくり）は以下のとおりです。

- 2行目: 映像の取得関係 (`mjpeg`から入力、映像サイズ、フレームレート指定）
- 3行目: 映像のコーデック (`copy` : エンコード無しで生データを保存する)
- 4行目: ファイルの分割関係
- 5行目: 保存するファイル名

### 実際に動かしてみた結果
Motion-JPEGを使用すれば、きちんと フルHDサイズ 30fps で保存できます。
ただし、フルHD 30fps だと 30秒の動画でファイルサイズが200MB超となり、ストレージ容量的にちょっと厳しい印象です。
また、Motion-JPEG ですので音は出ません。

#もうちょっとなんとかするためには？
カメラ側でh.264をサポートしている製品を使えば、もう少しマトモに動画を扱えるような気がします。
試していないのですが、[Logicool のこのカメラ](https://www.amazon.co.jp/dp/B01LYTKPDT/) はカメラ側でh.264をサポートしているように書かれている気がします（試してはいない）。
ただし、お値段1万円超。「安価なWebカメラで」という前提がちょっと崩れてしまう感じです。
素人によるWeb制作のいろは

少しづつ更新していく予定。
間違い等ありましたらご指摘いただけると幸いです。

#概要
Webサーバ以外も含めサービスの開始に至るまで大きくサーバ構築、webサイト開発の2段階に分かれる。



##Webサイトについて

Web制作は大原則、Webサーバから提供されるもの。
Webサーバ上にあるWebページから必要な情報(HTML、CSS、JavaScript)を取得し、画面に表示している。
Web上で利用するサービスによってはデータベース等のミドルウェアを利用する。

Webページとミドルウェアだけではあるだけの為利用できない。これらに情報を橋渡しするためにpython(パイソン)やPHPと呼ばれるものを利用する。

Webサイトは静的と動的に分かれる。
静的：いわゆるホームページなどの画面が動きのないサイトのこと
動的：動画やアニメーションなど、画面遷移をせずそのまま表示するサイトのこと

####Webページを制作するにあたり必要なもの
1. Webサーバ
2. Webページを表示する為の言語 → 「Webページに必要な情報とは」に記載
3. ミドルウェア

####Webページに必要な情報とは

Webページはgoogleなどから検索し必要なサイトをユーザが選び、選んだ先のものを表示させている。
この表示をさせるために必要なものが「Webページに必要な情報」である。

これらを構成するためには3つの専用言語が必要になる。

- HTML(HyperText Markup Language)
- CSS(Cascading Style Sheets)
- JavaScript

#####HTML
 Webページを表示させる最低限必要なもの
#####CSS
 HTMLで作ったWebページのデザインを作るために必要なもの
#####JavaScript
 作ったWebページ上でYoutubeなどを再生させたり、Webページ上の処理など

WebページとしてはHTMLは必須だが、他CSS、JavaScriptは無くても作成することができる。
※ただし、今日のWebページ全てはCSS、JavaScriptが導入されている。




###Webサーバについて

Webサーバは主に専用アプリケーションを導入し構築する。

主なメジャー製品は以下の模様。

|Server    |Application|
|:---------|:----------|
|Windows系 |IIS        |
|Linux系   |Apatch     |

Windows系のサーバはIISを利用する。
IISはWindowsServer2012R2まではサーバ用アプリケーションであったが、WindowsServer2016/Windows10
サーバOS、クライアントOS共に利用できるようになった模様。

###HTMLとは

HTMLとはHyperText Markup Languageの略、今日に至るWebページの基礎を作った。
2019年現在、HTMLはVer.5。

[HTML5について(Wikipedia)](https://ja.wikipedia.org/wiki/HTML5)

HyperTextというのは1つの文書(webページ等)から各文書へのハイパーリンクや動画の表示等するもののこと。
HTMLはその専用コンピュータ言語のこと。

HTMLの目的は情報構造を定義するためのもの
このページにどういったものが必要になるか。
材料の用意になる。

HTMLはファイル名に[ファイル名.html]にする。

[※HTMLとは(Wikipedia)](https://ja.wikipedia.org/wiki/HyperText_Markup_Language)


###CSS

各サイトの見た目をどのようにするか、文字の位置や枠の幅、画像の配置を定義するもの。

CSSはHTML上、または専用のCSSファイルを作成すれば作ることが可能。
ただしCSSは記述しても機能しない
そのためHTML上から宣言し、ファイルを呼び出す必要が有る。

####※HTMLとCSSについて
HTMLはあくまで内容の記述する
CSSは記述したHTMLの配置やデザインを決める




#####資料リンク
- [CSSの基本的な書き方【初心者向け】](https://techacademy.jp/magazine/4872)
rails new の手順メモ

メモ: アプリケーションを作るときに必要な Gemfile と、アプリケーションで使う Gemfile は別でよい。

# Rails アプリケーション作成用のプロジェクトを作る

## Gemfile

rails_generator みたいなディレクトリを作って、そこに Gemfile って名前のファイルを置く。内容は下記

```ruby:Gemfile
# frozen_string_literal: true
source 'https://rubygems.org'

gem 'rails'
```

## bundle install

デバッグ用なので path　を指定する

```
$ bundle install --path vendor/bundle
```

こんな感じになるはず

```
$ ls
vendor
Gemfile
Gemfile.lock
$
```

# rails new

ディレクトリを指定して rails new をする。今回は

```
-+- (root)
 |- rails_generator (今操作していたディレクトリ)
 `- sample
```

となるように下記を実行してみる。

```
$ bundle exec rails new ../sample
```

終わったら、  rails_generator 配下は消して良い
JasperReportsで段組(2列表示)にする方法

#はじめに

JasperReportsの情報が少なすぎる！
フリーの帳票ツールの筆頭だと思うのだが、商用ツールと比べてサポートしてくれる会社がないと、なかなか情報が集まらないのだろうか。

2日くらい調べてようやく解答を見つけたので、結果だけ記録しておく。

#解答
・レポートのプロパティから、「Page Colums」＞「Print Order」で「Horizontal」に変更。
・同「Page Colums」＞「Column Count」を2に変更。

#確認
レポートの右半分が使用不可っぽく斜線の入ったフィルターが入れば成功。

あとは、左半分に好きなレイアウトをすれば、右半分にも同様のレイアウトで、
左右交互に明細出力してくれるはず。

#検索キーワード
段組、多段レイアウト、2列表示、サブレポート(不要です)

#参考リンク
https://codeday.me/jp/qa/20190409/589340.html
Heroku logs に var_dump()

Heroku上のPHPアプリでprintデバッグする場合
 error_log()で出力するのがお手軽 

https://devcenter.heroku.com/articles/php-logging

## 問題点
 けれども、配列の中身が見たくて

     $a = array(1, 2, array("a", "b", "c"));
     error_log('$a:');
     var_dump($a);
 や

     error_log('$a:' . var_dump($a));

 としても
↓のようになって、配列の中身は**Heroku logs**に出力されない

    $a:

## 原因

var_dump()は返り値が無いので、error_log()に出力内容が渡されていないから

## 対策
 var_dumpの出力を変数に格納し、その変数をerror_log()に渡す

    // var_dumpを文字列に変換する関数を作成
    function get_str_var_dump($var){
        ob_start(); // バッファリングON
        var_dump($var);
        $bar = ob_get_contents(); // バッファの内容を変数に格納
        ob_end_clean(); // バッファを消去してバッファリングOFF
        return $bar;
    }
     
     $a = array(1, 2, array("a", "b", "c"));

     // 配列$aをget_str_var_dump()で文字列に変換してからerorr_log()に渡す
     error_log('$a:' . get_str_var_dump($a));
  
↓　のように出力できた

    $a:array(3) {  
    [0]=>  
    int(1)  
    [1]=>  
    int(2)
    [2]=>
    array(3) {
        [0]=>
        string(1) "a
        [1]=>
        string(1) "b
        [2]=>
        string(1) "c
        }
    }

## 参考 
https://macocci7.exblog.jp/18510693/
https://www.php.net/manual/ja/function.var-dump.php
https://www.php.net/manual/ja/function.ob-start.php
【Rails】個人開発のアプリに5,000万円の交渉相手が現れました

個人開発のWebアプリ**「[まちかどルート](https://machiroute.herokuapp.com/)」**。

驚いたことに5,000万円の交渉話が飛び込んできました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【速報】 <br>個人開発のアプリ <a href="https://twitter.com/hashtag/%E3%81%BE%E3%81%A1%E3%81%8B%E3%81%A9%E3%83%AB%E3%83%BC%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#まちかどルート</a> に5,000万円の買い手が現れました。これから交渉します<a href="https://t.co/I47lB4Z8pL">https://t.co/I47lB4Z8pL</a> <a href="https://t.co/uIF322UZS6">pic.twitter.com/uIF322UZS6</a></p>&mdash; 西村 治久（ハル） (@west2538) <a href="https://twitter.com/west2538/status/1133538721247113216?ref_src=twsrc%5Etfw">May 29, 2019</a></blockquote>

まだ交渉中ではありますが、ここに至る1年弱の所感をまとめたいと思いました。

# RubyとRailsに入門して1年弱

プログラミングを学んだのは、40代でセミリタイア＆山奥で隠居生活するようになってからというもの、新たな**たしなみ**のひとつにしようと思ったのがきっかけです。

[ソーシャルな隠居の、新たな“たしなみ”。プログラミングをはじめました](https://note.mu/west2538/n/n25e5903643ff)

# アイデアがどう生まれたか

世間と隔絶されずより一層ひととの関係性を高める自称 **ソーシャルな隠居生活**では、じぶんの時間がたくさん持てます。余白の時間に「あ、こんな機能を作ってみようかな」というアイデアがふと生まれやすいです。

アイデアとは、ひねり出すものではなく、それまで興味の赴くまま得てきた数多くのインプットと行動から余白の時間にふと思いつくものなのでしょうか。

よく**ローカル環境構築**などと言いますが、ノートPC上だけでなく**自身の環境構築**も大事なんだと思いました。そういう意味ではじぶんの環境構築は恵まれていたかもしれません。

# 生活への変化

プログラミングをたしなみのひとつにしたおかげで、そうした余白の時間が充実したものになりました。

たとえばカフェなどで思いがけず待ち時間が長くなったとしても、ふとアイデアを思いついたらノートPCを開き、コードに落とし込みます。

いままで持て余していた時間が楽しいものとなりました。

# どう学んできたか

書籍を読んだりスクールに通うということをしていません。ほとんどが必要に応じてインターネットで調べるという独学スタイルです。そのせいか基本的な知識がところどころ抜けているように思います。

反面、基本的な知識がないおかげなのか、参考文献をそのまま写すのではなく「もしかしてこんなふうに書けば動くのかな」という感じでコードを自由奔放に書き換えたりするんですけど、それが本当に動くとうれしいですね。いわゆる論理的思考が鍛えられているのでしょうか。

# 開発を続けられた理由

オープンソースのSNS「Mastodon」に触れていたことが大きかったと思います。だいぶお手本にさせていただきましたし、APIで連携することで個人開発の幅が広がりました。

[Mastodonが日本に普及して2年。インスタンス運営と連携アプリの開発が楽しい](https://note.mu/west2538/n/n0f2f876b7581)

# これから

5,000万円の交渉の成否はこれからのことなのでさておき、じぶんの生活を経済的というよりひととの関係性や精神的に豊かにするための趣味の個人開発ですから飽きるまで続けていこうと思います。

なによりも、スタートアップやエンジニア関係のつながりがこれまで以上に増えたことがうれしいです。やはりコミュニティとして日常的に学びあうことが、成長のスピードを加速させるんでしょうね。
組み込み開発におけるリアルタイムOSの設計について（雑なメモ）

#組み込みOSについて
組み込み用のOSについてはいろいろあると思います。
- iTRON系
- VxWORKS
- ThreadX(グレープシステム）
- DSP/BIOS（Ti）
- 他

ですが、私はほぼ、iTRON系しか使用した事がありません。
DSPを使用する際にTiのDSP/BIOSを使用しましたが、結局ラッパー関数でiTRON系に近づけて設計を行いました。

iTRONだとスレッドでは無く、タスクという概念でマルチタスクを実現します。
私見ですが、組み込みにおけるスレッドとタスクの概念の違いはまた別の記事で紹介したいと思います。

#タスクの分け方
人それぞれによって様々なタスク構成を取りますが、私が愕然としたのは実在モノを中心にタスク訳をしている人です。　ものによっては実在したモノ（部材）でタスク化するものもありますが、もう少し抽象下すべきものでは無いかと私は考えます。

例えば、　一般的な紙幣再起別機の場合、
構成としては取り込み部部、紙幣データを読み込む識別部（制御部とは別にCPU有り）、金庫部（収納部）とします。上位機器とのインターフェースはシリアル通信とします。

1. 全体制御を行う　MAINタスク<br/>
※　全体制御とは機構制御を行うものとは違います。
2. 受け取り部の制御を行う　ACCEPTORタスク
3. 受け取り部から紙幣をスキャンしながらに読み込む　BILLタスク
4. 紙幣識別を行う　BVタスク
5. 収納動作を行う　STAKERタスク
6. センサの状態をMAINタスクに通知する　SENSタスク<br/> 
※　このタスクからMAINタスク通知するセンサ状態は通信に載せるセンサ状態または機械の状態を示す為に使用する。　機構制御にはタイマ割り込みで更新された変数を使用する。
7. 通信インターフェースのLINEタスク  

### 機構制御はタイマ割り込みで行う
これは重要な事ですが、機構制御はタイマ割り込みで行うという事です。タスク内でSENSタスクからMAINタスクに通知されたセンサ変化状態をACCEPTOTRタスクやBILLタスクで行うとタイムクリティカルな機構制御は破綻や自分の思っている動作とは違ってきます。


・・・・・と文字だけでつらつらと書いても分かりずらいので次回の記事では図も入れて記事化したいと思います。
plunkerでsimcirjs その8

#概要

plunkerでsimcirjsやってみた。
jsonから回路図作ってみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/75d65b10-045c-f166-4115-b6c3d3cbf1fa.png)


#成果物

https://embed.plnkr.co/B7HnVEwea2OuTkkQ4ye8/

以上。
Apache 2.4 系で IP アドレスなどのアクセスブロックをする方法


いつもは Nginx を使っているのですが、先日、超久しぶりに、 [Concrete CMS](https://concrete5-japan.rg) のサイトで、 Apache 案件があり、なおかつロードバランサー配下で IP 制限をかけてほしいという難題がきました。

Concrete CMS であれば、使用しているフレームワークの Symfony 側で、ロードバランサーの判断をしているので IP 制限を柔軟に設定できるのですが、非 CMS 領域でも IP 制限をかけてほしいと言われました。

後日のための備忘録メモです。


以前の Apache でサポートされていた

```
Order Deny,Allow
Deny from all
Allow from XXX.XXX.XXX.1
Allow from XXX.XXX.XXX.2

```

みたいなルールは Apache 2.4 系では Deprecated (廃止) になったので、


.htaccess や Apache config の `Directory` 内に新しく記述する方法のサンプルを集めました。

## サンプルと解説

```.htaccess
SetEnvIf Remote_Add　"^192\.168\.255\.1$" loadbalancer
SetEnvIf X-Forwarded-For "^127\.0\.0\.1" allowed_access
SetEnvIf X-Forwarded-For "^127\.0\.0\.1" allowed_access
SetEnvIf X-Forwarded-For "^127\.0\.0\.2" allowed_access

<RequireAny>
    <RequireAll>
	    Require env loadbalancer
	    Require env allowed_access
	</RequireAll>
    Require ip 10.0.0.1
    Require ip 10.0.0.1/16
    <RequireAll>
        Require ip 192.168.0.0/28
        Require not ip 192.168.0.2
    </RequireAll>

    <RequireNone>
        Require ip 10.0.0.10
    </RequireNone>
</RequireAny>
```

### 1行目: loadbalancer 環境変数設定

このIPアドレスはロードバランサーなので loadbalancer 環境変数を `1` or true にセットする。

基本的に、1行1条件だが、RequireAny の中に RequireAll や RequreNone があれば、それらのカッコ範囲を1条件として考える。


### 2~4行目: ロードバランサーを介したアクセスの大元の IP アドレスで allowed_access 環境変数設定

一般的なロードバランサーは、アクセス大元の IP アドレスを X-Forwarded-For ヘッダーに格納する。その X-Forwarded-For に格納された IP アドレスが特定のものであれば、allowed_access 環境変数を  `1` or true にセットする。

ロードバランサーによって、ヘッダー名が変わってくる。さくらインターネットであれば、 `X-Sakura-Forwarded-For` となってい(た時期もあった？)ので、盛りているレンタルサーバーによっては気をつけること。

### 5,21行目: RequireAny

RequireAny の間にある条件を一つでもクリアしていたら`True` = アクセス可能。

### 7~10行目: RequireAll

この間は、すべて条件に合致していないと、ダメ。

`Require env loadbalancer` は、環境変数 loadbalancer が存在すること。`Require env allowed_access` は、環境変数 allowed_access が存在すること。

つまり、ロードバランサーのアクセスであれば、上記に設定した IP アドレスからのアクセスでないと行けない。

### 11~12行目: アクセス元の IP の制限

`Require ip 10.0.0.1`: 10.0.0.1 からの直接アクセスだけ受け付ける。
`Require ip 10.0.0.1/16`: のようにCIDRブロックを指定することもできる。


### 13~16行目: RequireAll 内で Yes and Not

`Require ip 192.168.0.0/28`: 192.168.0.0/28 の範囲の IP アドレスでかつ
`Require not ip 192.168.0.2`: 192.168.0.2 からのアクセスではないこと。

この `not` は RequireAll の中じゃないと使えない。

### 18~20行目: RequireNone

RequireAll の反対。どれにもマッチしなければ `1 (True)` となる。
10.0.0.10 からのアクセスだとNG。

以上です。

`Require` には `ip` や `env` の他にも `user`, `group` なども使えるらしいです。

2.4 になって、結構複雑な IP 制限をかけられるな〜。Nginx っぽくなってきたなーと思ったのでした。

## 参考記事

https://httpd.apache.org/docs/2.4/ja/howto/auth.html
http://blog.matsumoto-r.jp/?p=3482
https://qiita.com/ngyuki/items/779ea21eec2ae6c450d5
https://qiita.com/KurosawaTsuyoshi/items/d9579c9c68666f086e68
PowerBI のスライサーで使う曜日を並び替える

[ブログからの転載](https://1bed.allright.life/?p=2981)

## 経緯

龍が如くオンラインのドンパチデータを PowerBI にかけて遊んでいるのですが、その際に曜日を切り口に可視化しようとしてスライサーを入れたところ、並び順が残念な感じになりました...

スライサーで扱うデータの並び順を変更したい時の備忘録になります

## サンプルデータ作成

[データ] → [モデリング] → [新しいテーブル] をクリック
![](https://1bed.allright.life/wp-content/uploads/2019/05/1.png)

2019/05/01 ～ 2019/05/31 までのデータが入った、テーブル「ほげ」を作成
![](https://1bed.allright.life/wp-content/uploads/2019/05/2.png)
入力しているサンプルコード
> ほげ = CALENDAR("2019/05/01", "2019/05/31")

[新しい列] をクリック
![](https://1bed.allright.life/wp-content/uploads/2019/05/3.png)

作成した列の日時データに対する「曜日」列を作成する
![](https://1bed.allright.life/wp-content/uploads/2019/05/4.png)
入力しているサンプルコード
> 曜日 = SWITCH(WEEKDAY([Date],1), 1, "日", 2, "月", 3, "火", 4, "水", 5, "木", 6, "金", 7, "土")


[レポート] → [スライサー] をクリックし、フィールドに「曜日」をセットする
![](https://1bed.allright.life/wp-content/uploads/2019/05/5.png)
※ここで並び順が思ったとおりになっていないのが確認できる

## 対応方法

並び替え用のテーブルを作成する
サンプルデータ作成の時と同じく、[データ] → [モデリング] → [新しいテーブル] をクリックして、曜日マスタテーブルを作成
![](https://1bed.allright.life/wp-content/uploads/2019/05/10.png)
入力しているサンプルコード
> 曜日マスタ = DATATABLE("OrderNum", INTEGER, "曜日", STRING, {{1, "日"},{2, "月"},{3, "火"},{4, "水"},{5, "木"},{6, "金"},{7, "土"}})

曜日マスタの「曜日」列を選択し、[列の並び替え] → 「OrderNum」と選択する
![](https://1bed.allright.life/wp-content/uploads/2019/05/11.png)

曜日マスタの「OrderNum」列の右にある [▼] ボタンをクリックし、[昇順で並べ替え] を選択する
![](https://1bed.allright.life/wp-content/uploads/2019/05/12.png)

[リレーションシップ] で、「ほげテーブル」の「曜日」列を、「曜日マスタ」にドラッグアンドドロップする
![](https://1bed.allright.life/wp-content/uploads/2019/05/13.png)

サンプルデータ作成で作った、[レポート] にあるスライサーのフィールドにセットした「曜日」を「曜日マスタ」の「曜日」に置き換えると並び替えられる
![](https://1bed.allright.life/wp-content/uploads/2019/05/14.png)

## 考察

曜日だけではなく、何か並び順を固定にしたいデータがあれば、同様にマスタを作ってリレーションを張ることで対応できそうです

やべー めっちゃ活躍している！（仕事しろ）
![](https://1bed.allright.life/wp-content/uploads/2019/05/examples-300x164.png)
matplotlibでカラーバーの範囲を思い通りにする

**この記事を読むとできるようになること**
`matplotlibで，データ値の範囲によらず，カラーバーの表示範囲を決められる`

- 環境
    - macOS mojave 10.14.4
    - Python 3.7.3

2次元カラーマップを書いていて，カラーバーの範囲が思うように出なくて困りました．
こんな図が欲しいのに，

![fig1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403437/0fa9e9b8-99ef-3fe9-ecfd-cce0c73adcf9.png)

描画するデータ値に引きづられて，カラーバーがこんなふうになってしまう！

![fig2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403437/d232ac11-bf37-cccd-4805-068d0ca3c86d.png)

表示されるカラーバーの範囲が，描画するデータ値の範囲に合わせて自動的に変わってしまいました．
これだと，複数の図を作るときにカラーバーが全部違ってしまうので美しくないですね．


表示するカラーバーの範囲を[-4:4]にしたいとします．
なにも考えずに2次元カラーマップを描くとこうなります．

```Python:colormap1
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import numpy as np
import matplotlib.pyplot as plt

fig = plt.figure()
ax1 = fig.add_subplot(111)

#…(省略)…

mappable0 = ax1.pcolormesh(X,Y,z, cmap='coolwarm')
pp = fig.colorbar(mappable0, ax=ax1, orientation="vertical")
pp.set_clim(-4,4)
pp.set_label(“color bar“, fontname="Arial", fontsize=10)
```

![fig2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403437/105b26df-bba2-c9b6-b4de-378e5eebb9f8.png)

[-4:4]からはみ出すデータの範囲までカラーバーが負の方向に伸びている＆存在しないデータ範囲のカラーバーは表示されなくなっています．

解決するには ``Normalize`` を使うと良いようです．

```Python:colormap2
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import numpy as np
import matplotlib.pyplot as plt
from matplotlib.colors import Normalize # Normalizeをimport

fig = plt.figure()
ax1 = fig.add_subplot(111)

#…(省略)…

mappable0 = ax1.pcolormesh(X,Y,z, cmap='coolwarm', norm=Normalize(vmin=-4, vmax=4)) # ここがポイント！
pp = fig.colorbar(mappable0, ax=ax1, orientation="vertical")
pp.set_clim(-4,4)
pp.set_label(“color bar“, fontname="Arial", fontsize=10)
```

![fig1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403437/1eeb5eb3-e390-5949-cbbb-042e99081f5a.png)

これでカラーバーの範囲が思い通りになりました．
``pp.set_clim(min, max)``
では，カラースケールのグラデーションの端点を指定するだけで，
実際に表示されるカラーバーの範囲を決めているのではないみたいです．

カラーバーを対数スケールにするには，``LogNorm`` を使います．

```Python:colormap3
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import numpy as np
import matplotlib.pyplot as plt
from matplotlib.colors import LogNorm # LogNormをimport

fig = plt.figure()
ax1 = fig.add_subplot(111)

#…(省略)…

mappable0 = ax1.pcolormesh(X,Y,z, cmap='coolwarm', norm=LogNorm(vmin=1e1, vmax=1e3)) # ここがポイント！
pp = fig.colorbar(mappable0, ax=ax1, orientation="vertical")
pp.set_clim(1e1,1e3)
pp.set_label(“color bar“, fontname="Arial", fontsize=10)
```

![fig3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403437/687fe5d4-5e47-9985-6830-7e8644184761.png)

この場合，グラデーションが対数目盛で描かれます．
（グラデーションの中央が，5e2ではなく1e2になるということ．この方が見やすいです）
Macで確認用ポップアップウィンドウをtab, spaceで操作できるように設定する

# 設定方法

システム環境設定 > キーボード からショートカットタブを選択します。
<img width="780" alt="スクリーンショット 2019-05-30 9.17.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335400/13c3b028-c38c-b8db-8704-2cfd61d05a92.png">
上図のようなウィンドウが現れます。その左下のラジオボタンを、「すべてのコントロール」の方にチェックを入れます。これだけです。

# デモ

以下のようなポップアップが現れたとします。キーボードのtabで左右どちらかを選ぶことができるようになり、spaceでそのボタンを選択できるようになります。
![スクリーンショット 2019-05-30 9.22.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335400/6175585f-0bf0-269f-6a21-8f6c0649cad6.png)

これでマウスをわざわざ操作することなく、キーボードのみで操作できるようになりました。
EC-CUBE4の管理画面からメインビジュアルを変更する

メインビジュアルを管理画面から変更する方法です。
![メインビジュアル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422413/dd3c7824-ba7a-8101-121a-f6c2413c635a.png)


# 管理画面からメインビジュアル画像をアップしよう
管理画面にログインし、**コンテンツ管理＞ファイル管理**より準備した画像ファイルをアップします。
【main】というフォルダを作成し、その中にファイルをアップしました。
![ファイルアップロード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422413/60bbf386-5bd8-092a-b3c7-de5f53cb460e.jpeg)


アップしたファイルは上記のように表示されます。
吹き出しが出ている部分のボタンを押すとファイルパスがコピーされます。

# メイン画像を適用してみよう
**コンテンツ管理＞ページ管理**に**【TOPページ】**が存在しますので、そちらをクリックしてください。

そうするとコードが表示されます。
107～113行目がメイン画像の記述の部分になります。



```app/template/default/index.twig

    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
        </div>
    </div>
```

今回は最初の1枚目に出てくる画像を変更します。
**※変更する際にはテキストエディターなどでも良いので、しっかりバックアップを取っておくようにしてください。**


```twig
■修正前
<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>

■修正後
<div class="item slick-slide"><a href="/products/list"><img alt="EC-CUBE4のDEMO" src="{{ asset('/html/user_data/main/main1.png') }}"></a></div>

```

画像読み込みの部分を変更し、合わせてaタグの設定で全商品一覧ページへのリンク、altを設定しました。
これを登録して完了です。

# TOPページを確認しよう
管理画面での登録が完了した後はTOPページを開いて変更が反映されていることを確認します。
![メインビジュアル変更後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422413/e106d4d8-07d9-12e0-502b-923cb63d687c.png)



以上でTOPページのメインビジュアル変更は完了です。
※変更後のメインビジュアルのダサさは御愛嬌で・・・。