- 0.0.1. 備忘 javascript Promise
- 0.0.2. HPFメモ_現在地の緯度経度を取得
- 0.0.3. HPFメモ_CodePen
- 0.0.4. HPFメモ_距離を計算する
- 0.0.5. HPFメモ_地図を操作する仕掛け.JS
- 0.0.6. 【GAS/JavaScript】replace関数のターゲットに変数を指定する方法(RegExp)
- 0.0.7. Docz (Powered by Gatsby) で静的サイト構築
- 0.0.8. phina.jsの環境を構築する
- 0.0.9. React+Material-UIでスマホのみにタブを表示させる
- 0.0.10. 保存失敗でエラーが出ない
- 0.0.11. Webブラウザだけでhtml5ゲームを作成して公開する
- 0.0.12. phina.js事始め【改】
- 0.0.13. Expressで画像データ取得時にarrayBufferがちゃんと帰ってこない
- 0.0.14. sequelizeの接続設定を`.env`で行う手順
- 0.0.15. 環境変数でsequelizeを設定する方法(config.use_env_variable)
- 0.0.16. FirebaseでWebアプリにGoogleログインを実装する
- 1. Firebase-test
- 2. ログイン後のページです
備忘 javascript Promise
# Promise
ちゃんとした説明はどうぞ他のサイトで。
ここでは基本的な挙動の確認をしています。##thenチェーンの挙動
Promiseは ” thenチェーン “ という機能を使います。
then( )は、 非同期関数 ” async function ” のメソッド ですので、まずはそちらの挙動を確認します。
「async function sample(){…}」のように関数宣言すると、その関数は非同期関数となります。async function の then
“`javascript:
async function sample(){}let a=1; // ①
sample().then(res=>{return a++}) // ② a=2
.then(res=>{return a++}) // ③ a=3
.then(res=>console.l
HPFメモ_現在地の緯度経度を取得
**Geolocation API** というやつで取得できる。
よく、WEBページで 現在地取得していいすか？ってでるやつのようだ。
http://www.htmq.com/geolocation/
↓へー
↓へーーー
getCurrentPosition() …… ユーザーの現在の位置情報を一回だけ取得する
watchPosition() …… ユーザーの位置情報を定期的に監視する
clearWatch() …… watchPosition()による位置情報の監視をクリアする//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);/***** ユーザーの現在の位置情報を取得 *****/
funct
HPFメモ_CodePen
CodePen便利！
https://codepen.io/
Topicsってどっから入るんだっけ？
https://codepen.io/topics/
HPFメモ_距離を計算する
JavaScript 距離でググったらでてきた
**GeoLib** これ
緯度・経度を２点入れると直線距離を算出してくれる。
JSDELIVRにもあるでよ
これは簡単につかえそう
HPFメモ_地図を操作する仕掛け.JS
HPFを作るにあたり、まずはWEBで地図を使う方法を探る
王道GoogleMap
2018年6月から料金体系が変わって、クレジット登録が必要、APIキー発行が必須などになったらしい。お試しに使うには面倒かも
https://uniel.jp/news/before_using_mapapi/**Leafletという 地図ライブラリ**が良いかも
https://qiita.com/mitch0807/items/7ed4eaf6253a9b879ae7LeafLetは、地図サービスの画像を操作するライブラリのようで、地図データはほかのサービスを利用するようなイメージのようだ
ここではMAPBoxというのをつかっているが、openstreetmapなどいろいろあるみたい。https://www.openstreetmap.org/#map=5/35.588/134.380
↓オープンライセンスらしいので、本格的に使って不満がでるまでは、これの使い方を極めたほうがいいかも。
#目次
[1.課題](#1-課題)
[2.うまくいった方法](#2-うまくいった方法)
[3.解決過程](#3-解決過程)
[4.おわりに](#4-おわりに)#1. 課題
以下を実行したかったのですが、2番に結構手こずってしまったので備忘録として書き残しておきます。**1. GASでreplace関数を使って、冒頭だけでなく条件に合致する全ての文字を置換したい**
**2. 変数をreplaceのターゲット（＝置換前の文字列）にしたい**
そもそもreplace関数について順を追って知りたいと言う方は、[3.解決過程](#3-解決過程)をご覧ください。#2. うまくいった方法
###RegExpオブジェクトを使う
例えば、以下のような文章があるとします。
`【input1】が濃いです。朝【input1】を剃ればよかったなと思います。でもまあ、【input1】があると落ち着きます`
ちょっと奇怪な文章ですが、【input1】部分にhigeと言う字を入れてあげたいとします。（すみ括弧自体も置換します。）以下のように、正規表現を使ってやることも出来ますが、とある事情で**ど
Docz (Powered by Gatsby) で静的サイト構築
[?10 Trending projects on GitHub for web developers – 21st May 2021 – DEV Community ????](https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-21st-may-2021-2c6h)
で紹介されていたDoczというもの。## Docz
> Doczは、あなたのコードのための美しいインタラクティブなドキュメントを簡単に書いて公開することができます。コードを紹介するMDXファイルを作成すると、Doczがそれをライブローディング可能な本番用サイトに変換します。
### 公式
https://www.docz.site/docs/getting-sta
phina.jsの環境を構築する
## phina.jsの開発環境を構築する
* このTips集では、Webブラウザ上でコーディング・実行が可能な[runstant](https://runstant.com)を使用してますので、基本的に開発環境として必要なものはWebブラウザだけです。
* 自分の好きなエディタを使ってローカルで開発することも可能ですが、クライアントサイドで実行されるjavascriptは、セキュリティ上の理由からローカルファイルへのアクセスが制限されています。
* 対応策としては、Visual Studio Codeなどのエディタの拡張機能にあるローカルサーバーを使う方法があります。## phina.jsを読み込む
**runstant**の **View(html)** タブのコードは以下のようになっています。“`js
React+Material-UIでスマホのみにタブを表示させる
#はじめに
PCとスマホの両方にレスポンシブで対応しないといけないが、スマホのみでタブメニューを表示させたい場合にご参考ください。
React(TypeScript), Material-UIで開発しています。#やりたいこと
1. PCではGridを使い縦3列にコンポーネントを配置したい
2. スマホでは、3つのコンポーネントのどれを表示するか選択できるタブを表示させたい
3. スマホでは、タブの選択で動的にコンポーネントを1つずつ表示させたい###PCでの表示
###スマホでの表示
*ロゴはphinajs.comから借用*## はじめに
これまで[phina.js](https://phinajs.com)に関するいくつかの記事を投稿していますが、**phina.js**自体について改めて簡単に紹介したいと思います。## phina.jsについて
趣味でプログラミングをしている私が日々楽しんで使っている**国産**の**javascript**ゲームライブラリです。以前から**javascript**でゲーム開発をしている方は知っているかもしれませんが、**tmlib.js** の後継ライブラリになります。とりあえずどのようなものか知りたい方には、以下の紹介記事が参考になるかと思います。* [本日 JavaScript ゲームライブラリ『phina.js』をリリースしました!](http://phiary.me/phinajs-release/) by [phi](https://twitt
Expressで画像データ取得時にarrayBufferがちゃんと帰ってこない
#初めに
題材がピンポイントですが、自分のように知らないで引っかかってしまう人向けの記事です。
画像データに限らず、バイナリデータを取得して送信したいのなら当てはまる話だと思います。##内容
axiosを使ってexpressにhttpリクエストした際に、axiosのresponseTypeにarrayBufferを指定して、expressでarrayBufferを返すようにしたのだけど、なぜかちゃんと帰ってこない！
と思ったら、express側ではbufferを返せばいいみたいです。以下に、一例としてコードの一部を載せておきます。
##フロント側
apiにリクエストを送ります
“`js:index.js
import axiosBase from “axios”;
import axiosConfig from “./axios.config.js”;
const axios = axiosBase.create(axiosConfig);axios
.get(‘/api’)
.then((response) => {
const blob =
sequelizeの接続設定を`.env`で行う手順
ソース
https://github.com/murasuke/dotenv-sequelize* 1行にまとめると「config.json」⇒「config.js」にして`require(‘dotenv’).config();`すれば、後は`process.env`の値を埋め込めます。
## 前書き
* sequelizeはcliを利用することで、設定ファイル(config.json)、Model、Migration、Seederのひな形を作ることができて便利ですが、DB接続設定がファイルに直書きされるため不便な場合があります。
* 設定ファイル(config.json)を書き換えて、`config.use_env_variable`を利用すれば環境変数使えますが、.envで書き換えることはできません(読み込む場所がない)
* そこで、config.jsonをconfig.jsに変更し、.envから設定を読み込んで実行ができるようにします。
もちろんmigration、seederも.envで設定します。## 詳細手順
### 準備
* sequeliz
環境変数でsequelizeを設定する方法(config.use_env_variable)
ソース
https://github.com/murasuke/sequelize-use-env-variable## 前書き
* sequelizeはcliを利用することで、設定ファイル(config.json)、Model、Migration、Seederのひな形を作ることができて便利ですが、DB接続設定がファイルに直書きされるため不便な場合があります。
* ひな形の’./models/index.js’には環境変数から読み込むコードがありますが、デッドコードになっています。これを利用して環境変数から接続設定を読み込むように書き換えます。
“`javascript
if (config.use_env_variable) {
sequelize = new Sequelize(process.env[config.use_env_variable], config);
}
“`* 環境変数から値を取得するようにconfig.jsonファイルを変更します。
プロパティー’use_env_variable’で、利用する環境変数名を指定します。
“`j
FirebaseでWebアプリにGoogleログインを実装する
# はじめに
FirebaseのAuthentication機能を利用し、WebアプリにGoogleログインを実装する機会があったので、その手順を記録しておきたいと思います。# 事前準備
事前準備として、ディレクトリ構成はこのようにしたいと思います。
>test
┗ public
┣ index.html
┣ home.html
┗ firebase.jsindex.html (ログインボタンがあるページ)
“`HTML:index.html
Firebase-test
“`
home.html (ログイン後のページ)
“`HTML:home.html
ログイン後のページです
“`
firebase.js (firebaseの設定を記述するページ)
“`JavaScript:firebas
javascriptの共通処理を作成（共通処理用のオブジェクトから各オブジェクトにmethodをコピーして利用する）
javascriptで共通処理を作成する際に少しクラスっぽく作成。
※「$(function () {})」はjqueryになります。## ■ html
sample.js → test.js の順に読み込む必要があります。“`index.html
“`## ■ sample.js
共通処理を記載します
“`sample.js
// Sampleオブジェクトを上書きしないように作成します。
Sample = function () { return typeof Sample === ‘undefined’ ? {} : Sample; };$(function () {
/**
* SampleにCommonとして設定する
*
* @constructor
*/
Sample.Common = function () {
const self = this;
self.setup(
[JavaScript] テンプレート文字列がうまく働かない？！（超初歩的）
初歩的な勘違いを紹介します。恥ずかしいですが、もしかしたら同じ落とし穴にはまる方がいるかもしれないので。
## 初歩的な間違い
JavaScriptのサンプルプログラムを見本にシンプルがプログラムを書いて実行したところ、“`
const name =’world’;
console.log(‘Hello ${name}!’);
“`### 実行結果
“`
Hello ${name}!
“`あれ？
サンプルプログラムをよくみると、クォーテーションマークが違う。バッククォートというやつだった。
## 正解
“`
const name =’world’;
console.log(`Hello ${name}!`);
“`
“`
Hello World!
“`
## 感想
– バッククォート「___`___」が、日本語キーボードのPの右隣にあることに初めて気が付きました。– バッククォート「___`___」ですが、実は引用符（クォーテーションマーク）ではなく、本来はアクセント記号（フランス語でいえば、アクサングラーブ）らしい。ウン十年前に受けたフランス語
【Javascript】カーソルの周りが光るSpotlightを作ってみた
# 初めに
暗い背景にスポットライトを当てたような効果をcssやjavascriptを使って実装したいと思い、学習した内容や参考サイトをもとに作ってみました。※内容に間違いなどがある場合はご指摘をよろしくお願いします。
# やりたいこと
カーソルの動きに沿ってスポットライトを当て、暗くて読みづらい文字列が読めるようにしたい。# 完成形のイメージ
実際に出来上がったコードと結果は以下の通りです。今回はhtml,css,javascriptの基本を押えることが⽬的です。
まずはhtml,cssを使ってwebブラウザ上でTodoListを作成します。
Chromeでキレイに表⽰できることを⽬標にしてください。CSSの記述でベンダープレフィックスというものがありますが、今回は意識しなくて⼤丈夫です。
全てコピペしても完成しないので、課題を自分で調べて完成させましょう。
※デザインや⾊、各項⽬の名称は変更可。好きなデザインにしてください。##完成イメージ
##ディレクトリ構成
最終的なディレクトリ構成です。
適当なフォルダ名（todolistでいいです）
┬ index.html
├ style.css
└ app.js###1.HTML
まずはhtmlのみでタイトル、⼊⼒部分、表（Table）、ボタンの表⽰を学
