OmniAICreator/Qiita-1.07M huggingface dataset:
JavaParser でソースファイルのコメントを削除

できるだけ java ソースファイルのサイズを小さくしたいと思い、ソースファイルのコメントを全部削除したらいいんじゃないと思ったら
意外と難しい。

普通の正規表現で置換はうまくいかないパターンもあるから、やはりjava の parser が必要じゃないかと探したら、ありました。

https://github.com/javaparser/javaparser

でも、最新版だと、「Javadoc を出力しない」、「コメントを出力しない」と設定してもうまくできなかった。
ちょっと古い版（3.12.0）は問題なくできました。

要は、java ソースを分析して、Javadoc や コメントを除いて出力する。

```xml:pom.xml
<!-- https://mvnrepository.com/artifact/com.github.javaparser/javaparser-core -->
<dependency>
    <groupId>com.github.javaparser</groupId>
    <artifactId>javaparser-core</artifactId>
    <version>3.12.0</version>
</dependency>
```

```java:App.java
import java.io.IOException;
import java.nio.file.Path;
import java.nio.file.Paths;

import com.github.javaparser.JavaParser;
import com.github.javaparser.ParserConfiguration;
import com.github.javaparser.ast.CompilationUnit;
import com.github.javaparser.printer.PrettyPrinterConfiguration;
import com.github.javaparser.printer.PrettyPrinterConfiguration.IndentType;

public class App {
    public static void main(String[] args) throws IOException {
        Path source = Paths.get("AbstractWebSocket.java");

        JavaParser.getStaticConfiguration().setLanguageLevel(ParserConfiguration.LanguageLevel.JAVA_8);
        CompilationUnit unit = JavaParser.parse(source);
        PrettyPrinterConfiguration conf = new PrettyPrinterConfiguration();
        //conf.setIndentType(IndentType.SPACES);
        conf.setIndentType(IndentType.TABS);
        conf.setIndentSize(1); // tab 1個はスペースより省エネ
        //conf.setTabWidth(1);
        conf.setPrintComments(false); // コメントを出力しない
        conf.setPrintJavadoc(false); // Javadoc を出力しない
        conf.setEndOfLineCharacter("\n"); // 改行1byte
        System.out.println(unit.toString(conf));
    }
}
```

参考になった記事
https://qiita.com/opengl-8080/items/50ddee7d635c7baee0ab
https://javaparser.org/setting-java-8-9-10-etc/

以上！
MVCとMVVMの違いを理解する


アプリ開発をする上では、MVCやMVVMなどの設計モデルを理解しておく必要があります。
本記事は、Swiftの初学者がMVCとMVVMの理解を深めるためにアウトプットしていきます。

# そもそも、MVCとMVVMとは？
　MVCとMVVMもサービスを利用するユーザーに見えることありません。よく使われる言葉として、**設計モデル**とも呼ばれています。家で例えるなら、分解すると土台があって、外枠・柱があって屋根があります。これらは、それぞれ役割があって、使っている素材が違います。
　このように、それぞれの機能や役割を考えて分類しておくと,後で修繕する時に楽だし、リフォームするときも簡単だよねってことです。

では、それぞれの設計モデルを深掘りしていきましょう。

# MVCとは？

MVCとは、「Model」「View」「Controller」の頭文字をとったものです。

### 「Model」
システムの中で、ビジネスロジックを担当
人間で言えば、脳みたいなイメージで、ある処理にたいして計算を行ったり、処理を記憶させていつでも引き出せるような状態にすることができる。

### 「View」
ユーザーが閲覧できる所で、表示や入出力といった処理を担当。

### 「Controller」
ユーザーの入力に基づいて、ModelとViewの制御を担当。
人間で言えば、脳に命令したり、脳が処理した内容を足に伝えたり、神経みたいな役割をしています。

これらを図にすると、以下のようになります。

![Swipe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770482/e1bb03de-34a9-0be7-8b95-23ef84862d62.png)

### -図の説明-
1.ユーザーがYOASOBIの楽曲を検索したいと考え、アプリ内で検索

2.リクエストをControllerに送信

3.Controllerがリクエストを受け取り、Modelに処理を実行するよう指示

4.Modelが処理を実行。処理した内容をControllerに送信

5.Controllerを介してModelが処理した結果をViewに反映


# MVVMとは？

MVCとは、「Model」「View」「ViewModel」の頭文字をとったものです。

**「Model」と「View」の役割はMVCモデルと一緒です。**

### 「ViewModel」
ViewとModel間の伝達や状態保持を担当します

MVVMの概念はとても難しいので、以下の図で説明します

![Swipe (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770482/e7a30b7b-d072-64ba-2550-a883883b54c2.png)


### -図の説明-

1.ユーザーがYOASOBIの楽曲を検索したいと考え、アプリ内で検索

2.ユーザーからのリクエストに基づいてViewModelにリクエストが送られる

3.必要であれば、リクエストが反映

4.Modelに処理を実行するよう指示

5.Modelの処理をViewModelに渡す

**ご助言、ご指摘等ございましたら、是非コメントよろしくお願いします！**


### データバインディングとは?

MVVMモデルでは、データバインディングという仕組みを使っています。

データバインディングの特徴は、ViewとView Modelのどちらかで値が書き変われば、値が変化するたびにViewとView Model、**両方の値が変更**されるという点です。

ユーザーが入力した情報と、格納したデータをデータバインディングにて自動的に処理していきます。

## MVCとMVVMのメリット・デメリットを理解する
**ここが一番重要です。**
メリット・デメリットを理解しておかなければ、どちらの設計モデルを採用して良いか判断することはできません。

簡潔に説明していきます。
 
### -MVC-

**メリット**
・機能毎に分割されているため，分業して作業を進めやすくなる(開発者の得意な所に集中できる)
・それぞれが独立しているので変更・修正があった場合にその影響を受けにくい

**デメリット**
・仲介役のControllerの負担が大きくなる

### -MVVM-

**メリット**
・Viewに素早くデータを反映することができる

**デメリット**
・動作の流れが見えづらくなる
・MVCと比べ、分業して作業を進めにくい

# まとめ
今回は、MVCとMVVMのついて調べたことをまとめてみました。
MVCモデルは、直感的で理解がしやすい印象でしたが、MVVMは実際に運用してみないと理解しきれない部分が多くあるなと思いました。
MVVMはViewの反映速度が早くなるので、ユーザーにとって印象が変わるくらいの処理速度ならば、積極的に採用していきたいですよね。

**本記事は、不十分な部分があると思います。**
**ご助言、ご指摘等ございましたら、是非コメントよろしくお願いします！**

# 参考文献
[【iOS】MVVMについて](https://qiita.com/s_emoto/items/b000a5c076f3d6076972)

[ソフトウェアアーキテクチャー…？MVCやMVVMってなに！？](https://digitalidentity.co.jp/blog/creative/mvc-mvvm.html)

# 宣伝

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770482/0addadc9-1b72-8b50-f5a7-73872185020a.png)

元動物飼育員の知見を活かして、好きな動物やイベントのカードをスワイプして、
その結果に基づいた動物園にマッチングするというアプリを開発しました。
https://apps.apple.com/jp/app/zoogo/id1552154924

是非、興味がある方は使ってみてください🙇‍♂️
AWS Cloud9 初期設定　5分でPython統合開発環境構築完了

背景
　Python学習を始めようとしたところモバイルのWindows環境がないため
　AWSでPythonの統合開発環境 (IDE)作ろうと思った。

AWS Cloud9の概要
ブラウザのみでコードを記述、実行、デバッグできるクラウドベースの統合開発環境 (IDE) です。これには、コードエディタ、デバッガー、ターミナルが含まれています。Cloud9 には、JavaScript、Python、PHP などの一般的なプログラム言語に不可欠なツールがあらかじめパッケージ化されているため、新しいプロジェクトを開始するためにファイルをインストールしたり、開発マシンを設定したりする必要はありません。

詳細はこちらで確認ください 
https://aws.amazon.com/jp/cloud9/details/


※下記手順ですが、2018/12/6時点のものになります。
選べるリージョンは少なく、今回は一番近いシンガポールを選択

Create environmentをクリックする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/5b2ae2ce-be0a-7d59-2576-a687d221a5aa.png)

下記を入力し、NextStepを押下する
Name:ac9_greenlight
Description(optional):This is the development environment of WEB application.

![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/b3db1524-999c-a556-72ce-f5070b221a37.png)


今回は、無料枠のEC2インスタンスを作る。コスト設定はデフォルトを指定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/fde715da-3e95-cbae-767c-9180f1170010.png)


Network settings (advanced)は、デフォルトで作成する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/197b8a6a-6517-94ef-dfe8-c5e5600569e1.png)

設定内容を確認して　Create environmentをクリックする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/62facc96-3f6c-01ca-32d0-591f78894ded.png)


しばらく待つ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/75cf496f-e448-93fd-a9ea-8384eba26d71.png)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/8b3d71f0-8f79-6ab4-70b0-026519a5ea94.png)

まつこと2分、作成完了。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321462/37df941a-5268-4d05-a65d-e4fc1bf54dd0.png)
Railsのバリデーションエラー文を日本語にする方法

#エラー文を日本語表示させたい時

まず、gemを使用します。Gemfileに以下を記述

```Gemfile
gem 'rails-i18n'
```

bundle installを行います。
次にconfig/application.rbに以下を記述

```config/application.rb
config.i18n.default_locale = :ja
```

これでエラー文が日本語になります。
次にカラム名も日本語にしたいので
config/localesの配下に
modelsフォルダとja.ymlファイルを作成し
以下を記述

```config/locales/models/ja.yml
ja:
  activerecord:
    models:
      user: ユーザー
      guide: 案内板
    attributes:
      user:
        email: メールアドレス
        password: パスワード
        password_confirmation: 確認用パスワード
        nickname: ニックネーム
        profession: 職業
        age_id: 年齢
        sex_id: 性別
      guide: 
        title: 案内板の名称
        content: 内容
        image: 画像
```

今回の自分の場合は、modelはuserモデルとguideモデルの二つのモデルのバリデーションによるエラー文を日本語にしたかったので、上記のような書き方をしています。それぞれのカラム名の日本語訳を右側に記述します。
そしてconfig/application.rbに以下を記述
１行目は先程の記述です。

```config/application.rb
config.i18n.default_locale = :ja
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.yml').to_s]
```

アプリをcontrol＋Cからのrails s
このようにすることで、エラー文を日本語にできます。
<a href="https://gyazo.com/764182537f6b61b8172814a68d142b9e"><img src="https://i.gyazo.com/764182537f6b61b8172814a68d142b9e.png" alt="Image from Gyazo" width="473"/></a>
<a href="https://gyazo.com/8192f6536e6d04fffe710615fd914cd6"><img src="https://i.gyazo.com/8192f6536e6d04fffe710615fd914cd6.png" alt="Image from Gyazo" width="343"/></a>


以下のリンク先を参考にさせてもらいました。
より分かりやすいと思いますので是非そちらもご確認ください
https://qiita.com/Ushinji/items/242bfba84df7a5a67d5b
docker-compose exec 〇〇 bash でコンテナに入れない

# 課題
```
docker-compose exec 〇〇 bash
```
で　〇〇というコンテナに入ろうとしたら

```
OCI runtime exec failed: exec failed: container_linux.go:370: starting container process caused: exec: "bash": executable file not found in $PATH: unknown
```

というエラーが出た。

## 解決法
```
docker-compose exec 〇〇 sh
```
または

```
docker-compose exec 〇〇 /bin/sh
```

とする
【初心者でもわかる】CSSで下から"ニュッ"と出てくる文字(要素)の作り方

# どうも7noteです。ふわっとじゃなくてにゅっと出てくる文字を作ります

まるで地面から生えてくるような文字を作ります。
こんなかんじ↓

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/a4a5615e-ef37-4e7f-bce3-19cff3de5ce0.gif)

みえない位置で下からにゅっと生えてくるように上に出てくる文字です。
要素ごとふわっと出す、というよりも文字のアニメーションみたいなイメージの方が近いかなと思います。

## "ニュッ"とでてくる文字の作り方

```index.html
<div class="popout"><span>HELLO!</span></div>
```


```style.css
.popout {
  border-bottom: solid 1px #000; /* 装飾用の下線 */
  display: inline-block;         /* 装飾用。なくても可。 */
  padding: 0 5px;                /* 装飾用。なくても可。 */
  overflow: hidden;              /* はみ出た分を非表示 */
}

.popout span {
  position: relative; /* bottomを指定するために必要 */
  animation: popanime 1s ease-out forwards; /* 最後ゆっくりになるアニメを1秒かけて1回だけやったあと固定 */
}

@keyframes popanime {
  from {
    bottom: -20px; /* 親要素外に配置させて見えなくしておく */
  }
  to {
    bottom: 0px;　 /* 下から0pxに指定 */
  }
}
```

## まとめ

CSSのアニメーションのみ設定しているので、アニメーションを開始するタイミングはページ読み込み時になってしまうので、もし**開始タイミングを調整したい場合はjabascriptと組み合わせて「クラスを付与した時にアニメーションさせる」**みたいな書き方をしてみてください。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Herokuにデプロイする際、背景画像が表示されないことの解決

#概要
背景画像について
local　→　表示○
Heroku上　→　表示×

Heroku上で背景画像が表示されないことの解決方法を、本記事では述べています。

#バージョン
rubyのバージョン　ruby-2.6.5
Railsのバージョン Rails:6.0.0
 
#解決方法

config/environments/production.rbを以下のように書き換える。

（変更前）config.assets.compile = false
↓
（変更後）config.assets.compile = true


```config/environments/production.rb

〜省略〜

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true # =false → trueに変更

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.


〜省略〜


```
その後、デプロイして背景画像が表示されていれば完了です。

以上です。
[Swift] オプショナル値のソートに注意

記事の内容はこちらを参照してください。
https://mishimay.github.io/59fba10170ed2ff7690a/
<!--

## やりたいこと
`[2, nil, 3, 1]` をソートして `[1, 2, 3, nil]` にしたい。

## うまくいかない実装

以下のコードは一見するとうまくいきそうですが期待通りの結果になりません。

```swift
let a: [Int?] = [2, nil, 3, 1]
let s = a.sorted { (l, r) -> Bool in
    if let l = l, let r = r {
        return l < r
    }
    return false
}
// -> [2, nil, 1, 3]
```

これは、比較する2つの値のうちどちらかがnilの場合 (例えば `2` と `nil` )、順序を入れ替える前も後も `false` として判定される、つまり等価であると判定されてしまうため、正しくソートが行われません。

## 解決策

### 1. 左右どちらにnilが来たかで返り値を変える

```swift
let a: [Int?] = [2, nil, 3, 1]
let s = a.sorted { (l, r) -> Bool in
    switch (l, r) {
    case (.some(let l), .some(let r)):
        return l < r
    case (.some, .none):
        return true
    case (.none, .some):
        return false
    case (.none, .none):
        return false
    }
}
// -> [1, 2, 3, nil]
```

### 2. nilを最大値だと仮定する

```swift
let a: [Int?] = [2, nil, 3, 1]
let s = a.sorted { (l, r) -> Bool in
    l ?? .max < r ?? .max
}
// -> [1, 2, 3, nil]
```

## 環境
```
Apple Swift version 5.3.1 (swiftlang-1200.0.41 clang-1200.0.32.8)
Target: x86_64-apple-darwin19.6.0
```


-->
ラズパイとHDDでNAS作成

ラズパイとHDDを使用してNASを作成する手順


##使用環境
raspberry pi 4(ubuntu)
HDDは予めラズパイに接続済み

NASに接続するPCはWindows10

##以下手順


###1.sambaをインストール
コマンドプロンプトで以下の文言を。

```
sudo apt-get install samba
```

これでインストール完了
念の為、

```
samba
```

で確認。
インストールが出来ていないときに下記が表示されるのでやり直し


```
bash: samba: command not found
```

###2.smb.confをいじいじ
コマンドプロンプトから

```
sudo nano /etc/samba/smb.conf
```

もしファイルが見つからなければ探す
(ファイルパス探す方法なんかあるか)

smb.confを覗いたら、一番下までスクロールし、以下を追記(詳細はコードの下)

```
[raspberry_pi]
 comment = share
 path = HDDのパス
 public = yes
 read only = no
 browsable = yes
 force user = pi
```


[raspberry_pi] →　任意の名前
comment = share　→　説明文、今回は共有フォルダとして使うので「share」
public = yes　→　公開するか否か
read only = no　→　読み書きできるようにするか
browsable = yes　→　閲覧可能か否か
force user = pi　→　マスターネーム(今回ならHDDがついてるラズパイ)

入力できたら
Ctrl＋X で　smb.conf から抜ける

###3.sambaを再起動
以下のコマンドで再起動できます

```
sudo systemctl restart smbd
```

###4.NASに接続
※今回はwindowsPCからの手順

Desktopで右クリック　→　ショートカット作成 →　ラズパイのIPアドレスを入力(￥￥IPアドレス)

※参考(IPアドレス確認方法)
ラズパイのコマンドプロンプトで「ifconfig」で確認



以上
Docker上のpython3からOracleDBへ接続する方法

Docker上のpython3からOracleDBへ接続する方法のご紹介です。

下記の3つのファイルを同じディレクトリに配置して、コマンドを下記の通り実行してください。

```
docker-compose build
docker-compose up
```

dicker-compose.yml

```yml

version: '3'
services:
  python3:
    build:
      context: .
      dockerfile: Dockerfile
```

Dockerfile

```dockerfile

FROM oraclelinux:7-slim

RUN yum -y install oracle-release-el7 && \
    yum -y install oracle-instantclient19.3-basiclite && \
    yum -y install vim && \
    yum -y install python36 && \
    python3.6 -m pip install cx_Oracle && \
    rm -rf /var/cache/yum

WORKDIR /myapp

ADD query.py /myapp

CMD exec python3.6 query.py

#ENTRYPOINT ["tail", "-f", "/dev/null"]
```

query.py

```py

# query.py

import cx_Oracle

connection = cx_Oracle.connect( user='username', password='password', dsn='192.168.1.103:1521/ORCL' )

cursor = connection.cursor()
cursor.execute("select systimestamp from dual")

r, = cursor.fetchone()
print(r)
```

時刻が表示されれば成功です。


## 参考にした記事

#### Docker for Oracle Database Applications in Node.js and Python

https://blogs.oracle.com/opal/docker-for-oracle-database-applications-in-nodejs-and-python-part-1

https://blogs.oracle.com/opal/docker-for-oracle-database-applications-in-nodejs-and-python-part-2
【JavaScript】animate()でbackground-colorにアニメーションをつける方法

Javascriptのanimate()についての記事です。
animate()は数値型の値にしか対応していないことを知らずにハマってしまったので、備忘録として更新します。

##animate()とは
####前提
数値では設定できないCSSプロパティに関しては指定できない！！！

####書き方

```javascript:main.js
    対象要素.animate( {CSSプロパティ: 値}, duration, easing, 関数 )
```
######第一引数
CSSプロパティはキャメルケースで記述。
（例）font-size →　fontSize

######第二引数（省略可）
durationは、ミリ秒で指定する。アニメーションが完了するまでの時間を設定できる。

######第三引数（省略可）
easing」は、アニメーションの挙動を指定することができる。
「linear」と「swing」の2種類を文字列で設定する。

######第四引数（省略可）
callback関数は、アニメーション終了時に実行する関数のポインタを渡すことができる。

##background-colorにアニメーションをつけるには
jQuery UIというjQuery公式のUI用のプラグインを使用。
導入方法は以下の通り。

```html:index.html
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</body>
```
このプラグインを使用することで、background-colorプロパティにアニメーションをつけることができる。（backgroundColorとキャメルケースにするのを忘れないように・・・）
【Rails】csrf_meta_tags とは

「rails new」コマンドを実行した際に自動生成される。



```application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>abcd</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
  </head>
```

## csrf_meta_tags

Railsアプリ外部からの不正アクセスに対処するためのHTMLタグ。
クロスサイトリクエストフォージェリ(CSRF)の対策のために記述する。

##CSRFとは
「攻撃方法」
Webアプリケーションに存在する脆弱性を利用した攻撃方法のこと。
ユーザーによる認証が完了したと考えられるWebアプリケーションのページに、悪意のあるコードやリンクを仕込むというもの。
掲示板や問い合わせフォームなどを処理するWebアプリケーションが、本来拒否すべき他サイトからのリクエストを受信し処理してしまう。

・CSRFは、CVE (Common Vulnerabilities and Exposures) で報告されることはめったにない(2006年でも0.1%以下) 
・それでもGrossmanが言うところの「眠れる巨人」であり、危険なことに変わりはない。
・CSRFは非常に重大なセキュリティ問題であることは強く認識すること。
LINE　API触ってみたい

# はじめに
初カキコ…ども…
プログラミングはアウトプットが大切らしいのでやってみる。
WEB系未経験だけどWEB系の業界行きたい

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [やりたいこと](#Chapter1)
1. [手持ち武器](#Chapter2)
1. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# やりたいこと
自分の出費を管理したい。
Za〇mとかマネーフォワ〇ードめんどい
アプリ開くのもめんどい
収入とか毎月同じだし入力する意味ねぇ

LINE　APIで金額と３ジャンル（食費、贅沢、自己投資）入力してそのまま使って金額集計してくれ。
とにかく楽に使った金額集計したい。


ゆくゆくはアマゾンや楽天の購入履歴から何円使ったか集計したいなぁ
ちんぱんマンは気づいたらクレカ爆発していて怖すぎるからスマホの通信料アラーム的なのほしい
低回線速度で生活しろって言われたらちゃんとするからだれか使いすぎな自分を叱ってくれ・・・


<a id="#Chapter2"></a>
# 手持ち武器
1　C言語業務で使ってる
2　Pythonちょっと触れる
3　ラズパイちょっと触れる
4　Microsoft SQL server　は簡単なサービス自作するとき使った

この挑戦が終わるころにはできる事増えてるといいな

<a id="#reference"></a>
# 参考文献
- https://developers.line.biz/ja/services/messaging-api/
- https://qiita.com/tkrtmy1031/items/80c292fab5d631c6d4ba
PHP5上級試験/準上級試験まとめ

PHP8がリリースされ、バージョン7.2以下については公式サポートも終了していますが、今のところPHPの上級資格がバージョン5準拠のこれしかありません。

[PHP技術者認定機構 - PHP5上級試験/準上級試験](https://www.phpexam.jp/summary/expert/)

とはいえまぁ言語構造やテクニックなど基本的な部分は、バージョンが上がってもそこまで変わらないでしょうということで気が向いた時にまとめていきます。順次更新。

#### 出題範囲と割合（PHP技術者認定機構のページから抜粋）

| 目次 | 出題割合 | 出題割合 |
|:-:|:-:|:-:|
| 1章 | PHPについて | 0 |
| 2章 | PHP言語の基本 | 0 |
| 3章 | [関数](https://qiita.com/chimayu/items/d4bf6eedbe37d392aa25) | 0.02 |
| 4章 | [文字列](https://qiita.com/chimayu/items/9b9cb14548aa7dd8da1b) | 0.02 |
| 5章 | 配列 | 0.04 |
| 6章 | オブジェクト | 0.1 |
| 7章 | ウェブに関するテクニック | 0.12 |
| 8章 | データベース | 0.08 |
| 9章 | グラフィック | 0.04 |
| 10章 | PDF | 0.04 |
| 11章 | XML（＆XML系で追加された関数） | 0.06 |
| 12章 | セキュリティ | 0.12 |
| 13章 | アプリケーションに関するテクニック | 0.08 |
| 14章 | PHPの拡張 | 0.04 |
| 15章 | WindowsでのPHP | 0.02 |
|  | SPL（Standard PHP Library） | 0.04 |
|  | 日付クラス |  |
|  | PEAR（管理系のコマンドなど） |  |
|  | 名前空間 | 0.04 |
|  | クロージャー |  |
|  | リフレクション |  |
|  | Late Static Binding |  |
|  | JSON | 0.02 |
|  | PDOとネイティブモジュールの違い | 0.04 |
|  | mysqlndドライバについて |  |
|  | 正規表現（pcre, posix, mbstring） | 0.02 |
|  | APD/Xdebug | 0.04 |
|  | memcache |  |
|  | フィルター | 0.02 |


#### 【参考URL】
[PHPのリリース日とサポート期限](https://qiita.com/bezeklik/items/72d1ff8393f66673e2bc)
【Swift】ライブラリ "Parchment" を使うにあたっての初心者向け補足

# どういうことか

掲題のライブラリはお手軽に上部メニューバーを実装できてしまうものであり、調べたらいくつか『初心者向け』といったものもあったが、そういった記事をもう少し補足したものを書く。

ちなみに参考記事はこちら（ぼくが書いたものはない）。

**公式**
<https://github.com/rechsteiner/Parchment>

**parchmentを使って、画面になにかを表示させる場合、どうしたらいいか？**
<https://teratail.com/questions/267298>

**Swift: ページャーライブラリParchmentの使い方**
<https://blog.shota-ito.com/2020/05/10/post-490/>

ぼくは2番目の記事をベースに3番目の記事を参考にして色の設定などを付け足した感じです。

## やるべきこと

### 表示させたいページ分のControllerを作る

たとえば2番目の記事で言うと `firstViewController.swift` と `secondViewController.swift` は作る必要がある。
それぞれStoryboardでページを作るのであれば特に何かを書く必要はない。
`import Parchment` も書かなくていい。

### StoryBoard で View Controllerを追加し identifier を設定

2番目の記事のコメント欄に書いてある。
そのまんまではあるが、Storyboardで表示させたいページ分のViewControllerを追加して、それの `Storyboard ID` の箇所に `firstViewController` と `secondViewController` をそれぞれ書く。

## やらなくていいこと

### `PagingViewController` は作る必要がない

インストールするともろもろ処理が書かれたこれが最初から作られている。むしろ作るとエラーになる。

## わかっていないこと

作ったメニューバーの丈夫に `margin` などの余白を作ることはできないのかなぁとか。
192.168.1.1/16と192.168.2.1/24で通信ができないことってあるの？


## 経緯
後輩にサブネットマスク/16と/24の違いで通信できないことってありますか？と聞かれたときにぱっと答えられなかったので検討しました。

例えば、以下のケースだと単純です。
![submet-mask_24_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123946/891dd152-e43f-0842-3048-fd0f015e637e.png)

ルーター、PC-2からのpingはPC-1に到達します。ルーター、PC-2はサブネットマスク/24で考えるため、PC-1を同一ネットワークとして認識します。PC-1からのpingはPC-2に到達することはできません。PC-1はサブネットマスク/25で考えるため、PC-2を異なるネットワークとして認識します。

```shell
PC-1> ping 192.168.1.1

Redirect Network, gateway 192.168.1.254 -> 192.168.1.1
host (192.168.1.1) not reachable
```


## 結論から
ルーターのプロキシARPが有効になっている場合は通信できる可能性があります。プロキシARPが無効の場合はできないと思います。

## 試してみる
以下の構成を考えます。
![subnet-mask_16_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123946/f4f9ecf1-7aec-490d-3447-4b67bc7e8623.png)

pingを実施します。

```shell
PC-1> ping 192.168.2.2

192.168.2.2 icmp_seq=1 timeout
84 bytes from 192.168.2.2 icmp_seq=2 ttl=63 time=14.277 ms
84 bytes from 192.168.2.2 icmp_seq=3 ttl=63 time=17.071 ms
84 bytes from 192.168.2.2 icmp_seq=4 ttl=63 time=14.411 ms
84 bytes from 192.168.2.2 icmp_seq=5 ttl=63 time=17.792 ms
```

```shell
PC-2> ping 192.168.1.2

192.168.1.2 icmp_seq=1 timeout
84 bytes from 192.168.1.2 icmp_seq=2 ttl=63 time=12.771 ms
84 bytes from 192.168.1.2 icmp_seq=3 ttl=63 time=12.763 ms
84 bytes from 192.168.1.2 icmp_seq=4 ttl=63 time=12.731 ms
84 bytes from 192.168.1.2 icmp_seq=5 ttl=63 time=17.298 ms
```

両方問題なく通信できています。PC1からルーター間のパケットを確認してみます。
![ping_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123946/3e03ac34-6822-7286-bf12-d1aa38e64de4.png)


PC1のネットワークアドレスは192.168.0.0です。宛先の192.168.2.2に自身のサブネットマスクを適用し、192.168.0.0になるため同一ネットワークと判断します。
そのため、PC1はARPをブロードキャストで送信しています。実際は同一ネットワークではないので、PC2を見つけられませんが、ルーターが代わりに応答をしています。
これはルーターのプロキシARPの機能が有効になっている場合に行われます。検証で使用したものはCiscoルーターで、初期設定で有効になっているようです。おそらくルーターにより初期設定は異なるものと思います。

## さらに
プロキシARPを無効にしてみます。同様にPC1からPC2にpingを実施します。

```shell
PC-1> ping 192.168.2.2

host (192.168.2.2) not reachable
```
ARPのリクエストを送信し、誰も応答しないためホストの解決に失敗します。ARPの問い合わせが3回発生しています。

![ping_16_no_ip_proxy-arp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123946/cbe9d42d-460f-0bbf-0edc-e3244b9d77ca.png)

ちなみに、PC2からPC1はどうでしょうか。PC2のネットワークアドレスは192.168.2.0です。宛先の192.168.1.2に自身のサブネットマスクを適用し、192.168.1.0になるため異なるネットワークと判断します。
そのため、PC2からデフォルトゲートウェイにパケットを送信し、ルーターを介してPC2からPC1は通信が可能な状態です。


## まとめ
今回聞かれた経緯として、誤ってサブネットマスクを/16で設定してしまい、他の部署から見れなかったそうです。結論としてサブネットマスクを/24にしたら直りましたという報告しかなかったので、すごくモヤモヤしていました。お客さん先のネットワークの構成はわかりませんが、もしかしたらプロキシARPが無効だったかもしれません。

## 参考
- https://www.cisco.com/c/ja_jp/support/docs/ip/dynamic-address-allocation-resolution/13718-5.html
※（米印）で改行の頭文字を1文字下げるCSS

```base.css
p.kome{
  padding-left: 2em;
  text-indent: -1em;
}
```
```text.html
<p class="kome">※とても長い注釈があります。これはとても長い注釈なので、改行が入ります。改行すると字下げします。</p>
```

メモ。
実行されているプログラムが CI で動いているのかどうかを判定する

https://github.com/watson/ci-info を使うと便利。

様々な CI サービスがそれぞれ使っている環境変数とかを見て自分が CI にいるのか否かを判定してくれる。

```js
var ci = require('ci-info')

if (ci.isCI) {
  console.log('The name of the CI server is:', ci.name)
} else {
  console.log('This program is not running on a CI server')
}
```

https://sosukesuzuki.dev/posts/transfer-my-repo-to-oss-org/ とかで紹介した https://prettier/prettier-regression-testing は基本的に GitHub Actions で動かすことを想定しているが CLI からも叩くことができるようにしたかったのでその分岐のために使った。

あと Prettier 本体でも使ってる。
【Rails】 初心者向け！テーブルにカラムを追加・変更をするとき（2パターン）

はじめに
---
テーブルを作成した後にいざ作業に取り組もうと思っていたら、カラム名に誤字脱字があった、後から何か追加しなければいけなくなった、なんていう時があるかと思います。
私自身も学習を始めた初期の頃は、よく目の当たりにし、マイグレーションファイルは厄介だし触りたくないと絶望した記憶があります。
コマンドを忘れてしまいがちなので、そんな時の対処法を備忘録として記しておきます。
<br>

開発環境
---
ruby 2.6.3
Rails 5.2.4.4
<br>

解決方法①
---
####メリット
● 追加や削除を行っても既存のファイルのみで変更が行えるので、ファイルが無駄に増えない。
####デメリット
● いつ何に追加や変更を加えたのかが分からない。
＝チーム開発など自分以外の人と共同で作業する場合には、向かないとも言える。
<br>

①現在のテーブルの状態を確認します。
ここでupと表示が出ているものに関しては、rails db:migrateコマンドにより既にマイグレーションが実行されたものになります。

```terminal.
$ rails db:migrate:status
   up     20210209151659  Create users
   up     20210217102543  Create books
   up     20210218081902  Create comments
```

②upと表示されているテーブルに変更を加えたい場合は、一度downにする必要があります。
（down = マイグレーションを実行する前の状態にする）

```terminal.
# VERSION=以降に作成日時の文字列を加えることで、ファイルの指定が可能
$ rails db:migrate:down VERSION=20210217102543
== 20210217102543 CreateBooks: reverting ================================
-- drop_table(:books)
   -> 0.0029s
== 20210217102543 CreateBooks: reverted (0.0091s) =======================

# 再度テーブルの状態を確認すると、downに変わっています
$ rails db:migrate:status
   up     20210209151659  Create users
   down   20210217102543  Create books
   up     20210218081902  Create comments
```

③最初に作成していたマイグレーションファイルに変更を加える。

```20210217102543_create_books.rb
class CreateBooks < ActiveRecord::Migration[5.2]
  def change
    create_table :books do |t|
      t.integer :user_id
      t.string :title #追加
      t.string :body
      
      t.timestamps
    end
  end
end
```

④再度マイグレーションを実行する

```terminal.
$ rails db:migrate
```

⑤完成！


解決方法②
---
####メリット
● いつ何に追加や変更を加えたのかが分かりやすい。
＝チーム開発など自分以外の人と共同で作業する場合には、周りの人にも分かりやすい。

####デメリット
● 追加や変更を加える回数が増える分だけ、マイグレーションファイルが増えてしまう。

<br>
①用途に合わせて以下のどちらかのコマンドを実行する。
● rails g migration Addカラム名Toテーブル名 カラム名:型名
● rails g migration AddColumnToテーブル名

```terminal.
# 追加するカラムが一つの場合
$ rails g migration AddTitleToBook title:string

# 追加するカラムが複数の場合
$ rails g migration AddColumnToBooks
```
②マイグレーションファイルが作成されたことを確認し、オプションなどを加える場合は記述をする。

```20210217104040_add_title_to_books.rb
class AddTitleToBook < ActiveRecord::Migration[5.2]
  def change
    add_column :book, :title, :string
  end
end
```

③再度マイグレーションを実行する

```terminal.
$ rails db:migrate
```
④完成！
<br>



やり方は１つではありませんが、ご自分に適した方法を選んでいただければ良いかと思います。
焦らず落ち着いて取り組めば大丈夫です！



終わり
---
今回は以上になります。
私自身もプログラミング初心者ですが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
「【GoogleMap】地球を半径6371008mの球体として距離計算していた」を参考にWolframAlphaでやってみた。 

(オリジナル)

https://qiita.com/YasumiYasumi/items/d72969aa35a96e9b7ad0

## WolframAlphaで「地球」
https://www.wolframalpha.com/input/?i=%E5%9C%B0%E7%90%83&lang=ja
#### Physical properties:
equatorial radius | 6378.137 km

## wikipediaで「地球」
地球は赤道半径が正確に

```
6378137 m、
```
扁平率が正確に1/298.257222101の回転楕円体である。
極半径は
約 6356752.314 m
（GRS80地球楕円体の定義からの誘導値）である。赤道半径のほうが極半径よりも約 21384.686 m 大きい


# 参考1

子午線の長さは約4万キロメートルだが、これは当初1メートル自体が「子午線全周長を4千万分の1にした長さ」を基準に決定されたためである。<wikipedia「子午線」より

https://ja.wikipedia.org/wiki/%E5%AD%90%E5%8D%88%E7%B7%9A


WolframAlphaで計算
2*pi*R=4000*10000
解:
R = 20000000/π
近似値:

```
R≈6366198
```
R≈6.36619772367581×10^6

# 参考2

https://qiita.com/hirayama_yuuichi/items/472639f89036ec7d3d99

r=12756*10**3/2  #地球の半径(m)

https://www.wolframalpha.com/input?i=12756*10**3%2F2

Result
6378000
Carthageで不要なフレームワークのビルドを除外してビルド時間を短縮する

### はじめに
[Carthage](https://github.com/Carthage/Carthage) はビルド時にXcodeプロジェクトに含まれる全ての共有スキームをビルドするようになっています。そのため、アプリから依存することのないフレームワークのスキームもビルドすることになり、無駄な時間がかかってしまいます。

例えば [RxSwift](https://github.com/ReactiveX/RxSwift) ですと、次の５つのフレームワークのビルドが走ることになりますが、アプリから使用しているのが RxSwift 単体の場合は、無駄に４つのフレームワークをビルドすることになってしまうのです。

- RxSwift
- RxBlocking
- RxRelay
- RxCocoa
- RxTest

この記事では、不要なフレームワークをビルドを除外する方法を紹介します。

### ビルドの前に任意の処理を実行する
Carthageで `bootstrap` もしくは `update` コマンドを実行すると、以下のような 1~3 の手順でビルド処理が進みますが、手順2の後にプロジェクトから不要な共有スキームを取り除くことでビルドをスキップすることができます。

1. 依存パッケージのリポジトリをクローン
2. ビルド対象となるコミットをチェックアウト 👈 この後に不要な共有スキームを取り除く！
3. プロジェクトの各共有スキームのビルド

Carthage の `bootstrap` / `update` コマンドでは前述の手順1~3が全て実行されますが、`--no-build` オプションを加えることで手順3をスキップすることができます。
また、`build` コマンドでは手順3のみを実行することができます。

```sh
carthage bootstrap --no-build
# ここで不要な共有スキームを取り除く
carthage build
```

> ※ `carthage bootstrap --no-builds` 相当の処理は `carthage checkout` でも実行できます。

### 不要な共有スキームを取り除く
Xcodeプロジェクトの共有スキームは以下のパスにファイルとして存在しているので、このファイルを削除するだけでビルドから除外することができます。

```
{package}.xcodeproj/xcshareddata/xcschemes/{scheme}.xcscheme
```

RxSwift の RxCocoa のビルドをスキップしたい場合はこうなります。

```sh
rm -f ./Carthage/Checkouts/RxSwift/Rx.xcodeproj/xcshareddata/xcschemes/RxCocoa.xcscheme
```

### まとめ
ここまでの内容で必要なものは全て揃いましたので、あとはシェルスクリプトやMakefileでまとめておきましょう。

```makefile:./Makefile
.PHONY: carthage_bootstrap carthage_update

carthage_bootstrap:
	carthage bootstrap --no-build
	./bin/exclude_carthage_unused_schemes.sh
	carthage build --platform iOS --cache-builds --no-use-binaries --use-xcframeworks

carthage_update:
	carthage update --no-build
	./bin/exclude_carthage_unused_schemes.sh
	carthage build --platform iOS --cache-builds --no-use-binaries --use-xcframeworks
```
```sh:./bin/exclude_carthage_unused_schemes.sh
#!/bin/sh
# Carthageの依存パッケージの不要なスキームはビルドしないように除外する

CARTHAGE_CHECKOUTS=$(cd $(dirname $0);cd ../Carthage/Checkouts;pwd)

# ReactiveX/RxSwift の不要なスキームを削除
SCHEMES_DIR="${CARTHAGE_CHECKOUTS}/RxSwift/Rx.xcodeproj/xcshareddata/xcschemes"
rm -f "${SCHEMES_DIR}/RxCocoa.xcscheme"
rm -f "${SCHEMES_DIR}/RxRelay.xcscheme"
```
Django 閲覧数(PV数)の実装

Djangoでは閲覧数(PV数)を簡単に実装できる.


```python:models.py

class Post(models.Model):
    ...
    # 閲覧数
    views = models.PositiveIntegerField(default=0)
    ...
```

```python:views.py

def post_detail(request, post_id):
    post = get_object_or_404(Post, id=post_id)
    post.views += 1 #閲覧数をインクリメント
    post.save()
    ...
```

## 参考
[Django公式ドキュメント](https://docs.djangoproject.com/en/3.1/ref/models/instances/#updating-attributes-based-on-existing-fields)
ADFS HRD画面に表示される「Active Directory」を別名に変えたい

#レルム選択画面の表示名を変更する。

![image_thumb10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347341/f16eea26-0552-f445-0151-80416f63d9f5.png)

赤波線のとこを会社名とか別名に変えたい。
でもActiveDirectoryはプロパティ変更不可のため、`Get-AdfsClaimsProviderTrust`を使って表示名を変更しようとしてもエラーになってしまう。

##解決方法
**A. HRD画面が表示されるタイミングで読み込まれるonload.jsを修正して、「Active Directory」と表示されてるエレメントを無理やり書き換える。**

以下やり方です。

####①現在のWebテーマをコピーする。
デフォルトのWebテーマ（default）をいじると元に戻せなくなるので注意！
コピーしたテーマをいじって反映させます。

```php:WindowsPowerShell
New-AdfsWebTheme -Name <新しいテーマ名> -SourceName <現在使用しているテーマ名>
```

現在カスタムテーマをを使用している場合はそちらをコピーしてください。

```php:WindowsPowerShell
#現在使用しているテーマ名の取得
Get-AdfsWebConfig
```

####②新しいテーマをエクスポートする。

```php:WindowsPowerShell
Export-AdfsWebTheme -Name <新しいテーマ名> -DirectoryPath C:\Webthem
```

既存のADFSのテーマを取得できる
<pre>
C:\Webthem
├───css
│       style.css
│       style.rtl.css
│
├───illustration
│       illustration.png
│
├───images
│   └───idp
│           idp.png
│           localsts.png
│           otherorganizations.png
│
└───script
        onload.js
</pre>


####③JavaScript修正
script\onload.jsを開いて最終行に下記を追加。

```php:onload.js
 //Check if we are in the HRD page
if ( document.getElementById("hrdArea") ) {
    var strADCPName = "変更したい表示名" ;
    //Create an array of all claim provider trust section in the page
    var listAllSpanForIdp = document.getElementsByClassName("idpDescription float") ;
    var inc;
    for (inc = 0; inc < listAllSpanForIdp.length; inc++) {
        if ( listAllSpanForIdp[ inc ].innerHTML == "<span class=\"largeTextNoWrap indentNonCollapsible\">Active Directory</span>" ) {
            //Change the HTML content of the matching section to the value specified in the strADCPName variable
            listAllSpanForIdp[ inc ].innerHTML = "<span class=\"largeTextNoWrap indentNonCollapsible\">"+ strADCPName +"</span>" ;
        }
    }
}
```

####④修正したJavaScriptをADFSに読み込ませる

```php:WindowsPowerShell
Set-AdfsWebTheme -TargetName CorpWebTheme -AdditionalFileResource @{Uri="/adfs/portal/script/onload.js";path="C:\Webthem\script\onload.js"}
```

####⑤カスタムしたテーマを設定する。
コピーしたWebテーマを有効にする。

```php:WindowsPowerShell
Set-AdfsWebConfig -ActiveThemeName <新しいテーマ名>
```
元に戻したいときは`Set-AdfsWebConfig -ActiveThemeName default`でデフォルトのテーマ（もしくはコピー元のテーマ）を有効にしてください。



以上
phpMyAdminでエクスポート時に「このサイトにアクセスできません」というエラーが出たときの対処法

レンタルサーバーのphpMyAdminでSQLダンプをエクスポートしようとすると

> このサイトにアクセスできません
https://xxx/phpmyadmin/export.php のウェブページは一時的に停止しているか、新しいウェブアドレスに移動した可能性があります。
ERR_INVALID_RESPONSE

というエラーが出ました。mysqldumpも使えない状況なので困りましたが、どうやら容量オーバーだったらしく、テーブルを小分けにしたらなんとかダウンロードできました。

![phpmyadmin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/47644f46-192e-e25a-6145-0bc4adb064cd.png)
LainanAPIの言語別の使用例

# LainanAPIの言語別の使用例

## [Javascript](https://developer.mozilla.org/ja/docs/Learn/JavaScript)
### [LainanJS](https://lainan.one/code/lainanjs/readme.html)を利用する場合
[LainanJS Readme](https://lainan.one/code/lainanjs/readme.html)をお読みください。

## [Node](https://nodejs.org/)
[Node](https://nodejs.org/)は、[NPM](https://npmjs.com/)モジュールがありますので、そちらをご利用ください。

**[lainan-api](https://www.npmjs.com/package/lainan-api)**

```js
const lainan = require("lainan-api");//LainanAPIのNPMモジュールをインポート
async function run() {
    console.log(await lainan.message("こんにちは。").reaction);//「こんにちは。」の返事を取得して返事を表示
};
run();//実行
```

## [Python](https://python.org/)
### [requests](https://requests-docs-ja.readthedocs.io/en/latest/)での例
```python
import requests,json
Request = "こんにちは" #リクエストする言葉
json1 = requests.get("https://api.lainan.one/",{"msg":Request}).text #レスポンスを取得
node = json.loads(json1) #扱いやすいようにテキスト形式からjson形式に変換
print(node) #返事を表示
```
### urllib2での例
```python
import aiohttp, urllib.parse

aionet = aiohttp.ClientSession()

text = 'おはよう'

async def lainan_get(text):
 async with aionet.get('https://api.lainan.one/?msg='+urllib.parse.quote(text)) as r:
  if r.status != 200:
     raise Exception('LainanAPI Error!')
  data = await r.json()
  print(data['reaction'])
```


## [Java](https://java.com/)
```java
String Request = "こんにちは。"; //リクエストする言葉
try {
    HttpURLConnection connection = (HttpURLConnection) new URL("https://api.lainan.one/?msg="+Request).openConnection(); //Connectionをオープンする
    connection.setRequestMethod("GET"); //メソッドをGETに設定
    if (connection.getResponseCode() == HttpURLConnection.HTTP_OK){ //リクエスト、成功か判断
        InputStream json = connection.getInputStream(); //レスポンスを取得
        JsonNode node = new ObjectMapper().readTree(new InputStreamReader(json, "UTF-8")); //Jsonを扱いやすいように変換
        System.out.println(node.get("reaction").textValue());//返事を表示
    }
} catch (IOException e) {
    e.printStackTrace();//エラーをコンソール出力
}
```

## [PHP](https://php.net/)
```php
//APIの情報全部を取る場合
<?php
$message = "こんにちは"; //リクエストする言葉
$resp = file_get_contents("https://api.lainan.one/?msg=".urlencode($message)); //レスポンスを取得
print_r($resp);
?>

//応答のみ取る場合
<?php
$message = "こんにちは"; //リクエストする言葉
$resp = file_get_contents("https://api.lainan.one/?msg=".urlencode($message)); //レスポンスを取得
echo $resp->reaction;
?>
```

## [C](https://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E)
準備中...

## [C++](https://isocpp.org/)
準備中...

## [C#](https://docs.microsoft.com/en-us/dotnet/csharp/)
準備中...

## [Ruby](https://ruby-lang.org/)
準備中...

***
### コードの提供ありがとうございます。

- [Monitor Human](https://github.com/TarochanChannel/) (JS, Node)

- [Furcht968](https://github.com/Furcht968/) (Python)

- [CyberRex](https://github.com/CyberRex0) (Python)

- [mf_Mii](https://github.com/mf-mii/) (Java)

- [みどくり](http://midokuriserver.com/) (PHP)
【Amazon】ほしい物リストの総額を1ボタンで表示

気になった本をAmazonのほしい物リストにポンポン入れていたら結構な量になり、そろそろ10万円超えてそうだなと思ったので調べてみました。ウェブコンソールさえ開ければコピペして使えるはずです。値段が表示されてない商品は無視されます。

# 追記 (2021 Feb 24)

@sugoroku_y さんからのコメントをもとに内容を変更しました。

- タイトルを「Amazonでほしい物リストの総額を2行で表示する」から変更
- コードを一行で表示

# 環境
Google Chrome - Version 88.0.4324.146 (Official Build) (arm64)
基本どのブラウザでも使えます(たぶんIEだと動かない)。

# コード(追記前)

```javascript
prices = Array.from(document.getElementsByClassName("a-price-whole"))
prices.map(price => parseInt(price.textContent.replace(/,/g, ''))).reduce((a, b) => a + b, 0)
```

# 結果(追記前)

31万1695円でした

![Screenshot 2021-02-18 at 12.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186209/feae9b68-74e5-ae54-3be1-b2d42cca0cbc.png)

# ポイント(追記前)

- HTMLcorrectionをArrayにする
- map(コンマの排除と整数化)
- reduce(合計を計算)


# コード(追記: 2021-Feb-24)

頂いたコメント

> spread演算子使うと配列に変換するのが楽。
> 文字列を数値に変換するだけなら+を前に付けるだけでいい。
> あとreduceは第2引数を省略すると配列の先頭を初期値として使ってくれるので便利。

```javascript
[...document.querySelectorAll('.a-price-whole')].map(price=>+price.textContent.replace(/,/g,'')).reduce((a,b)=>a+b)
```

## ブックマークレットに

頂いたコメント

> ブックマークレットにすると便利かも

Javascriptのコードをお気に入りに登録しておくと、ワンクリックで総額を表示できるようになります[[参考記事]](https://qiita.com/kanaxx/items/63debe502aacd73c3cb8)。

```
javascript:alert('合計:'+[...document.querySelectorAll('.a-price-whole')].map(price=>+price.textContent.replace(/,/g,'')).reduce((a,b)=>a+b).toString().replace(/(?<=\d)(?=(?:\d{3})+$)/g,',')+'円')
```

# 結果(追記: 2021-Feb-24)


まずブックマークレットを登録します。

お気に入りボタンをクリックした後、「More...」を選択します。

![Screenshot 2021-02-24 at 17.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186209/763a8d1d-d429-eb12-1cf7-7a9d3aefdc46.png)

URLの欄に上のコードをコピペします。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186209/bb832ef6-5f62-6171-2831-9751f0fcc13a.png)

出来上がったブックマークボタンをクリックすると総額が表示されます。

![Screenshot 2021-02-24 at 17.52.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186209/02ce28b0-e46a-f369-8225-ec7c0db248c5.png)


# おわりに

欲しい物リストです

何か買ってください

https://www.amazon.jp/hz/wishlist/ls/1F3DAMDCRAH7W?ref_=wl_shar
LainanAPIのよくある質問

# LainanAPIのよくある質問
## Q. PythonでこのAPIを使えますか？
<u>A. 使えます。 このAPIはJSONフォーマットで返すので、ほとんどのプログラミング言語でご利用いただけます。</u>

## Q. LainanAPIのサーバーはどのような仕組みですか？
<u>A. LainanAPIのサーバーはMonHuオリジナルです。ソースコードを入手される場合は、Discordにてお問い合わせください。</u>

## Q. 公式ブログを編集するにはどうすれば良いのですか？
<u>A. DiscordサポートもしくはメールサポートにMarkdownファイルを送信してください。</u>

※補足: オリジナルのMarkdownが欲しい場合は、画面を下の方にスクロールします。

ダウンロードリンクがあるのでそこを押すと自動でダウンロードが始まります。

## Q. LainanAPIはどのようにすれば、利用出来ますか？
<u>A. LainanAPIの利用規約に同意して、申請ページを開きます。 そして、申請が完了したら、Readmeのページを開き読みます。 LainanAPIがご利用いただけるようになりました!</u>
【SpringBoot】tomcatのアクセスログをJSON形式で出力する

# 目的
logback-accessを使用してtomcatのアクセスログをJSON形式で出力する方法をまとめました。

# HowTo
## 1. build.gradleのdependenciesに以下を追加

JSONへの変換は[logstash-logback-encoder](https://github.com/logstash/logstash-logback-encoder)を使用します。
logback-accessの設定は[logback-access-spring-boot-starter](https://github.com/akihyro/logback-access-spring-boot-starter)を入れるだけです。

```java

  implementation("net.logstash.logback:logstash-logback-encoder:6.6")
  implementation("net.rakugakibox.spring.boot:logback-access-spring-boot-starter:2.7.1")
```

## 2. resources/にlogback-access.xmlを追加

## 用意されたフィールドを出力する場合

```logback-access.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<configuration>
  <property resource="META-INF/build-info.properties" />
  <appender name="STDOUT_JSON" class="ch.qos.logback.core.ConsoleAppender">
    <encoder class="net.logstash.logback.encoder.LogstashAccessEncoder">
      <!-- META-INF/build-info.propertiesのbuild.versionをversionに使用 -->
      <version>${build.version}</version>
      <fieldNames>
        <!-- デフォルトのフィールド名を上書き -->
        <timestamp>timestamp</timestamp>
        <version>version</version>
　　　　　<!-- デフォルトでHeader情報は含まれないので出力したい場合は指定する -->
        <requestHeaders>request_headers</requestHeaders>
        <responseHeaders>response_headers</responseHeaders>
      </fieldNames>
      <!-- フィールドを追加する場合 -->
      <customFields>{"custom_key": "custom_value"}</customFields>
      <!-- 改行付きで表示したい時用 -->
      <jsonGeneratorDecorator
        class="net.logstash.logback.decorate.PrettyPrintingJsonGeneratorDecorator"/>
    </encoder>
  </appender>
  <appender-ref ref="STDOUT_JSON"/>
</configuration>
```
- ドキュメント： https://github.com/logstash/logstash-logback-encoder#accessevent-fields


## 柔軟に出力する場合

柔軟にフォーマットを変更したい場合はAccessEventCompositeJsonEncoderを使用します。

```logback-access.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<configuration>
  <property resource="META-INF/build-info.properties" />
  <appender name="STDOUT_JSON" class="ch.qos.logback.core.ConsoleAppender">
    <encoder class="net.logstash.logback.encoder.AccessEventCompositeJsonEncoder">
      <!-- 改行付きで表示したい時用 -->
       <jsonGeneratorDecorator
         class="net.logstash.logback.decorate.PrettyPrintingJsonGeneratorDecorator"/>
      <providers>
        <pattern>
          <pattern>
            {
            "timestamp": "%t{yyyy-MM-dd'T'HH:mm:ss.SSSXXX}",
            "version": "${build.version}",
            "method": "%m",
            "status": "%s",
            "host": "%h",
            "path": "%U",
            "query": "%q",
            "request_size": "%i{Content-Length}",
            "user_agent": "%i{User-Agent}",
            "remote_address": "%i{REMOTE_ADDR}",
            "referer": "%i{Referer}",
            "protocol": "%H",
            "latency": "%D",
            "remote_ip": "%a"
            }
         </pattern>
        </pattern>
      </providers>
    </encoder>
  </appender>
  <appender-ref ref="STDOUT_JSON"/>
</configuration>
```

出力可能な項目一覧： http://logback.qos.ch/xref/ch/qos/logback/access/PatternLayout.html


# 参考記事
https://qiita.com/mito1213/items/0d9394d75dbd5642f37d
【AWS】apacheをインストールしたけどwebブラウザでアクセスできないときの(初心者が)見落としがちな対処

### 状況

本を見ながらパブリックサブネット作ったり、IPアドレス設定したり、SSH接続できるようにもした！
ポート80番も通した！色々確認しても本に書いてある通り！

パブリックIPアドレスにアクセス！！
・・・・・・・・・・・・・・
・・・・・・・・・
・・・・
通らない？？


### やったこと
パブリックIPアドレスを
https://{パブリックIPアドレス}から
http://{パブリックIPアドレス}に変える

### 考察・感想
https通信はSSL証明書といものを発行してもらって可能になるものらしいから(実際本のURLをよくみると 保護されていない通信 | {パブリックIPアドレス}　になっている。。)
自分の環境だとIPアドレスを直接打ったり、オープンアドレスをクリックするとhttps://でアクセスしようとしていたが、その部分は省略されていたため気づけなかった・・・

二日間悩んで突き止めた原因がこれで泣きそうでした。。誰かのお役に立てれば幸いです。。
Red Hat Developer Subscription for Individuals を試してみる

> In the first half of 2021, we will be introducing low- or no-cost programs for a variety of use cases, including options for open source projects and communities, partner ecosystems and an expansion of the use cases of the Red Hat Enterprise Linux Developer subscription to better serve the needs of systems administrators and partner developers. 
>
> 引用元 : [FAQ: CentOS Stream Updates](https://www.redhat.com/en/blog/faq-centos-stream-updates)

CentOS Stream （とCentOS linux終了の）FAQで触れられていたno-cost programsの一つがリリースされた模様なので試してみる。

## 手順

> When you [join the Red Hat Developer program](https://developers.redhat.com/register), the no-cost Red Hat Developer Subscription for Individuals will be automatically added to your account. This subscription enables access to Red Hat Enterprise Linux, among other [Red Hat software](https://developers.redhat.com/products). We recommend you follow our [Getting Started Guide](https://developers.redhat.com/products/rhel/get-started/), which covers downloading and installing Red Hat Enterprise Linux 7 on a physical system or virtual machine (VM) using your choice of VirtualBox, VMware, Microsoft Hyper-V, or Linux KVM/Libvirt. For Red Hat Enterprise Linux 8, you can follow these [Quick Starts](https://developers.redhat.com/rhel8/). 
> 
> 引用元 : [FAQs for no\-cost Red Hat Enterprise Linux offered via the Red Hat Developer Subscription for Individuals \| Red Hat Developer](https://developers.redhat.com/articles/faqs-no-cost-red-hat-enterprise-linux#)

ということで、Red Hat Developer programに参加してサブスクリプション一覧のページを更新していたら新しいサブスクリプションが表示された。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502524/cf245d7b-0650-ce98-5fbd-0c8e5535e390.png)

[New Year, new Red Hat Enterprise Linux programs: Easier ways to access RHEL](https://www.redhat.com/en/blog/new-year-new-red-hat-enterprise-linux-programs-easier-ways-access-rhel)
で言及されていたように16台まで利用できる模様。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502524/ce1b6619-1298-27de-33ef-df4aeff15226.png)
【github/gh/gh 版】commit id から プルリクエスト(PullRequest)を特定して ウェブブラウザで pr を開くやつ。

commit id から プルリクエスト(PullRequest)を特定して ウェブブラウザ で 開くやつ。

#### github/gh/gh 版

hub の代わりに gh を使うやつ

`.gitconfig`

```.gitconfig
[alias]
        blamepr = "!f() { gh pr view -w `git log --merges --oneline --reverse --ancestry-path $1...master | grep 'Merge pull request #' | head -n 1 | cut -f5 -d' ' | sed -e 's%#%%'`; }; f"
```

使い方

```bash
git blamepr ${COMMIT_ID}
```

##### 改造元 (hubで開く)：
https://qiita.com/awakia/items/f14dc6310e469964a8f7#git-openpr-hub%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E7%94%A8
IPv6による通信がIPv4よりも速いことが多い理由

IPv6の通信がIPv4よりも速いと言われる所以を2点整理しました。
正確でない情報もあるかと思うので、発見した方はご指摘いただけると幸いです。

##IPoEによるインターネット通信がPPPoEよりも通信が速い
PPPoEおよびIPoEとは、家庭や企業からインターネットに接続するまでの通信方式のことです。PPPoEはIPv4およびIPv6に対応していますが、現在一般的に用いられてるのはIPv4版になります。一方でIPoEはIPv6のみに対応しています。

結論を言うと、**PPPoEを用いたIPv4通信よりも、IPoEを用いたIPv6通信の方が速いことが多い**です。以下でもう少し詳細に説明します。


PPPoEは、ユーザの持つCPEルータからNGN網（NTTの回線）にある網終端装置までトンネルを張り、その後はISP（インターネットサービスプロバイダ）のネットワークを経てインターネット網に接続する方式になります。本筋ではないので、CPEルータ、トンネルとはどういうものか、などの説明はここでは省略します。

 

図に表すとこんな感じです。

 
![スクリーンショット 2021-02-16 19.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647755/e2e83aaf-6a46-645a-aa73-9a098d5b5a82.png)



どうやら上図にも描いている「網終端装置」とやらがポイントらしく・・・。PPPoEの場合は必ずここを通過するので、ここが混み合っていると通信が遅くなります。

 


対してIPoEはこの網終端装着を通過しない通信方式です。

流れとしては、CPEルータからPPPoEで張ったようなトンネルなしでNGN網を通過したのち、VNEネットワークの入り口にあるホームゲートウェイを経由し、VNEネットワークを通ってインターネットまで出ます。
VNEネットワークはISPが他事業社から借りているIPv6ネットワークで、正確ではないですが、イメージとしてはPPPoEの図で出てきたISPネットワークのIPoE版という感じです。
 

図に表すとこんな感じになります。

 

![スクリーンショット 2021-02-18 10.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647755/377a1e4d-b36d-c404-6f7d-bfd80f1b73bc.png)



で、IPoEがPPPoEよりもインターネット通信がスムーズな理由は以下の通りです。

- NGN網とVNEネットワークの間にあるホームゲートウェイが複数存在し、NGN網を通過してきたパケットがそれぞれのホームゲートウェイに分散されるため、輻輳が起こりづらい
- ゲートウェイルータの通信容量が網終端装置よりもかなり大きい（[こちら](https://www.janog.gr.jp/meeting/janog42/application/files/1515/3238/7347/janog42-IPoE-ntteast_yamaguchi.pdf)のスライド3枚目にて、見方が正しければ通信容量は10倍）
- 単純にIPoEユーザの数がまだ少ないため、ホームゲートウェイに集まるパケットの絶対量が少ない
 
というような感じで、インターネットに関しては、PPPoEを用いたIPv4通信よりもIPoEを用いたIPv6通信の方が速い場合が多いらしいです。

※「IPv6通信」というよりも「IPoE通信」が速い場合が多いという話なので、厳密に言うとIPv6であれば必ずしも速度が保証されるわけではありません。例えばPPPoEを用いたIPv6通信は従来の速度とおそらくあまり変わらないはずです。

 

##ルータでの処理速度がIPv6の方が速い
ルータによる処理速度はIPv4パケットよりもIPv6パケットの方が速いことから、インターネットに届くまで・返ってきてからの通信時間もより短縮されます。

ルータの処理速度がIPv4よりもIPv6の方が速い理由は以下の2つです。
 
####ルータがチェックすべきヘッダが限定されたため
IPv6ヘッダの中身は基本ヘッダと拡張ヘッダに分けられますが、拡張ヘッダはオプションという形で必要な場合のみ追加することとなっています。そのためIPv4パケットでは必ずルータが処理する必要のあった項目もIPv6パケットでは基本的にスルーでよいのでルータの処理が速くなっています。

####ヘッダチェックサムフィールドが省略されているため
IPv4ヘッダには、ヘッダ内の情報が前のルーティングポイントで送信された時と比べて変わっていないかを調べるヘッダチェックサムというフィールドがありますが、IPv6ヘッダではこの項目は省略されています。このフィールドはルータを通過するごとに値が変わるためルータに負荷をかけていましたが、省略されたためルータの処理が減っています。
 
どのくらい処理時間が短縮されたのかはわかりませんでした・・・

##まとめていないまとめ 
他にも理由を見つけたら追記します。

 

##参考 
[プロフェッショナルIPv6 – 技術書出版と販売のラムダノート](https://www.lambdanote.com/products/ipv6)

[【なぜ速い？】IPv6について通信の仕組みやIPv4との違いからやさしく楠リカが解説](https://simpc.jp/rikatech/about-ipv6/)

[【初心者でも分かる】PPPoE方式とIPoE方式の違いとメリット｜ICT Digital Column 【公式】NTTPCコミュニケーションズ](https://t.co/NIRY7usbo8?amp=1)

[IPv6のヘッダフォーマット：IPv6ネットワークへの招待（3） - ＠IT](https://www.atmarkit.co.jp/ait/articles/0110/05/news002.html)
Active Storageの導入について

12月よりプログラミングスクールに通い学習しております

ただいま、ruby on rails を使って
オリジナルアプリの実装を行っています。
画像投稿が簡単にできるようになる、Active Storageを導入したのですが、
学習整理のために記事にしたいと思います。

# 前提

まずは、Active Storageとそれにまつわるものについて簡単に説明させていただきます。

・Active Storage
ファイルのアップロードが簡単に実装できるGemです。
railsに統合されて、指定のコマンドを実行するだけで簡単に導入できます。

・ImageMagick
コマンドラインから画像に処理を加えることができるツールです。
処理としては、画像の作成やサイズ変更、保存形式の変更などがあります。
ImageMagickはGemではなく、ソフトウェアです。

・MiniMagick
ImageMagickの機能をRubyで扱えるようにしてくれるGemです。

・ImageProcessing
MiniMagickでは提供できない、画像サイズを調整する機能を提供するGemです。


# 導入手順

```
% brew install imagemagick
```
ターミナルより、imagemagickをHomebrewからインストールします。
すでに導入済みの方は飛ばして大丈夫です。

Gemfile

```
# Gemfileの一番下に記述する

gem 'mini_magick'
gem 'image_processing', '~> 1.2'

```

```
% bundle install
```

続いて、minimagickとimageprocessingをgemfileに記述し、bundle install
を行います。
なお、gemをインストールした場合は、サーバーを再起動させます。

続いて、Active Storageを使用する準備を行います。

ターミナルより、

```
% rails active_storage:install
% rails db:migrate
```
上記のコマンドを実行し、インストールとデータベース作成を行います。
これで、導入は完了です！！

# 画像保存の記述

今回私が作成したオリジナルアプリでは、プロフィール写真と投稿用に画像を添付
できる実装を行っています。

今回は、プロフィール写真の実装の記述からを記事にします。
ちなみに、ユーザー管理機能の実装にはdeviseを導入しています。

models/user.rb

```
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  
  has_many :posts, dependent: :destroy
  has_many :comments, dependent: :destroy
  has_many :likes, dependent: :destroy
  has_many :post_likes, dependent: :destroy
  has_one_attached :image, dependent: :destroy

以下省略

end
```
たくさん記述がありますが、大切なのは
has_one_attached :image, dependent: :destroy
この部分です。
ここで、先ほど導入したActive Storageと紐付けしています。
ちなみに、dependent: :destroyはユーザー情報を削除した時
一緒に削除するよという記述です。
ここでは、関係ありません。

次にコントローラーへの記述です。

```
controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname, :profile, :image])
    devise_parameter_sanitizer.permit(:account_update, keys: [:nickname, :profile, :image])
  end
end
```
ストロングパラメーターの設定です。
deviseを導入しているため、デフォルト以外の追加カラムへの
送り先の指定は、application_controller.rbで設定します。
ここで、permitにimageを追加します。

ここまで、できたのであとはビューで呼び出すだけです。

# Viewの設定

今回はユーザーのマイページにプロフィール写真を呼び出す実装を行います。

views/user/show.html.erb

```
<%= image_tag @user.image.variant(resize: '180x180'), class: 'user__card__img' if @user.image.attached? %>
```
呼び出す際は、image_tagメソッドを使用します。
コントローラーで設定した@userの中には、ユーザーの情報が入っています。
@user.imageとすることで、ユーザーが保存した写真を呼び出せます。

そして、variant(resize: '幅x高さ')
こちらで画像のサイズを調整することができます。

そしてそして、attached?メソッドは画像が添付されているかどうかを
trueかfalseで返すメソッドです。
画像が存在する場合のみimage_tagが読み込まれるようになります。

以上がActive Storageの導入から実装の手順です。

長々書いてしまいましたが、
導入したら、アソシエーション→ストロングパラメーター→ビューの手順で実装できます。
この方法で他のモデルにも紐付けができます。

初心者なので、何か不備があるかもしれません。
もし何かございましたらコメントいただければと思います。
よろしくお願いいたします。
AtCoder Beginner Contest 049 C

https://atcoder.jp/contests/abc049/tasks/arc065_a
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112433/a0301f31-07aa-9643-d888-472aa1591443.png)


```php
#include <bits/stdc++.h>
using namespace std;

int main() {
  string S;
  string T;
  bool flg=0;
  cin>>S;
  int N=S.size();
//dreamerとかdreamとか探索の切れ目が判断むずいので逆さにする
  string d="maerd";
  string dr="remaerd";
  string e="esare";
  string er="resare";
  reverse(S.begin(),S.end());//文字列反転
  //cout<<S<<endl;

  for(int i=0;i<N;i++){
   cout << N-i << endl;
   T="";
  if(N-i<5 && N-i>0){
    flg=1;
    break;
    }
  else{
   //cout <<T<<endl;//デバッグ用
    for(int j=0;j<5;j++){
      T=T+S.at(i+j);
    //cout <<T<<endl;//デバッグ用
    }
      if(T==d || T==e){//5文字で探索終了
        i=i+4;//5文字分飛ばす。i++で1ｲﾝｸﾘなので4を足す
      }
      else{//5文字で一致しない場合
        T=T+S.at(i+5);//6文字目を追加
      //cout<<T<<endl;//デバッグ用
        if(T== er){//6文字目で一致
          i=i+5;//6文字分飛ばす。i++で1ｲﾝｸﾘなので5を足す
        }
        else{//6文字までﾁｪｯｸして一致しない場合
          T=T+S.at(i+6);//7字目を追加
        //cout<<T<<endl;//デバッグ用
          if(T==dr){
            i=i+6;//7字分飛ばす
          }
          else{
            flg=1;//NGフラグ立てる
            break;
          }
        }
        }
        }   
      if(flg==1){
      break;
      }
  }
if(flg==1){
  cout <<"NO"<<endl;
}
else{
  cout<<"YES"<<endl;
}
}

```