javascriptでページを一部だけ更新する方法
突然、htmlで表示したページの一部だけ定期的に更新する方法が気になりましたww。
確かにReact使ってしまえばこんなこと簡単に出来てしまうが、そういうの使わずに実装できないかな？と思い立ちました！！
さて、、、どうしたものか。。。
と思い、調べてみたところあっさり発見！！
www.sejuku.net
で、記事を見ながら実際に動かしてみましたので備忘録として残しておこうと思います。
こちらの記事を利用して、
今回はサーバサイドから得られる結果を元に表示する画像を切り替えていきたいと思います！！
■サーバサイド実装
まずサーバサイドですが、node.jsでこちらのように作成しました。
const express = require('express');
const app = express();
app.use(express.static('./html'));
app.use(express.static('./js'));
app.use(express.static('./img'));
app.get('/aaa',(req,res)=>{
var rand = Math.floor( Math.random() * 3 ) ;
res.send(String(rand));
});
app.listen(3000,()=>
console.log('Listening on port 3000')
);getリクエストを受けた際に1～3の中から1つをランダムでレスポンスする制御にしました。
■html実装
index.htmlはこちらのように作成。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ランダム画像表示</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div>
<h1>ランダムに画像を切り替えていくよ</h1>
<img id="testA" width="200" height="200" src="hamstar.png" />
</div>
</body>
</html>id=testAのimgタグの画像を切り替えていきます。
■javascript実装
最後に今回重要となるjavascriptです！！
大きく分けて3つの機能で構成されます。
・定期的に特定処理を繰り返す
・サーバサイドにgetリクエストを発行
・レスポンス結果を元に画像を切り替え
まずは定期的に特定処理を繰り返すです。
ソースはこちら。
window.addEventListener('load', function () {
setInterval(function () {
Do_repetition();
}, 500);ページ表示時に定期的に特定の処理を行うsetIntervalが呼び出されます。
そして、特定の処理としてDo_repetition関数をコールします。
この定期処理は500msで実行されます。
次に、サーバサイドにgetリクエストを発行。
こちらはajaxを用いました。
ソースはこちら。
function Do_repetition() {
// urlを加工し、キャッシュされないurlにする。
url = "http://IPアドレス:3000/aaa"
// ajaxオブジェクト生成
var ajax = new XMLHttpRequest;
// ajax通信open
ajax.open('GET', url, true);
// ajax返信時の処理
ajax.onload = function (data) {
var repos = data.currentTarget.response;
// ここにgetレスポンス受け取り時の処理を記載.
};
// ajax開始
ajax.send(null);
}
最後に、レスポンス結果を元に画像を切り替え。
処理はこちら。
var repos = data.currentTarget.response;
var div = document.getElementById('testA');
if(repos == "0"){
div.src = "makewani.png";
}else if(repos == "1"){
div.src="hamstar.png";
}else{
div.src="mogura.png";
}imgタグのidを用いて、画像のセットを行います。
■実装結果
実装したWebアプリを動作させた結果はこちらのようになります。
■最後に
調べて実際に動かしてみて気づいたのですが、、、
今まで学んだことの組み合わせで実現できる内容でした！！！！！
全然応用が利かない自分の知識。。。泣
まだまだWeb慣れていない証拠な気もするので、これからも調べながら色々動かしていきたいと思います！！
■参考
ソースコード全体はこちらに格納しました。
GitHub - Elsammit/PartOfPages
Go言語 導入 (Ubuntuへの環境構築編)
最近フロントエンドを主に進めていたので、そろそろサーバサイドもやっていきたいなと思う今日この頃。
今までnodejsやdjango(python)とか使って見たけど、”別の言語学んでみたいな”と思い調べてみたところ、
最近はGo言語が徐々に伸びているとのこと。
ちょっと使って見ようかな？と思い、まずは環境構築を行うことにしました。
と思ったら、環境構築からエラー続きで躓いてしまったので今後困らないように備忘録残しておこうと思います。
■環境構築
今回用いた環境はこちらになります。
・ホストOS：WIndows10 ・VM：VirtualBox 6.1.4 ・ゲストOS：Ubuntu16.04
まずGoをインストールします。
sudo apt install golang
そして、動作確認のためのHello Worldを表示するこちらのソースを作成。
package main
import "fmt"
func main(){
fmt.Printf("Hello World \n");
}こちらのコマンドで実行！！
go run ファイル名.go
問題なく"Hello World"が表示されました。
■Go言語のWebアプリケーションフレームワークインストール
次にWebアプリケーションフレームワークであるGinをインストールします。
go get github.com/gin-gonic/gin
って、あれ？？ 上手くいかない。。。
どうやらパスを通さなければならないらしいので、
こちらをbash_profileに書き込み。
export GOPATH=$HOME/go export GOBIN=$GOPATH/bin export PATH=$PATH:$GOBIN
再起動を行って、もう一度Ginをインストール！！
。。。ダメやった泣
なぜや泣
こんなエラーが発生する。。。
Get compile error undefined: http.SameSite
色々調べてみると、どうやらバージョンが1.11以上でないとhttp.SameSiteが使えない模様。
早速こちらのコマンドでバージョンを確認したところ、1.6だった。。。
だから動かいないんじゃん！！
go version
ということで、go言語のバージョンアップを行うことにしました。
■go言語バージョンアップ
どうやってやるのだろう。。。apt-getを用いてダウンロードすると1.6になってしまうし。
調べてみるとこちらも手順があったので忘れないように残しておきます！！
まずバージョンを指定してインストールを実施。
sudo apt install golang-1.11
次にシンボリックリンクを再設定。
※こちらを実施しないとバージョン1.6のままになってしまうので注意
cd /usr/bin sudo mv go go_back ←バックアップとして残しておく sudo mv gofmt gofmt_back ←バックアップとして残しておく sudo ln -s /usr/lib/go-1.11/bin/go /usr/bin/go sudo ln -s /usr/lib/go-1.11/bin/gofmt /usr/bin/gofmt
最後にバージョンを確認。
$ go version go version go1.11.5 linux/amd64
そして、GInを再度インストールすると、、、OK！！できました！！
■サーバサイド実装
早速GInフレームワークを用いて動作確認！！
一旦、サンプルを展開してくれている方のソースをそのまま利用。
package main
import "github.com/gin-gonic/gin"
func main() {
r := gin.Default()
r.GET("/ping", func(c *gin.Context) {
c.JSON(200, gin.H{
"message": "pong",
})
})
r.Run() // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080")
}こちらを保存して、
go run ファイル名.go
を実行！！
Webブラウザでアクセスしたところ、問題なく表示されることを確認。
ふぅ~~なんとかできたw
NoCode bubble使って見た
今回、最近噂のNoCodeを使って見ることにしました！！
TwitterにてWebアプリならbubbleがいいよ！！と教えて頂いたので早速触ってみました。
- ■NoCodeって何？
- ■NoCodeのメリット
- ■NoCodeのデメリット
- ■bubbleへの登録
- ■bubbleでフロントエンド開発
- ■bubbleでバックエンド開発
- ■bubbleでDB開発
- ■bubbleを使って見ての感想
- ■最後に
- ■参考
■NoCodeって何？
そもそもNoCodeとは？ですが、簡潔に言うと文字通り「コーディングなし」でアプリやWebサービスが開発・作成できる手段やツールを指します。
今まで、アプリやWebサービスを開発する場合、コーディングやそれらに対するテストに多くの工数やコストが発生しておりました。
NoCodeでは、マウス操作などのGUI操作のみで開発可能なので短工数ですぐにシステム構築が可能になります。
■NoCodeのメリット
やはり、簡単な操作ですぐに開発出来てしまうことです。
コーディング不要なため誰でもWebサービスやアプリを作成できるので、アイデアさえあればすぐに構築、デプロイできるのはメリットになるかと思います。
■NoCodeのデメリット
プラットフォーム頼りになってしまう部分が大きいため、選択したプラットフォームによってできることが制限されてしまう部分かと思います。
ただし、使って見た感想は基本的な部分は全て網羅されており、よっぽど複雑なことやマニアックなことをしなければ問題ないかな？と思いました。
さらにプラットフォームが終了してしまった場合、ほぼ強制的に開発したサービスも終了になってしまいます。
中にはオープンソースなどで公開することが保証されているプラットフォームもあるかと思いますが、それで復旧できるのか不安が残りますし、
どこの誰か知らない人が書いたコードなので分かりにくい部分や理解できない部分が出てくる可能性があり復旧が難しい場合もあるかと思います。
プラットフォーム使用料が変化(引き上げ)時のコストが気になりますね。
■bubbleへの登録
こちらにアクセスするとbubbleのトップページが表示されます。
bubble.io
本トップページに"Get started for free"ボタンがあります。
押下すると、アカウント登録画に遷移するため登録を行いアカウントでログインします。
アカウント登録が完了するとチュートリアルが開始しますので実施します。
※12項目ありました。
■bubbleでフロントエンド開発
入フォームやボタンの生成、リストなどを左にあるVisual elementsからドラッグ & ドロップすることで簡単に配置させることができます。
※個人的には本当に簡単かつすぐに作ることができたので感動！！
■bubbleでバックエンド開発
Workflowを選択するとボタンクリック時の動作を定義することができます。
例えば、ボタンを押下したら前もって入力した内容を登録する、とかです。
自分は試していないですが、プラグインを用いれば外部サーバとhttpリクエスト/リスポンスができるようになるようですので、
別サーバでバックエンドを構築して、、みたいなこともできそうです。
Adding API Connections - Bubble Manual
■bubbleでDB開発
Dataを選択するとデータベースのテーブル生成やフィールドの作成が行えます。
データベース上に画像の保存も行えるのですが、
URL確認したところ、AWSのS3に保存されているようでした。
bubbleはバックエンドでAWSと連携していそうです。
■bubbleを使って見ての感想
思った以上に使えるな！！と感じました。
使用前は、
「フロントエンドぐらいしか作れないからバックエンドやデータベースは自分で作るしかないんだろうな。まぁ、フロントエンドだけでも簡単になればいいかな？」
ぐらいに思っておりました。
予想以上に出来ることにびっくり！！
基本的なWebサービスならbubbleだけでも問題ないな。と感じました。
自分でコーディングするよりも断然簡単だし。
足りない部分は別サーバで管理してもいいでしょうし。
料金表はこちらなのですが、使用前は「高い」と感じましたが、
使える幅を考えると「適正価格」と思えるレベルでした。
■最後に
NoCodeいいですね！！
特に作りたいものをすぐに作って試せるのが良いです！！
確かに最近話題となるツールだな。と思いました。
React for文に対する非同期処理
最近忙しいことを理由にブログ更新ができていませんでした。。。
前回まで実施していたポケモンチャート表示。完成しました！！
完成したWebアプリはこちらになります。
https://elsammit.github.io/PokeChart/.
このポケモンチャートですが、ちょっと冗長だった部分があったので修正してみました。
そこで、for文を使って各パラメータを設定してみたのですが、実行時に実行順序がおかしくなってしまいました泣。
理由はいつも躓く非同期処理！！
で、いつものようにpromise / thenを用いたのですがうまくいかず。。。
ちょっと調べたりして時間がかかった部分だったのでまとめておこうと思います！！
■for文の非同期処理
for文で非同期処理を行うには、async /awaitを用いるとよさげ。
ただ今回はアロー関数用いているんだよな。。。と困り果てていたところ、こちらの記事を発見！！
JavaScriptでループの中で非同期処理を書く - Qiita
こちらの記事を用いてこちらのように、for文内で実行する処理をasync / awaitを行ったところ、
上手く同期処理行うことができました👍
SettingParam = () =>{
return new Promise((resolve, reject) =>{
var Param = ["HP", "Atk", "Def", "SP", "B", "C"];
// 即時関数を用いてasyncで定義してawaitで非同期処理を実行.
(async () => {
for(var i=0;i<Param.length;i++){
await this.CalcParam(Param[i], i); ←ここに実行したい関数を 「await 関数名」の形で入れる.
}
})().catch(error => console.error(error));
resolve();
})
}■最後に
お盆中に終わらせようと思っていた作業が気づけば1週間遅れ。。。
忙しいことを理由にしてやらないのはよくないですね。反省です。
以降は最近流行り？のノーコードに触れてみようかな？と思っています。
ポケモンレーダーチャート(react版)ソースコードはこちらに格納しました。
https://github.com/Elsammit/PokeChart.git
■参考
JavaScriptでループの中で非同期処理を書く - Qiita
JavaScriptの非同期処理をアロー関数を使わない方法で考える - Qiita
Visual Studio Code 日本語化対応
今回は今までの流れと少し変えてVisual Studio Codeの日本語化対応手順についてまとめておきたいと思います！！
最近までsakuraエディタを用いていたのですが、知り合いがVisual Studio Code使っているのを見て、
「使いやすそう」
と思い、切り替えるに至りました！！
ただこのVisual Studio Code、デフォルトは英語なんですよね。。。
と思っていたのですが、最近日本語に変換できる方法を知りました！！ ← 遅いw
ということで、
今回はVisual Studio Codeを日本語化する手順について、まとめていきたいと思います。
まずVisual Studio Codeを立ち上げます。
そして、タブのViewを選択するとこちらの図のような画面がドロップダウンで表示されます。
Command Paletteを選択するとこちらの画面に切り替わります。
表示されたボックスにConfigure Display Languageを入力し押下すると、
en と新規追加が選択できるようになるので、新規追加を選択します。
すると、こちらのようにVisual Studio Code画面の左端に言語リストが表示されます。
この言語リストから日本語を見つけてinstallを押下すれば日本語になるかと思います。
【補足】
Visual Studio Codeには様々な拡張機能が用意されております。
これらの拡張機能をインストールするには、、、
まずVisual Studio Codeの左端にブロックマークがあるかと思いますのでそちらを選択。
するとこちらの画面のようにテキストボックスが表示されるので、追加したい拡張機能の名前を入力します。
入力した拡張機能に該当する一覧が表示されるので、その中で必要な機能のInstallボタンを押下する。
以上になります。
最後に、、、
Visual Studio Codeには拡張機能があったり補完機能があったりと便利そうなのでメインで使っていきたいと思っております。
上級者になると、予測変換やショートカットキーを駆使して素早くコード書いているよう。
自分もVisual Studio Code使い倒していきたいと思います！！
プライバシーポリシー
■個人情報の管理
当サイトは、お問い合わせいただいた内容についての確認・相談、情報提供のためのメール送信（返信）の目的以外には使用しません。また知り得た個人情報を第三者に開示することは、警察・裁判所など公的機関からの書面をもった請求以外に一切利用いたしません。
■当サイトに掲載されている広告について
当サイトでは、第三者配信の広告サービス（Googleアドセンス、A8.net、Amazonアソシエイト、バリューコマース、iTunes アフィリエイトプログラム）を利用しています。
このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 『Cookie』(氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。
またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。
■Cookieの利用について
Cookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。Cookieには、サイト利用者の個人情報（氏名、住所、メールアドレス、電話番号）は一切含まれません。
当サイトは、第三者配信事業者（Google AdSense、Amazonアソシエイト、楽天アフィリエイト、A8.net、バリューコマース、もしもアフィリエイト）がCookie を使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。
Google が広告 Cookie を使用することにより、サイト利用者が当サイトや他のサイトにアクセスした際の情報に基づいて、Google やそのパートナーは適切な広告をサイト利用者に対して表示します。
広告設定でパーソナライズ広告を無効にすることができます。無効にする方法についてはこちらを参照してください。
■当サイトが使用しているアクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。
このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。
この規約に関して、詳しくはこちら、またはこちらをクリックしてください。
■当サイトへのコメントについて
当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。
また、メールアドレスとURLの入力に関しては、任意となっております。
全てのコメントは管理人であるElsammitが事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。
加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。
■免責事項
当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。
当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
当サイトで掲載している画像や動画の著作権・肖像権等は各権利所有者に帰属致します。
■運営者
Elsammit
■お問い合わせ
docs.google.com
React レーダーチャート表示
引き続きポケモンレーダーチャートをReactに移行中！！
elsammit-beginnerblg.hatenablog.com
前回、内部で持っているcsvファイルを読み出せないと書きましたが、、、
解決しました！！
って言っても、フォルダのパスが違っていた。。。orz
それで数時間つぶしてしまったのか。。。泣
これから注意します！！
で、今回はメインどころのレーダーチャートを表示する部分の移行になり実施しました！！
こちらはReact用にライブラリが用意されていたので、そちらの使い方について報告していこうと思います！！
■Reactでレーダーチャートを表示させるためには？
Reactでレーダーチャートや折れ線グラフ、棒グラフなどのグラフを描画するには、
”Recharts”を用いるとよいことがわかりました！！
公式HPはこちらになります。
サンプルコードもあったため、躓かずに進めることができました。
http://recharts.org/en-US
■Rechartsを用いたレーダーチャート実装
まず、Rechartsライブラリをインストールします。
インストールコマンドはこちらになります。
npm install recharts
そして、実装はこんな感じでOKです。
import React, { Component } from 'react';
import {
RadarChart, Tooltip, PolarGrid, PolarAngleAxis, Radar
} from 'recharts';
export default class Cooking extends React.Component {
Radar = () =>{
const dataRadar = [
{ rank: 'HP', poke1: 100, poke2: 200 },
{ rank: '攻撃', poke1: 300, poke2: 100 },
{ rank: '防御', poke1: 150, poke2: 100 },
{ rank: '素早さ', poke1: 300, poke2: 100 },
{ rank: '特防', poke1: 200, poke2: 200 },
{ rank: '特攻', poke1: 100, poke2: 100 },
];
return(<RadarChart // レーダーチャートのサイズや位置、データを指定
height={400} width={500} cx="50%" cy="50%" data={dataRadar} //ここにArray型のデータを指定
>
<PolarGrid />
<PolarAngleAxis
dataKey="rank" //数値を表示したい値のキーを指定
/>
<Radar //レーダーの色や各パラメーターのタイトルを指定
name="pokemon1" //hoverした時に表示される名前を指定
dataKey="poke1" //Array型のデータのパラメータータイトルを指定
stroke="#8884d8" //レーダーの線の色を指定
fill="#8884d8" //レーダーの中身の色を指定
fillOpacity={0.6} //レーダーの中身の色の薄さを指定
/>
<Radar //レーダーの色や各パラメーターのタイトルを指定
name="Mike" //hoverした時に表示される名前を指定
dataKey="poke2" //Array型のデータのパラメータータイトルを指定
stroke="#8884d8" //レーダーの線の色を指定
fill="#A5A5A5A5" //レーダーの中身の色を指定
fillOpacity={0.6} //レーダーの中身の色の薄さを指定
/>
<Tooltip /> //hoverすると各パラメーターの値が表示される
</RadarChart>
);
}
render() {
return (<div>
{this.Radar()}
</div>);
}
}処理内容としてはソースコードに記載した通りですが、
rechartsをimportして、
実行した結果はこんな感じになります。
