- 1. ポップアップウィンドウ（表示）
- 2. [Angular] Directiveでリアクティブフォームの値を操作する
- 3. アドベントカレンダーを作れるアプリを作ってみた【Vue.js×Firebase】
- 4. 開発初心者でもできるFitbit Clock Faceの作り方
- 5. 入門者もプロもJAMスタックからはじめよう！
- 6. 初心者によるプログラミング学習ログ 252日目
- 7. ワイの正規表現入門
- 8. ES2016とES2017で追加された機能について
- 9. JavascriptのテストフレームワークJestを導入して、非同期関数をテストする
- 10. RPGツクールMV プラグイン作成入門 (1) 簡単なプラグインを作成してみる
- 11. GitHub にコード整形してもらおう – GitHub Actions でコード整形&コミット
- 12. gonを使ってJavaScriptでRailsの環境変数を使用する
- 13. Nuxt.jsのpluginsにaxiosの共通部品を実装する
- 14. やってみよう!GAS入門
- 15. 【最新版】Tinderで自動右スワイプできなくなった難民を救うコード
- 16. webpack & node-sass & eslintでシンプルなフロント開発環境構築
- 17. Vuexのデータフローを理解して使ってみる
- 18. (自分用)debounceとthrottleをasync/awaitでシンプルに作成してみたサンプル
- 19. VueとCSSとTypeScriptでシューティングゲーム「ネコメザシアタック2020」を作ったのでソースと解説
- 20. AndroidをBLEペリフェラルにしよう
ポップアップウィンドウ（表示）
#はじめに
JavaScript（jQueryで記述）を使って、ボタンをクリックするとポップアップウィンドウが表示されるようにします。
#実行
hamlは次のものを用意します。“`haml:sample.haml.html
.btn
ボタン
.pop
“``.btn`をクリックすると`.pop`にオブジェクトが作成されるようにします。
“`javascript:sample.js
$(function(){
$(“.btn”).on(“click” functon(){
let html = ``
$(“.window”).append(html):
})
});
“`このままだと何も表示されないので、CSSを指定します。
“`sass:sample.scss
.pop{
&__window{
width: 500px;
height: 500px;
background-color: 500px;
}
}
“`こ
[Angular] Directiveでリアクティブフォームの値を操作する
Directiveの中でリアクティブフォームを操作したい場面があると思います。
そんな時は`NgControl`をDIすればアクセスできます。## 例
“`html
アドベントカレンダーを作れるアプリを作ってみた【Vue.js×Firebase】
この記事は[株式会社クロノス](https://www.kronos.jp/)の「~2020年春~勝手にやりますアドベントカレンダー」のリレー記事です。
[こちら](https://qiita.com/organizations/kronos-jp)のメンバーでリレーを回します。
（株式会社クロノスのFacebookは[こちら](https://www.facebook.com/kronosjp/)から）「~2020年春~勝手にやりますアドベントカレンダー」インデックスは[こちら](https://qiita.com/beeeyan/items/342d51fa301bcf81e9c0)（そのうち公開されるはず・・・随時更新）
# ということで本題
トップバッターを担当します、maroKanataniです。
上述の通り、会社でアドベントカレンダーやろうって話になったので
流れに乗ってアドベントカレンダーを作れるアプリを作ってみました。
技術の話も含めて公開までの手順等をまとめておきます。アプリは以下のリンクから使えます。
[アドベントカレンダーツクール](https://ad
開発初心者でもできるFitbit Clock Faceの作り方
# はじめに
某研究室においてfitbit Ionicを使っていたのですが、新発売されたVersa2に最近乗り換えました。
fitbitの時計盤は心拍数や歩数などを表示でき、ストアから様々なものをイントールできます。
筆者はデジタル時計はなぜか苦手で、アナログ表記でないと時間の感覚が掴みづらいのに加え、シンプルなデザインを求めていました。
しかし、いざ探してみると、デジタル盤やデザインがごちゃごちゃしているものが多く、求めている自分好みのシンプルな時計盤がなかなかない、、そこで、ストアにないなら自分で作ろう、ということで開発初心者なりに作ってみました。
日本語の記事はまだまだ少ないのでなるべく丁寧に書いていこうと思います。
fitbitの公式サイトは[こちら](https://www.fitbit.com/jp/home)## 目的の時計盤
– シンプルなアナログ時計
– 心拍数、歩数、バッテリー、日付、曜日を表示
– 上記情報をタッチで隠せるこれを目標に作っていきます。
# 開発準備
[Getting Started](https://dev.f
入門者もプロもJAMスタックからはじめよう！
## JAMスタックとは何か
JAMスタックの[公式サイト](https://jamstack.org/)によると、ビルドが自動か手動か、もしくはフレームワークがNext, Gatsby, Hugoどの種類でも共通しているのはサーバーに依存しないということであると説明されています。ではではJAMの頭文字について説明していきます。
#### Javascript
上記で「サーバーに依存」しないため、メイン使用することになるのはフロントエンドで大活躍しているJavascriptです。Angular, React, Vueなどのフレームワークやライブラリを使用したものももちろん含まれます。#### API
全てのサーバーサイドの処理やデータベースアクションは再利用可能なAPIとして抽象化されており、JavaScriptによるHTTPS経由でアクセスされます。#### Markup
デプロイ時に静的サイトの生成ツールやアプリケーションのビルドツールによって事前にビルドされていなければい。## JAMスタックを始めるのは難しいか？
これまで技術構成を表す用語として下記のようなもの
初心者によるプログラミング学習ログ 252日目
#100日チャレンジの252日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
252日目は、おはようございます
252日目
・youtubeで、JSのミニアプリ模写#早起きチャレンジワイの正規表現入門# とあるWeb制作会社にて
ワイ「社長、こないだ頼まれたショッピングサイトの件なんですけど」
ワイ「**ご注文フォーム**のコーディング、完了しましたで！」社長「おお、ありがとうな」
ワイ「ほな、飲みに行ってきますわ！」
社長「・・・**いや待てや**（まだ**15時**やし）」
社長「何やこのフォーム」ワイ「何ですかいな」
ワイ「デザイン通り、完璧にコーディングできてますやん」社長「いや**バリデーション**が全くされとらへんがな」
ワイ「**グラデュエーション？**」
ワイ「何を**卒業**するんでっか」社長「**バリデーション**や」
社長「貴様をこの会社から**卒業させたろか**」# バリデーションとは
社長「バリデーションちゅうのは、**不正な値**やないかどうか確認することや」
社長「例えば**数値**を入力してほしいフォームに、**文字列**を入力して送信されても困るやろ？」
社長「そういうのをちゃんとチェックするのが**フォームバリデーション**や」ワイ「あ、ああ・・・そっちのバリデーションでっか」
社長「お前の作ったこのフォームを
ES2016とES2017で追加された機能について
# はじめに
[JavaScript:Everything you need to know From ES2016 to ES2019](https://inspiredwebdev.com/everything-from-es-2016-to-es-2019)を読み、本稿ではES2016とES2017 で追加された機能について、わかったことをまとめてみます。
# ES2016導入された機能
* `Array.prototype.includes()`
* べき乗演算子## `Array.prototype.includes()`
#### 構文説明
`includes(要素数, インデックス)`メソッドは、Arrayオブジェクトの、組み込みメソッド。
第1引数で指定した要素が含まれる場合は`true`、含まれない場合は`false`を返します。
第2引数を指定することで、指定したインデックスから要素を検索します。“`JavaScript
let array = [1,2,3,4,5]array.includes(2)//true
array.includ
JavascriptのテストフレームワークJestを導入して、非同期関数をテストする
Javascriptのテスト用ツールには、MochaやChaiなどいろいろあります。
今回は多様なテストツールの中でも、Facebook製の**jest**というフレームワークを導入して使ってみます。## jestとは
Jest · ?快適なJavaScriptのテスト
https://jestjs.io/ja/>Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
>It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
Jestはシンプルで、Babel、Typescript、Node、React、Angular、Vueなどに対応しています。
## 前提
今回はTypescriptプロジェクトにjestをインストールする想定です。
## 導入手順
Getting Started · Jest
https://jestjs.io/docs/ja/g
RPGツクールMV プラグイン作成入門 (1) 簡単なプラグインを作成してみる
RPGツクールMV で利用できるプラグインは、JS (JavaScript) ベースで Game Scripting System (JGSS) 環境上で動作します。これは JS 基本知識がある方が対象のプラグイン作成の入門資料っぽい何か、です。
4年ほど前に [jgss-hack リポジトリ](https://github.com/yamachan/jgss-hack) で公開した内容をもとに、今の環境用にリライトしてみました。
## プラグインファイルの構成
以下は僕が良く使っているプラグインの元ファイル (スケルトン) です。
“`javascript:RTK_Test.js
//=============================================================================
// RTK_Test.js 2016/07/30
// The MIT License (MIT)
//==================================================================
GitHub にコード整形してもらおう – GitHub Actions でコード整形&コミット
コード整形していますか？
複数人数でコードを書いていたりするとエディターの設定によってインデントの幅が違ったり、改行の位置が違ったりして困ってしまうことってありませんか？
GitHub Actions を利用すると、コードをプッシュしたときに自動的にコードを整形するワークフローが構築できます。
Git Commit -> Push -> GitHub Actions でコード整形 -> 整形コミットを GitHub にコミット&プッシュ
本記事は GitHub Actions を用いた自動コード整形環境の構築方法を紹介します。
## 今回の紹介ツール
– Prettier ( JavaScript 整形ツール )
– GitHub Actions
– stefanzweifel/git-auto-commit-action## Prettier
[Prettier](https://prettier.io/) とは JavaScript や HTML, CSS を自動整形してくれるツールです。
自分は JavaScript ( TypeScript ) をよく記述
gonを使ってJavaScriptでRailsの環境変数を使用する
##概要
Railsアプリケーションを作成時、
dotenv-railsを使って.envファイルに環境変数を書き込んだのですが
JSファイルではそのまま使用することができず、gonというGemを使用するとJSと連携ができるとのことだったので備忘録としてまとめてみます。（間違いや改善点があればご教示いただけますと幸いです！）
##Gemをインストール
“` Gemfile.
gem ‘dotenv-rails’
gem ‘gon’
“`bundle installを実行
##.envファイルを作成
appファイル直下に作成して、環境変数を記述します“`
MY_PRIVATE_KEY = ‘************’
“`##Rails側の呼び出し
（JSファイルのみでの使用であればなくてOK）“`
def new
my_private_key = ENV[“MY_PRIVATE_KEY”]
end
“`##JSファイルへの連携
“`
def new
gon.my_private_key = ENV[‘MY_PRI
Nuxt.jsのpluginsにaxiosの共通部品を実装する
# はじめに
Nuxt.jsにてクライアントサイドのvueからサーバのREST APIを呼び出す際に、vue内のスクリプトにロジックを書くと、他の場所で流用できない。そのため、外部のjsに共通ロジックとしてサーバのAPIを呼び出す処理を記述したかったが、あまり良い例が無かったので、検討&実装してみた（正しいかは不明）
Vuexストア内でaxiosを使ってサーバAPIを呼び出すみたなことをやってる人も居たけど、それはちょっと違うだろう（というか気持ち悪い）ということで、pluginsに共通ロジックを作成することにした。## 構成
修正する対象は以下の3ファイル（pages/index.vue , plugins/axios.js , plugins/api.js）“`
ROOT
├─.nuxt
├─assets
├─components
├─layouts
├─middleware
├─pages
│ index.vue
├─plugins
│ api.js
│ axios.js
├─server
├─static
├─s
やってみよう!GAS入門
##GASとは
GASとは、GoogleAppsScriptというJavascriptをベースに開発された言語です。
特徴としては、サーバーサイドで実行できる点と、Googleのサービスと連携できる点が挙げられます。
今回の記事では、GASを用いてスプレッドシートの操作をやってみます。##GASの編集画面を開こう
まずはGoogleドライブにアクセスし、スプレッドシートを開きましょう。
[ツール]→[スクリプトエディタ]をクリックすれば以下のような画面が表示されると思います。
### 『一度LIKEを手動でクリックしてから』
F12でDeveloper Toolを開き、下記のコードをConsoleにコピペしてEnterを叩けば新たな出会いが開かれるでしょう。
ブラウザを更新しなければ、検索距離や年齢等の条件を変更も可能で、再度の手動クリックは不要です。
“`JavaScript:Tinder.js
count =
webpack & node-sass & eslintでシンプルなフロント開発環境構築
## 目的
– Web Frameworkで使うことを前提として`ES6`, `Sass`をトランスパイルする。
– フロント開発に必要な人権を満たす開発環境を作る。## 指針
– フロントエンドを`create-react-app`, `vue-cli`などのツールに頼らずに０ベースで作る。
-> 拡張性の問題(変な依存、余計な設定を盛り込みたくない。cli使っても結局Document読むから面倒臭い)
– 多人数の開発チームを想定して構築する。
– シンプルが正義。## 経緯
`Spring boot`で個人開発していたが、やっぱりプレーンJSは書きたくなかった。
それと今まで`create-react-app`でごちゃごちゃやっていたので、1からフロント環境を設定したかった。
著者は執筆時点で実務1年ちょいのフロント知識浅めなペーペーなのでマサカリお願いします。## 要件・設計
– `yarn build`コマンドでjsのバンドルファイルとScssのトランスパイル結果をデプロイ先のフォルダに配置する。
– `yarn dev`コマンドでJS, cssのホットリローディ
Vuexのデータフローを理解して使ってみる
Vuexを勉強して、何となく理解できた気がするのでここらでまとめておきます。
#Vuexとは?
Vuexは、Vue.jsの状態管理用ライブラリです。
Vue.jsには、propsという、親テンプレートから子テンプレートへ値を渡すことができる機能が備わっていますが、孫要素やそれよりもさらに下の要素が増えていくと、propsを連鎖させることになってしまい、開発効率が落ちてしまったり管理が大変になるというデメリットがあります。それを解決してくれるのがVuexです。Vuexをプロジェクトに導入することで、それぞれのコンポーネントは同じ値をVuexのストア内で共有することになるので、必要な時にストアから値を取得するだけでその値を使うことができるようになります。
一般的には中規模以上から使われ始めるようですが、ある程度プロジェクトができあがってから導入するのは移行が面倒なので、規模が大きくなる見込みがあるのなら使った方がよさそうです。
#Vuexのデータフローについて
Vuexは、大きく分けて3つの要素から成り立っています。Actions、Mutations、Stateです。
Action
(自分用)debounceとthrottleをasync/awaitでシンプルに作成してみたサンプル
**※自分で試してみた感じでは良さそうだったのですが、おかしい部分があるかもしれません、その時は教えていただければありがたいです。**
追記
すみません、throttleの方が間違っていたので、また考え直して追記します:bow:“`js
function debounce(callback, wait) {
let lastRunTimestamp;
return async () => {
lastRunTimestamp = Date.now();await new Promise(resolve => setTimeout(resolve, wait));
if (Date.now() – lastRunTimestamp >= wait) {
callback();
}
};
}
“`VueとCSSとTypeScriptでシューティングゲーム「ネコメザシアタック2020」を作ったのでソースと解説
こんにちは:cat: 今日は2/22の猫の日に合わせて個人開発したゲーム「ネコメザシアタック」の技術的なポイントを解説する記事です。[去年のバージョンはこちら](https://qiita.com/yuneco/items/34daf063075d03c4eede)
## 作ったもの
ソース： https://github.com/yuneco/mezashi2
アプリ： https://nekomzs2.web.app/
（PCでも遊べるけどスマホ推薦です）### 使っている技術
そろそろリリース見込みのVue3を先取りした構成です– Vue(Vue2 + CompositionAPI)
– TypeScript
– CSS Transition（ほとんどのアニメーション）
– SVG（画像 + 一部
AndroidをBLEペリフェラルにしよう
AndroidのAPIを使ってアプリを作成してスマホをBLEペリフェラルにして、PCのブラウザからBLEでつないでみます。
Androidのスマホには、豊富なハードウェアやネットワーク機能がありますので、これがあれば、同じWiFiアクセスポイントにつながなくても、PCのブラウザからBLEでつないでみることができます。#Android
(i) BLEアダプタの取得
“`java
mBleManager = (BluetoothManager) getSystemService(Context.BLUETOOTH_SERVICE);
mBleAdapter = mBleManager.getAdapter();
“`(ii) GATTサーバの作成
“`java
mBtGattServer = mBleManager.openGattServer(this, mGattServerCallback);
“`mGattServerCallback は、BLEセントラルからの接続が完了したときや、ATT Read/Wri
