Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

React metaタグの変更

github pageにて作成したアプリを公開しているのですが、、、
metaタグを変更しておりませんでした。。。
やってしまいました😜

アプリ作成にあたって基本は抑えておけという話です。
反省😢
基本から勉強しなおした方がいいんでしょうか??

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

新品価格
¥2,237から
(2020/10/29 22:22時点)


っということでこちらのアプリのmetaデータを変更してみました!!
https://elsammit.github.io/wordbookApp/

変更にあたって、方法を調べてみましたのでまとめておきます!!
方法は2つです!!



■方法1

react-document-metaを利用する方法です!!

まずreact-document-metaをインストールします。

npm install --save react-document-meta

もしくは

yarn add install react-document-meta

そして、react-document-metaを用いたmetaタグの作成ですが、このように利用すればOKです!!

import DocumentMeta from 'react-document-meta';

・・・

      render() {
        const meta = {
            title: 'Elsammitの英単語アプリ作成してみた',
            description: 'React初心者が英単語アプリを作ってみました。選択式でクイズを答えるだけ!!ゲーム感覚で単語が覚えられるよ',
            canonical: 'http://example.com/path/to/page',
            meta: {
              charset: 'utf-8',
              name: {
                keywords: 'react,meta,document,html,tags'
              }
            }
          };

        return (<div>
            <DocumentMeta {...meta}>
                <p>hello world</p>
            </DocumentMeta>
          </div>
        )}\

metaタグですがこちらにそれぞれ必要な項目を記載すればOKです。

        const meta = {
            title: 'Elsammitの英単語アプリ作成してみた',
            description: 'React初心者が英単語アプリを作ってみました。選択式でクイズを答えるだけ!!ゲーム感覚で単語が覚えられるよ',
            canonical: 'http://example.com/path/to/page',
            meta: {
              charset: 'utf-8',
              name: {
                keywords: 'react,meta,document,html,tags'
              }
            }
          };

titleも記載することができるのはいいですね。

■方法2

index.htmlを愚直に変更する方法です。
index.htmlはpublicフォルダ配下に格納されております。
index.htmlはこちらのようになっていますので、必要な項目に対して記載変更すればOKです👍

<html lang="jp">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="React初心者が英単語アプリを作ってみました。選択式でクイズを答えるだけ!!ゲーム感覚で単語が覚えられるよ"
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Elsammitの英単語アプリ作成してみた</title>
  </head>
 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

こちらはhtmlと同じ感覚で変更できますね。

■最後に

今回は短いですが、metaタグの変更方法について簡単にまとめました。
個人的にはreact-document-metaを用いれば、
デフォルトで用意されたファイルを変更せずに済みますし、.jsファイルのみの修正で済むのでよさそうと思っております。

だけど普通は方法2を使用するのでしょうか??🤔

ちょっとデバイス関係も触っていきたいので次回はデバイス関係のネタを載せようかな?🤔

そういえば、、、
他のアプリはmetaタグ変更していないのでこれから変更していきます!!
最初からやっておけばよかった😅
結構作ってしまった後だから直すの手間です。。。


■参考
reactjs — React.jsでメタタグを更新する方法は?
https://www.npmjs.com/package/react-document-meta

単語帳アプリ改造してみました

前回、英単語アプリを作成してみました!!
elsammit-beginnerblg.hatenablog.com


ただこのアプリ、表に英語、裏に日本語が書かれていてクリックしたら回転するだけでした😅
まぁこれでも単語カードとして使用することが出来そうですが、、、
ちょっと寂しいですよね😂
ただカードが回転するだけなので。
紙に書いた場合と同じです。
単語追加できない分劣化でしょうか??🤣

ということで、
 ・英語に対する日本語を3択に変更
 ・成功した場合には〇、間違いの場合には×を表示
するように変更しました!!



■作成アプリ

完成したアプリはこんな感じです!!
f:id:Elsammit:20201027224430g:plain

勉強に使えそうなレベルかな??と自画自賛🤣

アプリはこちらで公開しております。
https://elsammit.github.io/wordbookApp/


ソースコードはこちらに格納しております。
https://github.com/Elsammit/wordbookApp.git

■新規追加機能

今回追加したのはボタンだけです。
こんな感じ。

<button id="button1" className='NextButton1' onClick={ () => this.nextClick(button1) }>{button1}</button>
<button id="button2" className='NextButton2' onClick={ () => this.nextClick(button2) }>{button2}</button>
<button id="button3" className='NextButton3' onClick={ () => this.nextClick(button3) }>{button3}</button>
<img className="seikai" id="OKNG" src={Blank} alt="" width="200" height="200" />

どのボタンがクリックされたかを判断するために各ボタンクリック時のイベントには引数を渡すようにしました。

クリック時のイベント処理はこのようにしました。

    nextClick = (buttonName) =>{
        const {Tango} = this.state;
        
        this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
        if(buttonName === this.state.Japanese){
            document.getElementById("OKNG").src = OK;
        }else{
            document.getElementById("OKNG").src = NG;
        }
        document.getElementById("button1").disabled = true;
        document.getElementById("button2").disabled = true;
        document.getElementById("button3").disabled = true;

        setTimeout(() =>{
            document.getElementById("card").style.visibility = "hidden";
            this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
            setTimeout(() =>{
                this.SetNextWord(Tango);
                document.getElementById("card").style.visibility = "visible";
                document.getElementById("OKNG").src = Blank;
                document.getElementById("button1").disabled = false;
                document.getElementById("button2").disabled = false;
                document.getElementById("button3").disabled = false;
            },300)
        },1500)
    }

そこまで難しい処理は実施していないです😅
クリックした文言が正解しているか判定し、正解していれば〇、間違っていれば×画像を表示します。
1.5秒表示後、次の単語に切り替わります。

■最後に

単語勉強に使えそうな形にはなってきました!!
後で自分が好きなように単語を追加・削除できるようにしてみたいな、と考えております!!
完成したらまたブログに書いていきます!!


100記事突破!!

今年5月から始めたブログ投稿も前回の記事で100記事を超えました!!
100記事突破を記念して、今回は今まで投稿した内容を整理していきたいと思います!!
実はちょっと手を広げて書きすぎているため、どんな内容を今まで書いてきたか忘れております🤣
合わせて棚卸的なことも出来ればな!!と思っております👍
f:id:Elsammit:20201025124925p:plain


■カテゴリ整理

まずはブログ毎にどんなカテゴリを設定しているのか確認します!!
グラフにまとめるとこんな感じになりました!!
f:id:Elsammit:20201025115247p:plain

React、html、cssが多くフロントエンド系を結構記載しているようですね!!
一方、バックエンドについてはあまり記載出来ていないようです。。。
自分的には結構書いている気がしたのであれ??って感じでした。

後、pythonが多いですね。
こちらは機械学習系やOpenCVを用いた画像処理系を書いてきたためだと思います!!
RaspberryPiはデバイス制御に用いてきたためですね。

■記事投稿数について

5月~10月の投稿数の整理してみました!!
f:id:Elsammit:20201025123041p:plain

8月が多いですが、お盆休みなどの長期休暇があり時間があったためです!!
5月を除き、15記事を超えています。
2日に1記事を目安に上げてきたので、継続的に上げることが出来ているなと感じております。

■記載内容の振り返り

技術ブログなので、技術的なことが大半でした😂
ただ、とても基本的なことや環境設定が多い印象を受けました。。。
まだまだ初心者ㇾべルを脱していない結果ですね😨
今後はもっと技術的に深い部分を行っていきたいと思います!!🤔

ただ、今まで挑戦したことのない言語やライブラリを使うこともできたのでそこはよかったかな?と思いました!!

まとめると、
【良かった点】
今まで挑戦したことのない言語やライブラリを使うこともでき、勉強になった。
GithubソースコードやWebアプリを展開することができた。

【悪かった点】
環境設定レベルやライブラリの基本的な使い方しか書けていない。
学んだ環境やライブラリを組み合わせたものを作ることができていない。

■今後の目標

最近はこちらの通り言語の使い分けを行っておりました!!
 ・フロントエンド:React
 ・バックエンド:golang、nodejs
 ・機械学習、画像処理:python

今後もこちらの割り振りで勉強・ブログ投稿できればいいな!!と思ってます😆

反省を活かして、
 ①組み合わせて動作するシステムの構築を行う
 ②役に立つアプリやサービスの作成を行う
といったことを心掛けて行きたいと思います!!

ただ、、、
②って言うのは簡単ですが結構難しいですよね😅
まず、"役に立つ"ってなんやねんって思います。
本気でやろうと思ったら、世の中の動向チェックや求めているものの調査から、ですよね。。
こういった部分(動向チェック)も頑張っていきたいと思います!!

今回は振り返り + 今後の目標のみで終わりです!!
また明日以降、技術的なことや作成したサービスについての紹介を行っていきたいと思います👍

英単語帳アプリ作ってみました

ちょっと英語も勉強して行かなきゃなと思う今日この頃。

速読速聴・英単語 Core1900 ver.5 (速読速聴・英単語シリーズ)

新品価格
¥2,090から
(2020/10/24 22:02時点)

だけど、、、ただ勉強するのもな。。。と思ったので、、、
今回勉強も兼ねてReactで英単語アプリを作ってみました!!

■作成アプリ

作成したアプリはこんな感じになります!!
f:id:Elsammit:20201024212532g:plain


アプリはこちらで公開しております。
https://elsammit.github.io/wordbookApp/


ソースコードはこちら。
https://github.com/Elsammit/wordbookApp.git

■カードめくりアニメーション

今回、日本語と英語の切り替えにはアニメーションを用いました!!
アニメーションを一から作るのは大変だし辛いので、
”react-card-flip”ライブラリを用いました。

react-card-flipはこちらでインストール可能です。

npm install react-card-flip

もしくは

yarn add install react-card-flip 

実際の使い方ですが、

import ReactCardFlip from 'react-card-flip';
render() {
 return (<div>
 <ReactCardFlip isFlipped={this.state.isFlipped}  flipSpeedFrontToBack={1.0}
     flipSpeedBackToFront={1.0} flipDirection="vertical" infinite="true" width="300px">
  <div id="Front">
    //表ページの処理.  
  </div>
     <div id="Back">
    // 裏ページの処理.
     </div>         
 </ReactCardFlip>
   )
 }

といった形で用います。

 <ReactCardFlip isFlipped={this.state.isFlipped}  flipSpeedFrontToBack={1.0}
     flipSpeedBackToFront={1.0} flipDirection="vertical" infinite="true" width="300px">

にisFlippedが設定されていますが、こちらにセットした変数をtrue/falseと切り替えることで、
ページを表、裏と切り替えることが出来るようになります!!
また、flipDirectionの内容によって回転方向を決めることができます。
flipDirectionは"vertical"、"horizontal"どちらかでの設定になります。
さらにさらに、
flipSpeedFrontToBack、flipSpeedBackToFrontで回転速度を設定することが可能です!!
先ほどのコードだとどちらも1.0としているため、1秒での回転になります。

自分が作成したコードはこんな感じになっておりまして、

    handleClick(e) {
        e.preventDefault();
        this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
    }

・・・

 <ReactCardFlip isFlipped={this.state.isFlipped}  flipSpeedFrontToBack={1.0}
     flipSpeedBackToFront={1.0} flipDirection="vertical" infinite="true" width="300px">
     <div id="card">
         <img id="card" src={BlankCard} onClick={this.handleClick} className="cardSize" />
         <p>{this.state.English}</p>
     </div>
     <div id="card">
         <img id="card" src={BlankCard} onClick={this.handleClick} className="cardSize" />
         <p>{this.state.Japanese}</p>
     </div>         
 </ReactCardFlip>

画像上をクリックすることでisFlippedがtrue、falseと切り替わるため、
画像の表・裏を切り替わります。

ライブラリを用いることで、アニメーションが楽になりますね👍

■英単語について

今回の英単語のリストですが、こちらのサイトを利用させて頂きました!!
絶対に覚えたい!TOEIC頻出単語1,000語まとめ

単語を収集するにあたりスクレイピングを用いたのですが、こちらのコードは後程展開出来たらな!!と思います。

■最後に

ページめくりがライブラリとして用意されていて本当に良かったです😆
単語を切り替えるためにページめくりを使おうと決めていたのですが、正直、、、
「手間だな」
と思っておりました🤣

ライブラリを用いるとやりたいことが簡単にできるためとても便利ですね!!
展開頂いた方には感謝感謝です!!

自分もライブラリ展開できるぐらい能力身に付けたいな🤔

React Routerで作成したホームページをgithub pagesで表示

前回、React Routerで作成したホームページがgithub pagesで表示されない現象が発生しました😨
elsammit-beginnerblg.hatenablog.com

。。。が解決しました!!👍
今回はReact Routerを用いたホームぺージをgithub pagesで表示する方法のついてまとめます!!

React.js & Next.js超入門

新品価格
¥2,673から
(2020/10/22 22:45時点)


■発生現象

下記の通り、react-router-domを用いた場合、github pagesに限りホームページが表示されない(真っ白なページになったり404エラーになってしまう)、
現象が発生しました。
※yarn startとかだと普通に表示されるのですが、、、😢と困っておりました。

import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

■解決方法

どうやらBrowserRouterに
basename={process.env.PUBLIC_URL}
をオプションとして付けておく必要があるようです。

ただ、これだけでは解決せず😨
なんでだろう??泣

色々調べてみたところ、こちらのようにpackage.jsonのhomepageに
"http://[自分のGitHubのユーザー名].github.io/[公開したいアプリ、サイトのリポジトリ名"
を付与する必要がありました。

{
  "name": "introduction",
  "version": "0.1.0",
  "homepage": "https://elsammit.github.io/MyIntroduction", ← homepageに公開したいサイト名を記入
  "private": true,
・・・

先ほどのbasename={process.env.PUBLIC_URL}と合わせて追加してbuild実施した後、
github pagesを確認!!

問題なく表示されました!!
f:id:Elsammit:20201020224637g:plain

BrowserRouterを用いたホームページはgithub pagesにてこちらに公開しました!!👍
https://elsammit.github.io/MyIntroduction/

■最後に

思ったより苦戦しました。。。
react-router-dom github pages
で調べてみたところ結構ヒットしましたので
思った以上に他の人も躓いているのだな!!
と思いました。

これから時間を見つけて更新していきたいな、と思います!!

ポートフォリオ作成中!!

前回、作成してきたアプリを一つにまとめるホームページを作成しました!!
elsammit-beginnerblg.hatenablog.com


1冊ですべて身につくHTML & CSSとWebデザイン入門講座

新品価格
¥2,237から
(2020/10/20 23:07時点)


ちょっと1ページだと寂しいな😅と思ったので、ちょっとページ遷移とかも加えてみました。
結果はこんな感じになりました。
f:id:Elsammit:20201020224637g:plain

ちょっとは動き出たかな?
最終的にはポートフォリオのようにしていきたいな?と考えています!!

ちょっと困ってしまった部分があったので一応残しておきます!!

困ったところ、、それは、、、
背景画像の上に文字を置くことです!!😅
基本的な部分ですが、思ったより躓いた🤣

では、背景画像の上に文字やボタンを置くためにはposition: absolute; を使用します。
こちらのような背景画像の上に文字やボタンを載せる場合にはhtml、cssをこちらのようにすればOKです。
【html】

    render() {
        return (<div>
                <body className="MainBack">
                    <div className="Title">
                        <p>メインページだよ</p>
                    </div>
                        <div className="SelectButton">
                            <button className="SubButton">
                                <Link to='/MakeGame'>作成アプリ紹介ページへ</Link>
                            </button>
                            <button className="SubButton">
                                <Link to='/Profile'>プロフィール</Link>
                            </button>
                        </div>
                </body>
        </div>);
    }

css

.MainBack{
    background-image: url(./image/DSC_0491.JPG);
    background-repeat: no-repeat;
    background-size:cover;
    font-display: center;
    background-position: center top;
    text-align: center;

    height:1000px;
}

.Title{
    position: absolute; 
    top:-10%;
    left:20%;
    font-size: 150px;
    color: white;
}

.SelectButton{
    position: absolute; 
    top:35%;
    left:45%;
}

.SubButton{
    margin-left: 10px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #f9a9ae;
    width: 120px;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    background: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

後ボタンについてはこちらのサイトを用いました。
https://saruwakakun.com/html-css/reference/buttons


ホームぺージのソースコードgithubに上げてみました。
https://github.com/Elsammit/MyIntroduction

github pagesにも上げてみたのですが、、、うまくいかず😨
ページ遷移の部分が上手く働いていないのかな??
実は事前に前回の1ページの時には問題なく表示出来ていたので。。

う~~ん。。。一難去ってまた一難ww。
ちょっと調べてみたいと思います!!
分かったらまたブログにアップします!!👍

カラー画像のRGB分離と結合

今回はカラー画像をRGBに分離したり、分離した画像を結合させたりしてみたいと思います!!

■前回のおさらい

前回、画像に対するヒストグラムを作成しました。
elsammit-beginnerblg.hatenablog.com

その際、こちらのコードで一応RGBには分離しております。

b, g, r = img_bgr[:,:,0], img_bgr[:,:,1], img_bgr[:,:,2]

ただし、こちらの分離したデータをそのままimshowや画像として保存してみるとこちらのように、
それぞれグレースケールとなります。
【元画像】
f:id:Elsammit:20201018210406j:plain

【R成分】
f:id:Elsammit:20201018205427j:plain

【G成分】
f:id:Elsammit:20201018205517j:plain

【B成分】
f:id:Elsammit:20201018205539j:plain

これは、RGB成分の分離時にR、G、Bの濃淡のみの配列になってしまっているためです。
すなわち、
元データ:[[B成分],[G成分]、[R成分]]
から、
R成分:[R成分]
G成分:[G成分]
B成分:[B成分]
のように分離しているため、グレースケールとして表示されるわけです。

■カラー画像のRGB分離

正確にRGB画像として分離するためにはもうひと手間加える必要があります。
先ほどの通り、
R成分:[R成分]
G成分:[G成分]
B成分:[B成分]
のように分離してしまっているため、それぞれの成分に対して再度RGB成分を分離した形にする必要があります。

その方法はこちら!!

zeros = np.zeros((HEIGHT, WIDTH), img_bgr.dtype)
b_img = cv2.merge((b, zeros, zeros))
g_img = cv2.merge((zeros, g, zeros))
r_img = cv2.merge((zeros, zeros, r))

cv2.mergeを用いると画像データの色成分を合成させることができるようになります。
そして合成する色成分として、

zeros = np.zeros((HEIGHT, WIDTH), img_bgr.dtype)

で文字通り0の成分を生成しRGB成分として合成させます!!
これで、
R成分:[[zero],[zero],[R成分]]
G成分:[[zero],[G成分],[zero]]
B成分:[[B成分],[zero],[zero]]
となり、分離前のデータと次元が同一になります。

では、こちらの色合成を実行後の画像を確認してみます!!
結果はこちら!!

【元画像】
f:id:Elsammit:20201018210406j:plain

【R成分】
f:id:Elsammit:20201018205719j:plain

【G成分】
f:id:Elsammit:20201018205736j:plain

【B成分】
f:id:Elsammit:20201018205758j:plain

R、G、B画像として表示・保存させることができました!!

■カラー画像のRGB合成

cv2.mergeを用いれば、こちらの通り、分離させていたRGB成分を再度合成させることができます。

b, g, r = img_bgr[:,:,0], img_bgr[:,:,1], img_bgr[:,:,2]
rgb_img = cv2.merge((b_img,g_img,r_img))

実行するとこちらの通りになります。

【元画像】
f:id:Elsammit:20201018210406j:plain

【合成画像】
f:id:Elsammit:20201018205834j:plain

■最後に

今回、RGB画像分離と結合についてまとめてみました!!

これとnumpyで多次元を1次元に落とす手法を用いることで、画像データの転送に応用できそうですね!!
後で時間を見つけてやってみようかな?