- 0.0.1. zlibjsでファイル名が文字化けしてしまう問題の対応
- 0.0.2. Vanilla JSのパララックス実装ライブラリ「Rellax」が使いやすくなるoptional設定
- 0.0.3. Promiseオブジェクトの関数に引数を使用する【編集中】
- 0.0.4. webサービスを運営してみた(2020/4/18)
- 0.0.5. jsフレームワークstimulusでyahoo地図を操作してみた（その四、最終回）
- 0.0.6. Speech Recognition API でブラウザ音声認識を試す
- 0.0.7. Speech Recognition API と Yandex Translation API を使って 音声自動翻訳アプリを作成
- 0.0.8. 新高1が外出自粛に同意しないと閲覧できないサイトを作ってみた
- 0.0.9. 【Nuxt.js】5分で分かる！忙しい人向けVuexまとめ
- 0.0.10. WebSocketが切断された際に、自動的に再接続する方法
- 0.0.11. コロナウィルス渦中の転職活動
- 0.0.12. UNIX時間について調べた【編集中】
- 0.0.13. 【JavaScript】配列の一部だけを合計して新しい配列を作る
- 0.0.14. 『うちで踊ろう』(星野源)をLINE BOTとIoTでプログラムした
- 0.0.15. プログラミング言語の学ぶ順番について(初心者から中級者へ)後編
- 0.0.16. Node.js(五):Express 実装
- 1. 実装の手順
zlibjsでファイル名が文字化けしてしまう問題の対応
# 始めに
JSでzipファイルを展開する際に以下の記事を参考にしていましたが、日本語ファイルを展開する際に文字化けをしてしまったのでその対応についてまとめました。+ [zlibjsのUnzipを使用してブラウザ上でzipファイルを展開する](https://qiita.com/59naga/items/d8abcdc06248cb28cebd)
+ [[zlib.js] JavaScriptでZIP解凍する](https://qiita.com/yun_bow/items/1b9e86a2efe12432845d)# 導入方法
こちらでも使い方について簡単に書きます。
まずは以下でパッケージをインストールします。“`
$ yarn add zlibjs
“`次に以下のようにしてzipファイルを展開します。今回はinput fileからのコールバックを使っています。
“`javascript:input_fileからのコールバックでzipファイルを展開する
const { Unzip } = require(‘zlibjs/bin.unzip.min’).Zli
Vanilla JSのパララックス実装ライブラリ「Rellax」が使いやすくなるoptional設定
#はじめに
私はプログラミングを学習して3ヶ月の初学者であり、今回が**初投稿**(大事)になります。
22歳の**文系大学既卒未経験**(大事)で、エンジニア目指して勉強/就活中の身です。「クソ記事を量産するな！」と言われそうですが、学習の中でつまづいた点に関して日本語で書かれたドキュメントが見受けられず時間を食われたため、一発書いてみようかなと思い立ちました。
突っ込みどころ満載かもしれませんが、あらかじめご了承ください。
誤った情報や記述等がありましたらご指摘ください。#なんの記事
JSライブラリ**「Rellax」**を使ってみて、使いづらさを感じた点がありました。
そのもやもやを解決するまでの軌跡をまとめた記事になります。ライブラリをまともに扱うのも初めて。#Rellax
– **「Rellax」**とは、軽量かつVanillaJSにてパララックス効果（視差効果）を実装できるライブラリです。
実装方法など詳細は割愛させていただきます（非常に簡単です）。
[（参考リンク）](https://webkore.site/rellax/)公式HPリンク:
[Vani
Promiseオブジェクトの関数に引数を使用する【編集中】
ポイント
(1) Promiseオブジェクトをreturnする関数にする
(2) 実行処理で引数指定“`元のコード.js
var getRoomData = new Promise(function(resolve,reject){
roomInfo.on(‘value’, (snapshot)=> {
resolve(snapshot.val())
});・・・省略・・・
getRoomData.then(function(dbData){
・・・省略・・・
})
“`“`正しいコード.js
var getRoomData = function(roomInfo){ //(1) Promiseオブジェクトをreturnする関数にする
return new Promise(function(resolve,reject){
roomInfo.on(‘value’, (snapshot)=> {
resolve(snapshot.val())
webサービスを運営してみた(2020/4/18)
# はじめに
アルバイトの勤怠管理を無料でできるサービス[Timestamp](http://time-stamp.net)を個人で運営しています。
アクティブなアカウント数０人の当サービスで売上を１円でも上げることが目標です?
フルタイムで仕事をしながら個人でサービス運営できるかどうかの実験であり技術向上が目的でもあります。
ここでは運営や開発に関する記録を残していきます。# ユーザー数
サービス開始から今日までのgoogleアナリティクスのユーザ数推移です。
あいかわらずアクティブなアカウントは０です??# 雑記
### フロントエンドのソースを公開しました
フロントエンドのソースを[githubに公開しました](https://github.com/takimotoShotaro/re
jsフレームワークstimulusでyahoo地図を操作してみた（その四、最終回）
# やったこと、やる予定のこと
#### 0. [railsアプリへのstimulus適用](https://qiita.com/wkya_4a/items/e85bd6324fe4085dce0e)
#### 1. [stimuluｓでyahoo地図を表示](https://qiita.com/wkya_4a/items/6e1224550ca0b7aed9d9)#### ２. [表示した地図上で、指定座標に移動](https://qiita.com/wkya_4a/items/3e2f5bb6cf8abe525bf0)
#### 3. [住所から座標を取得し、それをDBに登録](https://qiita.com/wkya_4a/items/883ad988f2ad5cf58f55)（前回）
#### 4. 「3」で登録した情報を選択し、yahoo地図上でその場所に移動（←今ここ）
だいぶ間が空いてしまいましたが、最終回。
一覧画面にて、
【「3」で登録した座標情報を選択→その地図の場所に移動】
をできるようにします。##まずは、一覧画面にて地図を表示
今回は、作成
Speech Recognition API でブラウザ音声認識を試す
# はじめに
WebVRの研究中に音声認識をやりたくなって調べてみたら面白そうだったので試してみた# [SpeechRecognition](https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition/SpeechRecognition)
## 概要
– HTML5に備わってるAPI (Mozilla作)
– 音ブラウザで音声を認識してくれる## 準備
なし## 使用方法
[公式ドキュメント](https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition)– `new SpeechRecognition()` した後に設定値を入れて、
(※ chromeでは “webkit” プレフィックスを付けないといけないので`webkitSpeechRecognition()`になる)– `start()` で認識開始
– `onresult()`で音声取得結果がわかる
– `stop()` で終了# 音声認識を動かしてみる
## 仕様
Speech Recognition API と Yandex Translation API を使って 音声自動翻訳アプリを作成
# はじめに
たまたま音声認識APIがあることを知って簡単に動かせた
→ 翻訳にかけれたら便利だなと思ったので簡単に使える翻訳APIを調べて組み合わせてみた。# 使用するAPIについて
## [SpeechRecognition](https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition/SpeechRecognition)
– HTML5に備わってるAPI (Mozilla作)
– 音ブラウザで音声を認識してくれる
– 参考：[Speech Recognition API でブラウザ音声認識を試す](https://qiita.com/yunayunanaka/items/75c1ade41b6156d304d8)## [YandexTranslation](https://github.com/RytNszn/mylaps-dashboard)
– Yandexがロシア版Googleみたいなもので、そのYandexが出してる翻訳API
– APIの使用には無料登録が必要
– 使い方が簡単そうだったの試し
新高1が外出自粛に同意しないと閲覧できないサイトを作ってみた
# 外出自粛していますか
新型コロナウイルスが流行っていますが，皆さんは外出自粛していますか？私は高校生になったものの学校がないので外出自粛しながら家で課題とプログラミングをしています。もちろん，外出自粛とは言ってもどうしても外出しなければならないという方もいると思います。
それでも，少しでも「外出を減らす」ことを意識できるように，自分のブログを外出自粛に同意しないと閲覧できない仕様に変更しました。ブログのページビュー数が1日あたり40前後なので影響力はほとんどないですが，この記事を参考に外出自粛に同意しないと閲覧できない仕様のサイトが増えれば少しは効果があるのかなと思います。
# スクリーンショット＆デモ
こんな感じのメッセージが表示されます。メッセージは「はい，同意します。」をクリックすると消えるようになっています。「Stay Home」の文字についている黒い線は自分のブログのスタイルが適用されているため，他のサイトで導入した場合表示されません。
が深いと
受け渡しの関係が分かりにくく
複雑になってしまいます?それを1箇所にまとめてくれるのがVuex?
コードもシンプルで分かりやすくなります！# 状態管理パターン
https://
WebSocketが切断された際に、自動的に再接続する方法
先日、WEBサイト制作者さん向けに、デザインデータや原稿などWEBサイト制作に必要なあらゆるデータを、チームで簡単に共有できるウェブサービスを公開したのですが、制作の際に得た知見をシリーズで共有していこうと思います。
▼ウェブサイト製作者のためのプラットフォームCrew’sHub
https://crewshub.net## WebSocket の自動再接続が行われない
[Crew’sHub](https://crewshub.net)には、リアルタイムのチャット機能があり、Web Socketを利用しています。
また、データ管理画面でも、プロジェクトメンバーが編集したら即座に更新されるようになっており、やはりここでもWebSocketを利用しています。開発中に遭遇した問題として、WebSocketが切断された際に、自動再接続がうまく行われないということがありました。
クライアント側では、Reconnecting WebSocketという、WebSocketがクローズされた際に自動的に再接続が行われるモジュールを採用しています。
**reconnecting-websoc
コロナウィルス渦中の転職活動
# 転職活動の背景
一身上の都合により、1年前頃から転職することを決意しており、3月中に前職を退職。会社を辞めたものの、こんなにコロナショックが広まるとは。。。転職活動、大苦戦（汗）# 経歴
・大学で情報系の学科を専攻
・7年間SIerの企業に勤める# 利用した転職エージェント
・@Type
求人数：○ エージェントによるフォロー：◎
・レバテックキャリア
求人数：△ エージェントによるフォロー：◎
・マイナビエージェント
求人数：◎ エージェントによるフォロー：×# 転職活動の戦績
・応募：60社程度
・書類選考通過：25社
・WEBテスト落ち：2社
・一次面接落ち：9社
・最終面接落ち：3社
・選考辞退：9社
・内定：2社# 応募先の職種
・ITコンサルタント
・一次請けSIer
・社内SE
・セールスエンジニア# コロナショックによる転職活動
### メリット
・ほとんどの企業がWEB面接を導入しており、
都内に住んでいない遠方の方も比較的面接を受けやすい。
交通費も浮く。
・経験的に、WEB面接は、対面に比べて、踏み込んだ質問を聴きづらい。
UNIX時間について調べた【編集中】
【背景】SHOWROOMは日時にUNIX時間を使用している。Javascritpで対応するWebアプリの日時データの型を検討するたみに調査実施
Webアプリでは日時は。。。UNIX時間は『「協定世界時の」1970年1月1日0時0分0秒からの累計秒』
[GMT、UTC、UnixTimeって何が違うの？](https://kiridaruma.hateblo.jp/entry/2018/02/10/233957)JavascritpでUNIX時間に変換すのは下記で
“`
Math.floor(Date.now() / 1000);
“`
~~// Dateオブジェクトを作成~~
~~var date = new Date() ;~~~~// UNIXタイムスタンプを取得する (ミリ秒単位)~~
~~var a = date.getTime() ;~~~~// UNIXタイムスタンプを取得する (秒単位 – PHPのtime()と同じ)~~
~~var b = Math.floor( a / 1000 ) ;~~
※@vf8974さんに教えて頂きました。こちらが
【JavaScript】配列の一部だけを合計して新しい配列を作る
変換前の配列：“`array1 = [ 年, 月, 日, 人数1, 人数2, … , 人数47 ];“`
変換後の配列：“`array2 = [ 年, 月, 日, 人数1～人数47の合計 ]; “`つまり、人数を合計したい。
“`javascript
let array2 = array1.slice(0, 3).concat(array1.slice(3).reduce((a, x) => { return a + x }));
“`
『うちで踊ろう』(星野源)をLINE BOTとIoTでプログラムした
星野源さんの『うちで踊ろう』。LINEメッセージを送るとIot(スピーカー）がメロディを奏でるbotをうちでプログラムしました。
基本的な開発方法は[前回の記事](https://qiita.com/Naru0607/items/b523cf9f67fa18bcf7d7)の『きらきら星』と同じです。
##環境
– Windows 10
– Node.js 12.16.1##必要なもの
– [obniz Board](https://obniz.io/ja/products)– [スピーカー](http://akizukidenshi.com/catalog/g/gP-04118/)(30円で購入できました)
##事前準備
[前回の記事](https://qiita.com/Naru0607/items/b523cf9f67fa18bcf7d7)と同じです##BOTの動き
画像をクリックするとYOUTUBEに飛びます[後編
#追記
記事に書き忘れていましたが、複数の言語を中途半端にやるより、一つの言語を極めれる方がいいと思います。
ただその言語が自分に合わない（僕の場合はCが生理的にきつかった) 場合は他の言語へ移った方がいいとも思うのです。#目次
大前提と学ぶ意義と大まかな学ぶ流れ
最初の一歩：Javascript
飛躍の一歩：Python
最初のコンパイル言語：C#
最後の難関、最強言語：C言語http://www.minekawada.com/program-lang-order.html
Node.js(五):Express 実装
今回からはNodeでExpressを勉強しましょう、Expressは人気なのJSバックエンドモジュールと言うことです。先ずはインストールしてみよう。
実装の手順
Node.js立ち上げ
新たなフォルダを作って、エントリポイントとしてのapp.js追加して、vscode中のターミナルでポロジェクトにnode.jsをインストする。
“`terminal
xxx.xxx:my-first-express$npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fields
and exactly what they do.Use `npm install
Concurrent Mode時代のReact設計論 (6) Concurrent Modeと副作用
この記事は「Concurrent Mode時代のReact設計論」シリーズの6番目の記事です。
## シリーズ一覧
– [Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理](https://qiita.com/uhyo/items/4a6315bfccf387407631)
– [Concurrent Mode時代のReact設計論 (2) useTransitionを活用する](https://qiita.com/uhyo/items/ba49b25f0a206e933e4d)
– [Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか](https://qiita.com/uhyo/items/27c1282addc06b17a980)
– [Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む](https://qiita.com/uhyo/items/4c45672874874a2aad11)
–
qiitaに晒した8つの成果物とソースコード
## 1. react・websocketで作ったWebアプリ「いつちゃ オープンチャット」
### 成果物
https://chat4.itsumen.com/### リポジトリ
https://github.com/yuzuru2/chat## 2. vueで作ったSPAなWebアプリ「いつめん掲示板」
### 成果物
https://board.itsumen.com/### リポジトリ
#### フロントエンド
https://github.com/yuzuru2/board_front#### バックエンド
https://github.com/yuzuru2/board_back## 3. ログイン不要／最短10秒で画像を共有できるWebアプリ「いつめん画像共有サイト」
### 成果物
https://gazou.itsumen.com/### リポジトリ
#### フロントエンド
https://github.com/yuzuru2/gazousite_front#### バックエンド
https://github.com/yuzur
【CSS】z-index ではみ出しを防ぐ (重ねる)
制作中アプリにて、
写真をアップし、その場でプレビューする機能を実装中に、
z-indexを久しぶりに使ったので、
備忘録も兼ねて、ざくっとご紹介します。
# 解決したい事
**下記のように、写真が来ると文字が枠外にはみ出てしまいます。**
[](https://gyazo.com/0fd4e1d3758f762210227a10ac7b5129)## < 完成形 >
**写真はテキストの上に乗ってもらいます。**
[](https://gyazo.com/2929b2415afccb8526e5e11d44fe020a)# z-index プロパティ
ボックスの重なる順番(優先順位)を決めれるプロパティ。
値は整数で、大きいものが手前に表示される。
____________
addEventListener() メソッドの引数 listener に設定するコールバック関数で、引数 (event)を省略した場合でも動作する理由
`addEventListener()` メソッドの引数 `listener` に設定するコールバック関数は、引数 (event) を省略した場合でも動作する。具体的には、次の通り「引数を省略しない場合」と「引数を省略した場合」が同様に動作する。
“`JavaScript:sample1.js
// 引数を省略しない場合（’event’を引数として設定）
document.getElementById(‘sampleElement’).addEventListener(‘click’, (event) => {
event.target.style.backgroundColor = ‘red’;
});// 引数を省略する場合
document.getElementById(‘sampleElement’).addEventListener(‘click’, () => {
event.target.style.backgroundColor = ‘red’;
});
“`## Q. なぜ引数を省略しても動作するのか
A. 引数を省略する場合の `event`
