- 1. Brightcove LIVE APIからデータ取得する方法(Lambda@Edge)
- 2. 1つのjsファイルで効果音を鳴らす
- 3. Vuetifyを使ってコンポーネントにTwitterのタイムライン埋め込んでみた。
- 4. npm install実行時、 ERR! cb() never called!エラー対処
- 5. マウスをのせた時にツールチップを表示する～jQuery無し～
- 6. ゲームエンジンにVueを合体させたらゲーム開発が捗った
- 7. 【Javascript】for of ー 学習ノート
- 8. 【備忘録】React：ルーティングの基礎（React-router）
- 9. MakeCode for M5Core2 を作った
- 10. Dogelog Q&A: Can I run it on an iPad?
- 11. 文末に丸括弧をつけるネットスラングをJavaScriptで使ってみる()
- 12. JavaScriptで書けるアプリケーションは、最終的にJavaScriptで書かれることになる。
- 13. Xserver標準のメールフォームはUI・UXにこだわるなら使わないほうがいい
- 14. iPhoneの高効率フォーマット（HEIC）だとExifが読み取れない
- 15. chart.jsでドーナツ円グラフを作ったのでメモ
- 16. Javascript 変数②
- 17. JavascriptだけでWebサイトにreCAPTCHAを実装してみた話
- 18. 【備忘録】React : CSSの基本的なあて方いろいろ（初心者向け）
- 19. 宗教上の理由でLaravel 8.xのドキュメント以外読めません
- 20. github上のnpm packageをインストールする時の作業メモ
Brightcove LIVE APIからデータ取得する方法(Lambda@Edge)
# サーバーサイドの実装(Lambda@Edge – node.js)
※注意: GETとPUT(パラメータなし)のみ動作確認しています。
POSTやDELETEはパラメータの書き方が違うはずなので、別途実装する必要があります“`javascript:index.js
/**
* フロントから直接ブライトコーブAPIに問い合わせると、
* CORSポリシー違反でデータ取得ができないため実装した
*
* 2021.05時点ではGETとPUTのみ動作確認済
*
* フロントからAJAX経由で送られてくるHTTPメソッドとURLを用いて
* それに応じたブライトコーブAPIのレスポンス(JSON)を返す
* 例えば、AJAXで次のURLにGETリクエストが届いたら、Lambda@Edge(このindex.js)が発火
*
* https://www.example.com/bc-proxy/redundantgroups/xxxxxxxxxxxxxxxx
*
* bc-proxy以下のURLを切り取ってLambda@Edgeに渡し、ブライトコーブAPIに
1つのjsファイルで効果音を鳴らす
音データをdata uriとしてjsファイル内に保持します。また、高速でタイプ音を漏れなくならせるように、8個のaudioオブジェクトを用意して、順番に呼び出しながら音を鳴らします。
# ソースコード例です。
“`javascript:sound.js
const sound = {
audio:[],
index:0,
init:()=>{
for(let i=0;i<8;i++){ sound.audio.push(new Audio(sound.data_uri)); } }, play:()=>{
sound.audio[sound.index%sound.audio.length].play();
sound.index += 1;
},
data_uri:”data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4LjIwLjEwMAAAAAAAAAAAAAAA//uwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAA
Vuetifyを使ってコンポーネントにTwitterのタイムライン埋め込んでみた。
Vuetifyを学ぶ機会があったので、勉強がてら複数のTwitterのタイムラインを同時閲覧できるアプリを作ってみました。
#そもそもVuetifyとは
Vuetifyとは、Vue.jsで使用できるマテリアルデザインのUIフレームワークです。
レイアウトを構築するグリッドシステムから、ボタンなどの細かいパーツまで幅広くUIを提供しています。
マテリアルデザインに準拠したアニメーションも完備されているのもありがたい（と言いつつも今回は使わなかった）。#Vuetify環境構築
こちらを参考にしてVue.jsを導入し、プロジェクトを作成します。
https://qiita.com/e-onm/items/4e9e953f1e85d02c01c7プロジェクト作成の完了後、そのプロジェクトに入り、以下のコマンドをターミナルで実行しVuetifyを導入します。
“`
$ vue add vuetify
“`サーバーを起動します。
“`
$ npm run server
“`するとブラウザで起動画面が表示されています。
Vue.jsとはちょっと雰囲気違いますね。
npm install実行時、 ERR! cb() never called!エラー対処
#はじめに
`npm install`時に、以下のエラー文が出たため、エラーとその解決方法を簡潔にまとめました。“`
npm ERR! cb() never called!npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-05-27T13_35_20_732Z-debug.log“`
#原因
`cb() never called!`を調べてみると、キャッシュの不具合によるものです。
#対処
キャッシュを以下のコマンドで削除すると、インストールできます。
###方法①
“`
$ npm cache verify
$ npm install
“``npm cache verify`コマンドは、キャッシュを確認し、不要なデータ
マウスをのせた時にツールチップを表示する～jQuery無し～
#マウスをのせた時にツールチップを表示する～jQuery無し～
指定の要素にマウスをのせた時に、ツールチップを表示するJavaScriptを作成しました。
動作のイメージは、次の図のような感じです。「こちらが２個目です」の文字に
マウスを乗せると、赤い背景の「2個目です。」が表示されます。
※「2個目」と「です」で改行されています。
“`javascript:title
const att_elem_id = ‘msg_elem_id’;
const att_msg = ‘msg’;
class tooltips {
constructor(elm, msg) {
elm.onmouseover = function () { showPopup(this, event); }
elm.o
ゲームエンジンにVueを合体させたらゲーム開発が捗った
# TL; DR
– Phaser3というJaveScriptのゲーム開発フレームワークがいい感じ
– でも描画に関する全てをプログラミングベースで書くのは辛いよ…
– Vueでラッピングしたら便利に書けるようになったよ# 成果物
まずは出来上がったライブラリと、それを使って作ったゲームの紹介です。
## ラッパーライブラリ『Phavuer』
ロゴはテンション上げるために作りました。
https://github.com/laineus/phavuer
## 夢探索アドベンチャー『リブラの見た夢』
https://libra.laineus.com
[0]:https://codesandbox.io/ちなみにルーティングとは、簡単に言えば画面間の遷移の際に、urlのリンクに一致するように紐づいた画面を表示するような仕組みのことです。
## インストール
Dependencyとしてreact-router-domをインストールしておきます。
インストールをしたら`package.json`ファイルを見てちゃんと記述されているか確認します。“`json
“main”: “src/index.js”,
“dependencies”: {
“react”: “17.0.2”,
“react-dom”: “17.0.2”,
“react-router-dom”: “5.2.0”,
“react
MakeCode for M5Core2 を作った
前回、M5Atom上で、MakeCode for micro:bit で作ったプログラムを動かしました。
[MakeCode for micro:bitで作ったプロジェクトをM5Atomで動かす](https://qiita.com/poruruba/items/8feed48b7dccb218f29b)今度は、M5Core2上で動かしてみます。
具体的には、M5Core2のディスプレイ上に、Scratch3.0のネコを表示させ、M5Core2のタッチボタンのAとCボタンで左右に動かしたり、Bボタンでネコを回転させたりします。
それらの実装を、MakeCode for micro:bitでビジュアルプログラミングします。細かいことは、ソースコードを見ていただくとして、ぜひ使ってみてください。
もろもろのソースコードを以下に置いています。poruruba/M5Core2_MakeCode
https://github.com/poruruba/M5Core2_MakeCode
poruruba/M5Core2_CustomBlock
https://github.com/
Dogelog Q&A: Can I run it on an iPad?
To help understand Dogelog, we made a little Q&A. Here are the results:
**What is a Cross Compiler?**
_Q: What does it mean that Dogelog was produced by a cross compiler?_
A: Dogelog is not enteirely written in JavaScript, a great part was written in Prolog and then cross compiled into JavaScript._Q: Can Dogelog be run without Android?_
A: Yes, since the result after cross compilation was entirely JavaScript, you can run it everywhere where you find JavaScript, no Android required._Q: Can
文末に丸括弧をつけるネットスラングをJavaScriptで使ってみる()
Twitter等のSNSで`〜〜じゃん()`という、**文末に丸括弧をつける**ネットスラングを度々？見かけるのでJavaScriptで再現してみました。
## 文末に丸括弧？
[ニコニコ大百科:括弧](https://dic.nicovideo.jp/t/a/括弧)より
> （） – 「（笑）を略した表現。ネットスラングのひとつ。」## コード
JavaScriptでは**変数名に日本語が使える**のを利用しています。“`javascript
const それってあなたの関数ですよね = () => {};それってあなたの関数ですよね();
“`
JavaScriptで書けるアプリケーションは、最終的にJavaScriptで書かれることになる。
JavaScriptのメリットは何でも作れることであり、デメリットはあなた本当にそうする。
Xserver標準のメールフォームはUI・UXにこだわるなら使わないほうがいい
##はじめに
レンタルサーバは[Xserver](https://www.xserver.ne.jp)を利用している方は多いと思います。標準機能として提供されているメールフォームがあるのですが、そのカスタマイズ案件で遭遇したトラブルの備忘録です。>HTMLテンプレートやスタイルシートを直接編集し、自由自在にデザインを変更することが出来ます。
こだわったデザインにしたい方などにおすすめです。
[公式マニュアルより](https://www.xserver.ne.jp/manual/man_install_cgi_mailform.php)この一文を見る限り、ＣＳＳでの見た目のデザインはもとより、入力項目のレイアウトや表示の順番なども、テンプレートを自作し、適用することで自由にカスタマイズできるように思えます。しかしながら、少なくとも自由自在ではありませんし、**こだわった（特にＵＩ・ＵＸ）デザインにしたい方**には**おすすめできません**。
##問題点
###テーブル構造での構築が前提
いわゆるテンプレートエンジンなので、サーバー側でテンプレート中のマーカーである`{$for
iPhoneの高効率フォーマット（HEIC）だとExifが読み取れない
## ざっくり結論
iOS の input[type=file] の仕様によりHeicファイルはExifが破棄される
jpegフォーマットの場合大丈夫な場合もある
そもそもiPhoneでheicファイルをブラウザ上からアップロードできない？## 調査
（結構読まれたらスクショとかでわかりやすく更新します… :bow:)
### 前提 .heicファイル自体には Exifは存在する
iPhoneから直接heicファイルをとってきて、プレビューしてみてください。inspectするとちゃんとExifがいます。
xxdしてもそれっぽい文字列発見できました。### なにがしたかったん？
ブラウザから画像アップロードするときにクライアント側でリサイズしなくてはいけなかったところ、Exif消えてほしくないという要望があった。
[blueimp-load-image](https://www.npmjs.com/package/blueimp-load-image)の機能でExifを取得し、リサイズしたBlobに再度Exif部分のバイナリをつけるという手法をとった。やってみたところ以
chart.jsでドーナツ円グラフを作ったのでメモ
#背景
業務でドーナツ型の円グラフを表示する必要があり、JavaScriptプラグインを調べたところ、chart.jsが良さそうだったので、その時作ったサンプルのメモとしてこの記事を残しておきます。
##やりたいこと
* ドーナツ型の円グラフを表示する
* ドーナツの空洞の大きさを調整する
* 蹄鉄型にする完成系
ソースはこちら(CodePen)##空洞の大きさを調整
options.cutoutの値を設定して調整しました。
ドーナツ型の円グラフでは初期値が50になっています。初期値のままのとき
; //山田二郎
“`
上の例では name という変数に山田二郎という文字列を格納した後、nameを出力しています。“`javascript
let name = “山田” + “二郎”;
console.log(name); //山田二郎
“`
先程とは少し違い、変数の中で文字列の結合をしています。“`javascript
let x = “山田”;
let y = “二郎”;
let z = x + y;
console.log(z); //山田二郎
“`
上の例では、変数ｘには文字列 “山田” を、変数yには文字列 “二郎” を、変数zには変数xとyを結合する。というように定義しています。
このように変数の中で変数同士を結合する、ということもできますので、代入された値同士を結合し、何かに出力
JavascriptだけでWebサイトにreCAPTCHAを実装してみた話
###[注意]この記事ではJavascriptでreCAPTCHAの認証を行なっています。
###この方法は少しでも知識がある人ならばreCAPTCHAを行わずにformを送信できてしまいます。
###phpなどのサーバーサイド言語が使用できないレンタルサーバーを使用しているなどの特別な事情がない限りはこの記事に従わず、サーバー上でreCAPTCHAの認証を行うようにしてください。##どういう経緯でこれをやろうと思ったか
私が初めてコードでプログラミングしたのはjavascriptだったんです。
なぜならiPadのSafariだけで開発とテストができるから。
アプリを入れなくていいっていうのは結構魅力的だったんです。
色々無料のレンタルサーバーを調べて、FC2の無料レンタルサーバーを借りることにしました。
なんでそこにしたのかと言うと…
・Web上で全て完結させられること。
・無料だったこと。
・なんか目についたから。
当時はレンタルサーバーなんてどこがいいか知らなかったしサーバーサイド言語とクライアントサイド言語の違いすら知らなかったんです。
そこで適当に見栄えのクソ悪い適当にボ
【備忘録】React : CSSの基本的なあて方いろいろ（初心者向け）
## はじめに
現在、UdemyでReactのコースを学習しています。
そこで学んだReactでのCSSのあて方について、今回書いていきます。前回と同様、今回も備忘録的になるので参考になるかどうかは分かりませんが、気になった方はよければ読んでみてください。
## CSSのあて方
ここからはCSSのスタイリングの名称を関数名とし、親コンポーネントであるApp.jsに子コンポーネントとしてexportしている想定でいきます。（そのためそれぞれのコンポーネントはexport const 関数名 ~ から始めています。）
また、1~5のコードは全く同じ見た目になるようになっています。
### 1. インラインスタイル（Inline Styles）
`return`の外で変数宣言して、その中にCSSを記述していきます。記法はJavaScriptでstyle属性としてCSSを当てるのと同じです。↓ちなみにstyle属性の記法はこちら。
“`javascript
Hello World!
“`
では、本題のインラインスタイ
宗教上の理由でLaravel 8.xのドキュメント以外読めません
# はじめに
久しぶりの記事の投稿です．
YouTubeの動画広告をスキップするChrome拡張を作ったり，QiitaのLGTMボタンをいいねボタンに戻すChrome拡張を作ったりして，コメント欄が大変なことになったのが懐かしく感じられます．今回も，性懲りも無くChrome拡張作ってみた系のネタ記事ですが，今度作った拡張機能は普通に使えるかなと個人的には思ってます．
またしょうもないもん作ってるな，と思いながら温かい目で読んでいただけると幸いです．
では本題に入ります．
なお，本記事ではポイントを絞って解説するので（といってもコード全体で30行もないけど），全コードを載せることはしません．
# Laravelについてググった時の話
業務ではLaravelを使うことが多いので，当然 「Laravel 〇〇」 みたいにググることが多いのですが，検索ワードに「Laravel8」とか，「8.x」とか入れないとまだまだ５系６系の記事やドキュメントが上位にヒットします．また，ブログの記事なんかを読んでいると，参考URLとしてドキュメントのページを貼ってくださっている方もいらっしゃい
github上のnpm packageをインストールする時の作業メモ
自社のgithub公開したpackageをnpmコマンドでインストールする時に挫折した為、Macでその辺りの作業注意点をメモする。
## github上に自社用パッケージを公開するメリット
1. 該当repoをチェックすることなく、toolsなどを簡単にnpm installで入力できて便利
2. バージョンアップする時も、同じくnpm updateすれば、最新版に更新される
3. 公開は社内に限定される## インストールする前の準備
– githubのアクセストークンを作成
– https://github.com/settings/tokens
– `Select scopes`で必要最低限の権限を付与
– `repo`をチェックON
– `write:packages`の`read:packages`をチェックON
– Enable SSO– 生成したトークンを何処かにコピー
– ターミナルからnpmでgithubをログイン
– Usernameにgithubのユーザ名を入力
– Passwor
