- 1. Vue.jsを勉強したのでドット絵作成アプリを作ってみる
- 2. RPGツクール 文字入力してデータ更新
- 3. twitterの会話履歴から相関図を作成する
- 4. 【Vue.js】Vue構文まとめ (1)
- 5. WebAssembly入門してみた
- 6. 原稿用紙枚数換算
- 7. Web BluetoothによるU.F.O. SAの制御
- 8. [JS]getElementByIdでは上手くいくのにgetElementsByClassNameでは上手くDOM操作が出来ないとき
- 9. 【ネイティブJavaScriptのみ】 Web APIを活用したアプリ開発（PWA化も）【JS勉強1か月でも開発可】
- 10. react_on_railsでReact Hooksを使うと’Invalid hook call.’のエラーが出て動かない場合の解決策
- 11. 【Vue/Nuxt】UniversalモードでJWT認証出来るようにした
- 12. Javascript ES6の真偽判定
- 13. バイナリファイルのアップロード・ダウンロードを自在に操ろう
- 14. Gulpの構築（Sassコンパイル、CSS圧縮、ベンダープレフィックス）
- 15. 同じタグにイベントを追加する方法
- 16. javascriptでタイマーを作る
- 17. 任意のバーチャル背景を使えるページを作った
- 18. URL を比較して差分画像を生成する CLI ツールを作りました
- 19. Excelで同じ行を増やす操作をブラウザ上で実行する
- 20. TRPGやる回数増えたから自分たち用のオンラインツール作ってみた
Vue.jsを勉強したのでドット絵作成アプリを作ってみる
# はじめに
フロントエンド何もわからないマンであるところの筆者が、Vue.jsに入門がてらの練習としてちょっとした画像変換アプリを作ってみました。
この記事では、「Vue.jsの基本文法を一通り勉強してみたけどVue CLIの使い方はよくわからない、そもそもJavaScriptもそんなにわかってない」くらいのレベルから実際にVue CLIを触ってアプリを作る過程でよくわからなかったポイントや注意点をつらつらと記録していきます。## アプリの完成品
作ったアプリはこちらです。
https://tkmz-n.github.io/pixelize_app/「クロスステッチの図案を作成したい」との需要があったので、好きな画像をアップロードしてドット絵に変換し、図案として利用できるようなものを作りました。
ググってみたところ似たようなアプリはいくつか見つかるんですが、サイズ指定や色数の指定に制限があったりしてもどかしいので、そのあたりを柔軟に設定できるようにします。
画像をアップロードして、変換後の画像サイズや色数、ドットをわかりやすくするグリッド線の有無などを設定し、`Pixeliz
RPGツクール 文字入力してデータ更新
**RPGツクールでTodoリストを作ってみよう**
挑戦中[RPGツクール 改めて開発環境構築](https://qiita.com/JQinglong/items/42b58c887b9e76e50534)
[RPGツクール リスト表示](https://qiita.com/JQinglong/items/e304fc3198dc7e1187b4)
[RPGツクール 外部API連携](https://qiita.com/JQinglong/items/7478aa91aab71bd996c0)
からの続きです。## RPGツクール 文字入力プラグイン
文字入力については、こちらのプラグインを利用させていただきます。
[キーボードでテキストフォーム入力（修正版）](https://tm.lucky-duet.com/viewtopic.php?t=1937)使い方は簡単です。
widthも指定できたら良いかなと思いましたが、全然良いです。InputForm x=140;y=100;v=11;max=40
で、こんな見た目です。
twitterの会話履歴から相関図を作成する
http://www.minekawada.com/imgpro/twitter-network/_syotarow
LGTMがいい感じになったらソース等公開します！
こちらの記事を参考にしました：https://qiita.com/hirodos/items/47d53ab606390af97533
【Vue.js】Vue構文まとめ (1)
# Vue.jsの基礎構文まとめ
こちらの記事は、Adnan Babakan 氏によりDev.to上で公開された『 Vue cheat sheet 1 』の邦訳版です（原著者から許可を得た上での公開です）
– 元記事：[Vue cheat sheet 1 ](https://dev.to/adnanbabakan/vue-cheat-sheet-1-194a)
—
Dev.toコミュニティのみなさん、こんにちは！
私はVue.jsが大好きで書くのを楽しんでいます。この記事ではVue.jsのほぼすべての基本的な概念（公式Webサイトに基づく）を取り上げています。目次から必要なセクションに簡単にアクセスできます。
このパートではVueコンポーネントについては説明していません。
いくつかのコードサンプルは公式ウェブサイトから引用し
WebAssembly入門してみた
ふと，WebAssemblyを試してみようと思い立ち，やってみました．
## WebAssemblyとは
WebAssemblyはブラウザでコードを高速で動かすものです．Webのフロント側で動作する言語といえばjavascriptでした．javascriptは動的型付け言語でインタプリタ型なので，直観的で簡単に記述できる反面，型推論しながら実行するため，遅いというような特徴があります．そこで出てきたのがWebAssemblyで，これは静的型付け言語を中間コードにコンパイルし，そして，バイナリフォーマットに変換します．このバイナリフォーマットを使うことでファイルサイズの縮小と構文解析の処理を短縮することによる実行速度の高速化を実現する技術という理解でいます．（30分ほど勉強した理解）まだ読んでないですが，下の記事WebAssemblyの理解を深めるのに良さそうです．
https://qiita.com/ShuntaShirai/items/3ac92412720789576f22## 入門
実行OSはUbuntu 18.04.4でやりました．Ubuntu 16.04が一番良い
原稿用紙枚数換算
文字列を原稿用紙枚数換算する処理が必要になったからついでにまとめとく。
# 原稿用紙枚数を換算する関数
“`javascript:JavaScript
const manuscriptCount = (text) => {
let lines = 0;const textArray = text.split(“\n”);
textArray.forEach(t => {
if (t.length === 0) {
lines += 1;
} else {
t = t.slice(0,1) === (“ ” || “「”) ? t : “ ” + t;
t = t.replace(“。」”,”」”).replace(/(\d{2})/g, “0”).replace(/[a-zA-Z]{2}/g, “a”);let start = 0;
let end = start + 21;
while (start < t.length) { lines++;
Web BluetoothによるU.F.O. SAの制御
# はじめに
せっかくUFOSAを購入したのでBluetoothで制御してみました。
WebブラウザってなんでもできるからBluetoothも使えるんじゃないかと調べてみたら、やはりWeb Bluetoothがありました。UFOSAのBluetooth通信の仕様やWeb Bluetoothを用いた実装方法を解説していきます。
## UFOSAとは
U.F.O. SA とは、A10サイクロンSAと同様にBluetoothに対応した性家電です。
ハードウェアの性能はもちろん、動画・音声に連動することもできるハイテクマシン！専用無線アダプタをPCに差し込んで、CSVファイルと動画ファイルをVORZE Playerで再生すると、動画に連動してUFOSAが動きま…せんでした。非公式プレイヤーなら動きました。（VORZEェ…）
CSVファイル(play file)の仕様は「PLEASE READ FIRST」PDFファイルにあります。
https://vorzeinteractive.com/downloadなお専用無線アダプタは別売になりました。（VORZEェ…）
また、スマ
[JS]getElementByIdでは上手くいくのにgetElementsByClassNameでは上手くDOM操作が出来ないとき
https://myscreate.com/dom-acquisition/
【ネイティブJavaScriptのみ】 Web APIを活用したアプリ開発（PWA化も）【JS勉強1か月でも開発可】
#はじめに
コロナの影響で今年のＧＷは外出自粛。
ということでオンラインハッカソンに参加させていただきましたのでその記録の記事です。#構想編
####何が作りたいか？
「日常生活での無駄を減らせるものが使いたい」ということで
以前より無駄だなと思っていた今日何食べよう（どこ行こう？）問題に焦点をあてることに。####何が作れるか？
現在のスキルとしてHTML,CSS,JavaScriptの基礎の知識（dotinstall一周したくらい）しかない。
JavaScriptで動かせるものを探していたらAPIがJavaScriptが動かせそうと知る。####構想編まとめ
【作成目標】
・ 今日なに食べよう？と考える不毛時間の削減
・ 考えるのが嫌になって毎度同じ店に行ってしまう現象の防止（未開拓店舗の発掘）
【アプリ概要】
・ 今日の気分から適切なレストランを提案 → 周辺の店舗検索
（yes/no診断→店舗検索）
・スマホで手軽に使用したい(出来たらPWA化もしよう)#作業編 -下準備-
実際にエディターにコードを打っていく前に３点の下準備をしました。
######①
react_on_railsでReact Hooksを使うと’Invalid hook call.’のエラーが出て動かない場合の解決策
## はじめに
タイトル通りですが、react_on_railsでReact Hooksを使うと’Invalid hook call.’のエラーが出て動かない場合の解決策です。React Hooksの文法が間違っていたり、ライブラリのバージョンが不適切だったりが原因ではなくて沼にはまりかけたので参考になれば幸いです。
## エラーの詳細
React公式サイトの以下のエラーになります。
https://reactjs.org/docs/error-decoder.html/?invariant=321## 公式の対応方針
React公式サイトの以下のページです。
https://reactjs.org/warnings/invalid-hook-call-warning.html要約すると、
①React DOMのバージョンが間違っていないか？
②Hooksのルールを破っていないか？
③Reactが二重でインストールされていないか？
の3点です。私の場合、以上の3点が原因ではなかったようで解決しませんでした。
## 解決策
参考になったのは以下のreact_on_ra
【Vue/Nuxt】UniversalモードでJWT認証出来るようにした
## Nuxt.jsのUniversalモードのおさらい
>’universal’: アイソモーフィックなアプリケーション（サーバーサイドレンダリングに加え、クライアントでのナビゲーションを行う）
引用：https://ja.nuxtjs.org/api/configuration-mode/Universalモードで開発するとSSRとCSRをやってくれるようですね。
SSRを利用する利点的なところは以下のサイトが参考になりました。
参考：https://ssr.vuejs.org/ja/
## nuxt.config.jsの設定をする
“`nuxt.config.js
require(‘dotenv’).config()
export default {
srcDir: ‘app/’,
mode: ‘universal’,
plugins: [‘@/plugins/axios.js’],
modules: [
‘@nuxtjs/axios’,
‘@nuxtjs/dotenv’,
‘@nuxtjs/auth’,
‘cook
Javascript ES6の真偽判定
JavaScriptにおける真偽判定がややこしすぎたので表にまとめてみました。
# Trueになるやつ
|型|中身|
|—-|—-|
|Number|0以外|
|Array|[]|
|Object|{}|
|String|’a’|# falseになるやつ
|型|中身|
|—-|—-|
|Object|null|
|Number|0|
|Number|[].length|
|Number|{}.length|
|String|”(空文字)|
|Number|”.length|# 推察(この推察 = trueなのかは知らない)
### Number
0ならfalse
-> lengthが無双する0以外は問答無用のtrue
### Object,Array
基本的にtrue
-> lengthでNumberにしようね### String
[]や{}を差し置いて空文字は生意気にもfalse
それ以外はtrue### null
おまえは流石にfalse#まとめ
lengthはっょぃ
バイナリファイルのアップロード・ダウンロードを自在に操ろう
HTMLからバイナリファイルをアップロードしたり、サーバからバイナリデータをダウンロードしてみます。
クライアント側として、HTMLのSubmitボタンを利用する方法と、Javascriptから送信する方法でやってみます。
サーバ側としては、Node.jsのSwagger-node(中身はExpress)のサーバの場合と、AWSのAPI Gateway＋Lambdaの場合を取り上げます。毎度の通り、ソースコードは以下に上げておきました。
poruruba/fetch_laboratory
https://github.com/poruruba/fetch_laboratory#バイナリファイルの送信
それでは、送信するクライアント側のWebページから見ていきます。
まずは従来からの、HTMLのSubmitボタンで送信する場合です。
HTMLは以下のような感じになります。“`html:index.html
同じタグにイベントを追加する方法
同じタグにイベントを追加する方法について、jQueryで書く場合とJSで書く場合の違いのメモ
## jQuery
“`js
$(function(){
$(‘li’).click(function(){
let name = $(this).attr(‘class’);
alert(name);
})
})
“`## JavaScript
“`js
const tagName = document.getElementsByTagName(‘li’);
//tagNameには配列が返ってくる。for (let i = 0; i < 3; i++){ tagName[i].addEventListener('click',function(){ alert(tagName[i].className); }) } ```
javascriptでタイマーを作る
# 作ったもの
タイマー# 使った技術
html, css, javascript# リンク
https://timer-1c484.web.app/timer.html# 機能概要
– カウントダウンできる
– 測りたい時間を設定できる
– 時間が経過したらアラームが鳴る
– 途中でカウントダウンをストップできる
– ストップした後、キャンセルボタンを押すとセットした時間に戻る# 仕様
## 項目定義
### タイマー
– 時間(hours)
– min: 0
– MAX: 23
– 分(minutes)
– min: 0
– MAX: 59
– 秒(seconds)
– min: 0
– MAX: 59## ボタン定義
– Start
– hours ≠ 0 かつ minutes ≠ 0 かつ seconds ≠ 0のとき、Start ボタンを押下すると、カウントダウンが始まる
– hours = 0 かつ minutes = 0 かつ seconds = 0のとき、Start ボタンを
任意のバーチャル背景を使えるページを作った
# TL; DR
* ウェブカムの入力から人物部分のみをくりぬいて背景画像と合成するWebページを作成した
* https://knok.github.io/virtbg/
* 上記URLにアクセスし、”Start video”ボタンを押すと下に合成された動画が表示される
* “Stop video”で停止
* ソースコード: https://github.com/knok/knok.github.io/tree/master/virtbg
* OBS Studio + 各種OS向けプラグインで任意のビデオ会議ツールに利用可能[jitsi](https://jitsi.org/)での動作例:
## 動機
非常に多くの企業・団体等がバーチャル背景を提供しています(例: [Web会議で使える「 #バーチャル背景 」配布
URL を比較して差分画像を生成する CLI ツールを作りました
2つのウェブサイトのブラウザ上での見え方を比較したい時があると思います。例えばプロダクションと開発用のウェブサイトなど。そんな時に使える CLI を作りました。
https://www.npmjs.com/package/wwwdiff
`wwwdiff` は 2つの URL を引数に指定して、ブラウザ上でのレンダリング結果の差分画像を生成するツールです。
## インストール
インストールと実行には Node.js が必要です。パッケージマネージャーの npm 経由で `wwwdiff` をインストールできます。
“`shell
$ npm install wwwdiff -g
“`インストールが完了すると `wwwdiff` コマンドが利用できるようになります。
“`shell
$ wwwdiff -v
1.1.10
“`## 実行
比較したい2つのウェブサイトの URL を用意して下さい。例えば WordPress のデフォルトテーマで2つのポストを作って比較してみます。
| サンプル1 | サンプル2
Excelで同じ行を増やす操作をブラウザ上で実行する
# Excelで同じ行を増やしたい
Excelを使っている際に、以下のように各行を繰り返し表示させたいことがあるかと思います。
↓
方法としては、以下のリンクで解説されているように
・隣の行に連番を振って、繰り返したい行数分コピペする
・VBAで何とかする
https://teratail.com/questions/48056
といった方法があるかと思います。
ただたくさんコピペしたり、マクロを作るのは面倒だ、という人もいるのではないでしょうか。# ブラウザ上で実行できるようにする
上記を簡単に実行
TRPGやる回数増えたから自分たち用のオンラインツール作ってみた
## 背景
1. 友人たちとTRPGをやるようになった
2. セッションはSkype越しにやっており、皆が個別のダイスツールを使っているので、虚偽の報告が可能(しないとは思ってるけど、まぁ、可能)。
3. [リアルタイムでダイスロールを共有するWEBアプリを作ってみた](https://qiita.com/verhichi/items/747bd95b84cccb0ba8b3)
4. TRPGをやる回数が増えた
5. ダイスロール共有だけじゃ機能が足りないと言われた
6. ここまで来たら他のツール使ったほうがいいんじゃね？
7. いや、ここは勉強！自分で実装してみよう！ReactもReduxもwebsocketも知りたいし!※ちなみに大体4人くらいでやってるけど一人を除いて全員TRPG初心者ですw
## TL;DR
– github(振り返ってみるとすごいコード汚い…)
– https://github.com/verhichi/trpg-space
– サービスのURL
– https://trpg-space.com/なんかカオスだけど、イメージとしてはこ
