- 1. 30行のJavaScriptコードでスマートホームシステムを構築する方法
- 2. JavaScript中級者になるために参考になるサイトをまとめてみた。
- 3. 【JavaScript】 js 繰り返し文 for / while
- 4. tusdとtus-js-client, uppyを使ったファイルアップロードをapache2.4のCentOS7で構築する（https編）
- 5. Akashic Engine にて作成したニコ生向けゲームをiOSアプリ用に移植する方法
- 6. 指定した長さの文字列を返却する（TypeScript）
- 7. Akashic Engine にて作成したニコ生向けゲームをAndroidアプリ用に移植する方法
- 8. Uncaught TypeError: fs.existsSync is not a functionのエラー解決
- 9. Next.jsとGo言語(gqlgen)でGraphQLを使ったアプリケーションを構築する方法
- 10. PromiseとTaskCompletionSource
- 11. 学習日記6日目(2020/6/25)
- 12. 【備忘録】Javascript : 基本的なDOM操作
- 13. 【Javascriptライブラリ】sticky-sidebar (追従サイドバー)
- 14. Docker TypeScript で React 環境を構築
- 15. 初めてのJavaScript-備忘録03
- 16. 【javascript】DSL構築
- 17. アリババクラウドが提供するサービスを利用したNode.jsアプリケーションの展開
- 18. 古の書き方を卒業してちょいと今どきよりなJSを書こう
- 19. ブラウザ上でzipファイルを圧縮展開できるWebアプリを作ってみた
- 20. Firebase Cloud Messagingで「FirebaseError: Messaging: This browser doesn’t support the API’s required to use the firebase SDK. (messaging/unsupported-browser).」
30行のJavaScriptコードでスマートホームシステムを構築する方法
この記事では、**IoT**トレンドの成長を探り、わずか30行のコードで**スマートホーム**システムを構築する方法を紹介します。
本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/completing-a-smart-home-system-with-30-lines-of-javascript-code_594508)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。
スマートホームをはじめとする多くのIoT（Internet of Things）アプリケーションは、5Gなどの技術の台頭により、今年に入って急速に人気を集めています。スマートウォッチやテレビなど、「スマート」と表示される製品が増えており、人々が「スマート」という言葉を生活様式に変えていることを示しています。
一般的なスマートホームのソリューションには、デバイス（モノ）、クラウド、アプリケーションがあります。ソリューションの中には、ビッグデータやAIも含まれています。従来のI
JavaScript中級者になるために参考になるサイトをまとめてみた。
### 対象者
JavaScript初心者を抜け出したい方
変数やメソッドなどの基礎的なところはわかっている方
progateを終えて次のステップに進みたい方### なぜ書いたか
プログラミングを一通り勉強してきて、初心者という枠を抜け出したいと思い、いろいろ調べている中でとても良いサイトや動画に出逢ったので自分と同じように中級者へステップアップしたい方向けに記事を書こうと思った次第であります。### youtube
いきなり動画かよと思う方がいらっしゃるかもしれませんが、対象が初心者なので学びやすい動画を先に持ってきました。（筆者も初心者から中級者になろうとしている最中なのでとても参考にさせていただいております。）[しまぶーのIT大学さん](https://www.youtube.com/channel/UCti6dG0zSAetLGGYcgNML4Q)
プログラミングはもちろんですが、そのほかにもJavaScriptの歴史の背景の部分を解説してくれているので、なぜこの技術が必要となったのか理解することができます。[たにぐちまことさん](https://www.yo
【JavaScript】 js 繰り返し文 for / while
##【ゴール】
JavaScriptで使える繰り返し文##【メリット】
■ javascript理解度向上
■ リーダブルコード実現##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7##【コード】
####※**1-100まで1つずつ足されていくという処理を例にします。**
###while
※（）に条件
※{}に出力処理 ＆ 加算処理“`javascript:hoge.js
while(number <= 100){ console.log(number); number ++ ; } ``` ###for ※forは条件を()内に全て記述、シンプルで◎ ```javascript:hoge.js for(number = 1; number <= 100; number ++){ console.log(number); } ``` 以上!!! コードライン色付けしてみました!!! ##【合わせて読みたい】 ■ 【jQue
tusdとtus-js-client, uppyを使ったファイルアップロードをapache2.4のCentOS7で構築する（https編）
## 目的
– でかくて一杯ある音データをユーザ毎にサーバにアップロードしたいので、MITライセンスの`tusd`を使いたい。
– 実運用にはhttpsが必須です。クッキーでセッション管理して大容量・複数ファイルの処理をユーザ毎に行いたいからです。
– [前回ではhttpで動くことを確認](https://qiita.com/Woodie/items/5eea441cad405c8c9437)しました。
– この記事はhttpsでのトライアルです。クッキーには対応していません。## 環境
– CentOS7
– apache 2.4.41
– browser Firefox77 (MacOS)など
– tusd 1.0
– tus-js-client v2## 参考
– [tus.io](https://tus.io)
## 注意（この方法はtus.ioで記載されている方法とは違います。参考程度にお願いします）
– apacheのconfはここに書いてあります。[tusd/examples/apache2.conf](https://github.com/tus/tus
Akashic Engine にて作成したニコ生向けゲームをiOSアプリ用に移植する方法
# はじめに
本記事では、実質ニコ生ゲーム用のゲームエンジンであるAkashic Engineを使用した
ゲームをiOSアプリに移植したときの備忘録です。
HTML5で作られた他のエンジン製のゲームでも応用できるかと思います。
なお、Akashic Engineのマルチプレイ機能を用いたゲームは対象外です。**※当記事のやり方では審査を通らない可能性が高いです。ご了承ください**
AkashicEngine 2.7
XCode 11.5# 手順
### 1.Akashic Engineのゲームをスタンドアローン形式で出力。
https://akashic-games.github.io/tutorial/v2/7-export.html
akashic export html –magnify –output ../mygame### 2.XCodeで新規プロジェクト作成
File→New→Project
iOSタグ→Single View App
※User Interface を Storyboardとすること### 3.1で作成したファイルをプロジェクト直下
指定した長さの文字列を返却する（TypeScript）
“`js
const specifiedLenChar =
(length: number, atom: T) => {
return new Array(length).fill(atom).join(”);
}
“`
Akashic Engine にて作成したニコ生向けゲームをAndroidアプリ用に移植する方法
# はじめに
本記事では、実質ニコ生ゲーム用のゲームエンジンであるAkashic Engineを使用した
ゲームをアンドロイドアプリに移植したときの備忘録です。
HTML5で作られた他のエンジン製のゲームでも応用できるかと思います。
なお、Akashic Engineのマルチプレイ機能を用いたゲームは対象外です。AkashicEngine 2.7
AndroidStudio 4.0# ・手順
### 1.Akashic Engineのゲームをスタンドアローン形式で出力。
https://akashic-games.github.io/tutorial/v2/7-export.html
akashic export html –magnify –output ../mygame### 2.Andoroid Studio からプロジェクトを新規作成
・Enpty Activity を選択3.レイアウトにWevViewを載せる
“`xml:activity_main.xml
Uncaught TypeError: fs.existsSync is not a functionのエラー解決
# 状況
Windowsアップデートついでにnode.jsとかモジュールをアップデートしたらelectronでエラーが出るようになった。“`
Uncaught TypeError: fs.existsSync is not a function’
“`
# 環境
– windows 10 Pro Insider Preview 2004 (20150.1000)
– node v14.4.0
– Electron 9.0.4
– Vue.js 2.6.11
– Vuex 3.4.0
– vuetify 2.2.11# 原因
ipcRendererが原因のもよう。
レンダラープロセスがノードモジュールにアクセスしようとして失敗しているみたい。# 解決方法
vue.config.jsファイルに下記を追記したら動いてくれた。
Next.jsとGo言語(gqlgen)でGraphQLを使ったアプリケーションを構築する方法
この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。
作成したのは以下のような簡易ブクマアプリです。
フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。## 背景
個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。
そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンド
PromiseとTaskCompletionSource
非同期処理に使う JavaScript の Promise と .NET Framework (C#) の TaskCompletionSource を比較します。
# 概要
Promise や TaskCompletionSource のどちらか片方の知識から、比較によってもう一方の取っ掛かりにするのが狙いです。
JavaScript のコードは以下の記事から一部引用します。Promise の概要もこちらで説明しています。
* [非同期APIをPromiseでラップしてasync/awaitで使う](https://qiita.com/7shi/items/a2bb35f27cd4a56f7bac)
Promise は `await` での利用に限定して、`.then()` は利用しません。
JavaScript は [Deno](https://deno.land/) を想定してトップレベルで `await` を使用します。ただし最後の Web Speech API の例は、ブラウザで動かす必要があるため `async` 関数で囲みます。
# 待機
定番の `set
学習日記6日目(2020/6/25)
# 学習内容
– JavaScript基礎学習（Progate）
# その他
– タイピング練習
今更ですが、Macのショートカットキーがめちゃくちゃ有用なことに気付きました。今までカーソルを移動させるためにいちいち右手を矢印キーまで持って行っていましたが、以下のショートカットを用いることでホームポジションを維持できます。
慣れてなさすぎてめちゃくちゃタイピング速度が落ちてしまいますが、ショートカットを使ってのタイピングを練習していきます！– `Ctrl`+`F`:カーソルを1文字分右に移動(→)
– `Ctrl`+`B`:カーソルを1文字分左に移動(←)
– `Ctrl`+`P`:カーソルを上の行に移動(↑)
– `Ctrl`+`N`:カーソルを下の行に移動(↓)
– `Ctrl`+`H`:カーソルの左1文字を削除(BackSpace)
– `Ctrl`+`D`:カーソルの右1文字を削除(Delete)
– `Ctrl`+`A`:カーソルを現在の行の先端まで移動
– `Ctrl`+`E`:カーソルを現在の行の末端まで移動# 明日の予定
今日に引き続きJavaS
【備忘録】Javascript : 基本的なDOM操作
### DOMとは
DOMとは`Document Object Model`の略でマークアップ言語で書かれている文書にアクセスする為の仕組み。
DOMは文書内のタグや属性、要素がツリー(階層)構造で出来ていると捉えている。またDOMはそれらの構成要素をオブジェクトと見なしノードと呼んでいる。(`要素ノード`、`属性ノード`、`テキストノード`といった具合に。)例)
・html,head,title,body,p… : 要素ノード
・carset,id,name,lang… : 属性ノード### 頻出の要素の取得方法
## 1. getElementById
指定されたid値を持つ要素をElementオブジェクトとして返します。“`sample.html
“`“`javascript.js
let current = new Date(); // 実行日時取得
let result = document.getElementById(‘result’);
// id値が’result’の要素を取得し、変
【Javascriptライブラリ】sticky-sidebar (追従サイドバー)
# はじめに
サイドバーの追従のJavascriptライブラリを紹介しようと思います。
Qiitaでは初ものの記事となります。サイドバーの追従といえば、CSS“`position: sticky;“`で実装するのが通常かと思います。
sticky-sidebarを使うことのメリットとしては、
* “`position: sticky;“`はブラウザによって対応していないものもあるが、sticky-sidebarはJavascriptライブラリなので基本的にはどのブラウザでも動く
* Javascriptを使ってサイドバーの追従を実現しているため、Bootstrapなど複雑なCSSをいじるのは面倒という方にはとても便利まずは下記リンク先のデモを使用してみて、便利だと思ったら使用してみてください。
* デモ
* https://abouolia.github.io/sticky-sidebar/examples/basic.html
* sticky-sidebar (GitHub)
* https://github.com/abouolia/st
Docker TypeScript で React 環境を構築
自分用のmemoのつもりで
Dockerで環境構築
Dockerはinstall済み■Dockerfile作成
空のPJディレクトリ内にDokerfile作成し以下を記載“`
FROM node:13.5.0-alpine3.11
WORKDIR /usr/src/app
“`FROMは新しいイメージの元となるイメージの読み込み
alpineというのでめちゃくちゃファイルサイズを小さくできるらしい■docker-compose.yml作成
※ymlは「yaml ain’t markup language」の略で構造化データの表現方法
※簡単に言えば設定ファイル“`
version: ‘3’
services:
sample:
build:
context: .
tty: true
environment:
– NODE_ENV=production
volumes:
– ./:/usr/src/app
command: sh -c “cd tips && yarn start”
初めてのJavaScript-備忘録03
# 初めてのJavaScript-備忘録03
今回はMapとSetオブジェクトについて書こうと思う。
オブジェクトの簡単な説明なので、手短に…## Mapについて
Mapは連想配列を扱うためのオブジェクトで連想配列を容易に扱う事ができる。
Mapは何かと使えるヤツなので是非抑えておきたいね。Mapでよく使うメンバーは以下の通り
| メンバー | 概要 |
| ——– | —————————— |
| size | サイズを取得 |
| set | キーと値をセットでセット |
| get | キー指定でその対応する値を取得 |
| delete | キー指定でそのキーと値を削除 |
| clear | 全ての値とキーを削除 |### 使い方
“`js
let hoge = new Map(); // オブジェクトの生成//名前、年齢、性別をセット
ho
【javascript】DSL構築
書籍のアウトプットとして
#DLSとは
言語の機能や構文をうまく使って、その言語に最初からサポートされていたかのように特定のタスクを解決することです。
以降では文字列を処理するためのヘルパー関数を作成していきます。#ヘルパー関数を作成する
前回のテンプレートの[記事](https://qiita.com/yktk435/items/8dd2c725ecab0250422e)ではこのようなコードを持つ関数を定義しました。“`javascript
function stringWS() {
let stringParts = arguments[0];
let values = [].slice.call(arguments, 1)
}
“`
`let values = [].slice.call(arguments, 1)`で文字列部分と補間部分を取得しています。
しかし上記コードでは少しわかりにくいです。
さしあたり、この部分をレイヤ化して、ロジックの他の部分から隠してしまいます。
そのための関数を作成し、取得した値をタグ関数に渡すようにすれば良いでしょう。`
アリババクラウドが提供するサービスを利用したNode.jsアプリケーションの展開
このチュートリアルでは、**Alibaba Cloud**が提供するサービスを利用して、本番環境に対応した**Node.js**アプリケーションのセットアップを取り上げます。
*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/deploying-node-js-apps-for-production-on-alibaba-cloud_594639)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*
#序章
Node.jsは、高性能で高速なサーバーサイドアプリケーションを構築するために使用されるJavascriptのランタイム環境です。Node.js サーバーサイドアプリケーションは、間違った方法でデプロイされた場合、本当に遅くなり、トラフィックの増加をサポートできなくなる可能性があります。このチュートリアルでは、アリババクラウドサービスが提供する素晴らしいサービスを使用して、本番環境に対応したNode.jsアプリケーションを設定する方法を説
古の書き方を卒業してちょいと今どきよりなJSを書こう
# はじめに
基本的にはワタクシ様はPHPを書いて日々過ごしているのですが、たまにjsを書いたりすることもあります。
さて業界では未だに `js = jQuery` みたいな方も少なくなく、jQueryでjsを覚えてそのままAngularとかに手を出さずCoffeeScriptとか通らなかった方はなんでか知りませんが、古文のようなES5以前のjsを書くことが多い印象があります。
ES6(ES2015)が世に爆誕してから5年も経つと便利さ、書きやすさが桁違いにUPします。
ES5があまりにも書きづらくてCoffeeScriptやTypeScriptやDartや **Reactに関係ない方のJSX** などといったaltJSと呼ばれるものが2010年頃からポコポコ生まれていったわけですが、それらの影響を受け、格段に書きやすくなった今どきなjsの書き方をふたつばかり紹介していきたいと思います。# varからの卒業
“`javascript
// ES5以前
var hoge = ”; // よくない// ES6以後
const hoge = ”; // 中身が変わらない予定
ブラウザ上でzipファイルを圧縮展開できるWebアプリを作ってみた
こんにちわ。
創作意欲が湧いた勢いで、JavaScriptからzip形式のアーカイブを操作できる “JSZip” というライブラリを使用して、ブラウザ上でzipを圧縮展開できる簡単なWebアプリを作ってみました。
– [JSZip – GitHub](https://github.com/Stuk/jszip)
# 作ったもの
– [Online Zipper – github.io](https://dojyorin.github.io/webapps/zip.html)めちゃくちゃシンプルです。
Babelは通してないので、動作確認済のChrome以外は新生EdgeやFirefoxでなら多分動くと思います。
# 仕組み
凝ったことはしていないので、とても簡単です。1. Input要素でファイルを読込
2. ファイルをワーカースレッドへ転送
3. ワーカースレッドでJSZipをロードし圧縮展開
4. 処理結果をメインスレッドへ転送
5. a要素に処理結果のBlobURLを充ててダウンロード全ての処理がローカルで完結しています。
ヘビータスクの圧縮展開はWe
Firebase Cloud Messagingで「FirebaseError: Messaging: This browser doesn’t support the API’s required to use the firebase SDK. (messaging/unsupported-browser).」
# Firebase Cloud Messaging(以下FCM)で「FirebaseError: Messaging: This browser doesn’t support the API’s required to use the firebase SDK. (messaging/unsupported-browser).」が出た場合
Chromeの最新版で FCM をつかっていて遭遇した。
## 原因
原因はFCM使ったアプリに**http**でアクセスしていたということngrokをつかってデバッグしているときに、うっかり http でアクセスしてしまっていた。
エラーメッセージを読むと「ブラウザがAPIに対応していない」ようにみえてしまうので注意。## 対策
FCMのクライアントとなるWebアプリは**https**でアクセスしましょう。または開発・デバッグ時は**http://localhost**も可。
