- 1. cssうんちをストーカーさせてみた
- 2. forの中で非同期処理関数の引数に変数iをもたせたいとき
- 3. DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#5 (最終回) 〜GoogleMapタイムラインデータの組み込み〜
- 4. obnizのBLEでペリフェラルを探す
- 5. Cypressのガチ運用作戦
- 6. 超安価&超簡単にウェブサイト運用しよう。CircleCIで、GitHubプッシュ→自動でビルド→S3に自動デプロイ
- 7. [React]Slack風の絵文字ライブラリEmojiMartの使い方
- 8. ギャザをドローするクソアプリを作りました
- 9. ESLintのセットアップ方法(Mac)
- 10. Web Componentとは～
- 11. remote-jsでcommon Lispからjavascriptを送信
- 12. Vueで日本全国ダーツの旅的なものを作ってみた
- 13. DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#4 〜Mapコンポーネントの表示〜
- 14. selectを使わず、datalistで複数選択を頑張ってつける
- 15. github-pageにReact appをデプロイしてみた
- 16. “console.log()” はもうやめて、ブラウザデバッガーを使い始めよう
- 17. GeoChart (Google Chart Tools)で世界を細かく塗りつぶそう
- 18. これから学ぶ言語についてのまとめ
- 19. ローグライクゲームを作ってみるその6 ゲームメッセージとプレイヤーのステータス
- 20. 年末まで毎日webサイトを作り続ける大学生 〜62日目 インベーダーゲーム 当たり判定の完成!〜
cssうんちをストーカーさせてみた
# マウスストーカー
マウスに追従するようなアニメーションのことをマウスストーカーというらしい。
というわけでうんち追従させてやんよ?
単純にマウスカーソルを?画像にするのは面白くないので、そこは違う形で実装するぞ！# Let’s Try
↓画面内でマウスを動かしてみよう！See the Pen forの中で非同期処理関数の引数に変数iをもたせたいとき
# forの変数iを非同期処理の関数の引数として渡したい
## 問題のコード
なんのこっちゃという見出しですが、まずはこちらを見てください。
“`javascript:script.js
tokumei()
.then(function () { // 成功にたどりかない&失敗にもいかない
console.log(‘成功’);
}, function () {
console.log(‘失敗’);
});function tokumei () {
var paramList = [];
var d = new $.Deferred();// paramListになにがしかをpushする処理（中略）
for (var i = 0; i < paramList.length; i++) { ajaxFunc(paramList[i]) // ajax関数の呼び出し .then(function () { if (paramList.length === i + 1) d
DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#5 (最終回) 〜GoogleMapタイムラインデータの組み込み〜
[前回](https://qiita.com/koeri3/items/b1ff402f356a4821f637)に引き続き、DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第５弾の記事です。
今回でこのシリーズは最終回です！[前回](https://qiita.com/koeri3/items/b1ff402f356a4821f637)はDeckGLにマップコンポーネントを組み込んだものをブラウザで確認できました。
とは言ってもまだダミーデータの表示しかできていないので、今回は実際にタイムラインデータを表示したいと思います。# Google Mapタイムラインデータのダウンロード
まず始めに、GoogleMapからタイムラインデータをダウンロードしましょう！## Google Mapにアクセス
まずGoogle Mapにアクセスします。
左上のメニューアイコンをクリックすると下記のメニューが表示されるので、`Your timeline(タイムライン)`をクリックしましょう。
※Googleにログインしてから実施してください
 2019の20日目の記事です。> _この記事は映画観すぎて現実と映画の堺にさまよったエンジニアの記録なので一部妄想が含まれている_
Cypressを日々の任務に組み込んでみて得た苦しみ、痛み、ストレス、達成感などを書いていきます。
Cypressの導入や使い方は[以前の記事](https://qiita.com/sinpaout/items/4313ed75e603508696b1)を参照してください。> 最近また観た[プライベート・ライアン](https://eiga.com/movie/48770/) も最高の作品だ
の16日目の記事です(体調崩していたため遅くなってしまいました。すみません。。)
## 概要
– Slackなどでよく見かけるこのような絵文字は皆さんご存知かと思います
– これを自分の開発するReactアプリに取り入れたくて調べてみたところ[Emoji Mart](https://github.com/missive/emoji-mart)というライブラリがありました
– 日本語で使い方を説明する記事がほとんどなかったので紹介したいと思います
– ちなみにEmoji Ma
ギャザをドローするクソアプリを作りました
[クソアプリ2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kuso-app2)の20日目の記事です。
# 作ったもの
**Barcode The Gathering**
https://barcode-the-gathering.appspot.com/
バーコード（QRではない、商品についてる一次元バーコード）から、ギャザのカードを生成できます。
簡単な創作ルールでランダム対戦も行えます。# なんで？
皆さんは[Magic:TheGathering](https://mtg-jp.com/)®︎[^1]（略称 ギャザ）をご存知だろうか。
[^1]: 当記事はファンコンテンツ・ポリシーに沿った非公式のファンコンテンツです。 ウィザーズ
ESLintのセットアップ方法(Mac)
## 「ESLint」とは？
ECMAScriptやJavaScriptのコードで見つかったパターンを識別および報告するためのツールです。
TypeScriptでも使えます。## 環境
– OS：macOS Catalina 10.15
– Node.js：v12.14.0
– npm：6.13.4
– ESLint：v6.7.2## 前提条件
– Node.jsプロジェクトを作成している
## セットアップ
### ESLintのインストール
npmでインストールします。
“`shell-session
$ npm install –save-dev eslint
“`リントは開発時のみ使うため、 `–save-dev` オプションを付けています。
### 設定ファイルの作成
`eslint –init` コマンドを実行し、ウィザードに沿って設定ファイルを作成します。
“`shell-session
$ npx eslint –init
“`“`shell-session:ESLintをどのように使いますか？
? How woul
Web Componentとは～
# はじめに
Web Componentについて、今理解している範囲で書きます。仕事ではまだ使う機会がなく、勉強の目的でネットに調べて色々作って遊んでいるレベルです。間違いなどありましたらご指摘頂ければ幸いです。## Web Componentとは
Webコンポーネントとは、HTMLの要素を**カプセル化して再利用可能なパーツにする**ためのインタフェースです。(パーツ=Component)[公式サイト](https://www.webcomponents.org/introduction)にはとても分かりやすく書いてあります。
>Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work
remote-jsでcommon Lispからjavascriptを送信
本記事は[Lisp Advent Calendar 2019](https://qiita.com/advent-calendar/2019/lisp) 19日目の記事です。
***遅刻しましたすいません！！！***
前々から気になっていたremote-jsを使ってみました。もっと色々したかったのですが、時間の都合で動かしてみただけになってしまいました。# remote-js
[remote-js](https://github.com/ceramic/remote-js)はcommon Lispからevalでブラウザに対してjavascriptのコードを送信することができます。## 動かしてみた
– ubuntu18.04
– roswell 19.09.12.102“`bash:インストール
ros install remote-js
“`“`common-lisp
(ql:quickload :remote-js)
“`
“`common-lisp
(defvar context (remote-j
Vueで日本全国ダーツの旅的なものを作ってみた
[テックタッチアドベントカレンダー](https://qiita.com/advent-calendar/2019/techtouch)19日目を担当する@kosyです。
18日目は @92thunder による [Vuex × TypeScriptにvuex-smart-moduleを選んだ理由](https://qiita.com/92thunder/items/1afe1ee67dcf4d693faf) でした。
vuex-smart-moduleがどう良いのかわかる内容で理解が深まりました。型に苦しめられた過去があるからこそ今の成長があるわけですね。
vuex-smart-moduleに即決定したスピード感、さすがテックタッチ。## はじめに
日本全国ダーツの旅みたいな感じでランダムに市区町村出してくれるサイトを作りました。
場所だけじゃなく、おすすめ観光スポットも表示されます。
エンジニアに転職した今年4月当初に作ろうとしましたが、何をどうすれば良いのか全くわからず結局何も作れないまま終わりました。９ヶ月経った今なら作れる！ということで作ってみました。
ぜひ遊んでみてく
DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#4 〜Mapコンポーネントの表示〜
DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第４弾の記事です。
[前回](https://qiita.com/koeri3/items/c4c92408cf7aa0d54b7c)はDECK.GLのPathLayerを使って、データの描画を行いました。
今回はこれにマップコンポーネントを組み込んで表示させてみたいと思います。## 前回のおさらい
[前回](https://qiita.com/koeri3/items/c4c92408cf7aa0d54b7c)は、App.jsx に下記のコードを書きました。“`jsx:App.js
import React from “react”;
import DeckGL from “@deck.gl/react”;
import { PathLayer } from “@deck.gl/layers”;// Viewport 初期設定
const viewState = {
longitude: -122.5,
latitude: 37.75,
zoom: 11
};// 描画す
selectを使わず、datalistで複数選択を頑張ってつける
##そもそもの理由
サジェスト機能付きで、単一と複数選択を実装する必要があった。（プラグインは使っていいのかわからない。つかえたらselect2を使うのが良い）
##一般的サジェスト
HTML5タグリファレンス引用より、一般的なデータリストの使い方“`
“`http://www.htmq.com/html5/datalist.shtml
ここのinputタグにmultipleをつけて、複数選択できればいいのだが、単一選択しかできない
##方法１（JavaScriptで実装する）
separatorに指定した文字を入力した際に、次の選択候補が出るように実装
ただ、中身のoptionが増えるとすごくパフォーマンスが悪い（リスト再生成して
github-pageにReact appをデプロイしてみた
## はじめに
Reactを勉強する上でGithub pageでReactアプリを公開できるのか気になったのがきっかけです。
> GitHub Pagesについて
> GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
> [GitHub 公式ヘルプ]https://help.github.com/ja/github/working-with-github-pages/about-github-pages## 参考にしたサイト
– GitHub PagesにReactアプリをデプロイする方法
https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf
– React公式(INSTALLATION>新しいReactアプリを作る)
https://ja.reactjs.org/docs/create-a-new-react-app.htm
“console.log()” はもうやめて、ブラウザデバッガーを使い始めよう
>こちらの記事は、[Parag Zaveri](https://medium.com/@parag.g.zaveri) 氏により2018年10月に公開された『 [How to stop using console.log() and start using your browser’s debugger](https://medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。ソフトウェア開発者になる道を進み始めたとき、私も他の人と同じように、いくつかの困難にぶつかりました。中でも、新人開発者が直面する最も一般的な苦闘の1つは「デバッグ」です。Chrome でコンソールを開き、”console.log()”で値を取り出せば、バグの所在を見つけられることに気づいたとき、最初は聖杯を発見したと思いましたが、後で非常に効率が悪いことに気がつきました。笑い話と
GeoChart (Google Chart Tools)で世界を細かく塗りつぶそう
こんにちわ。Patheeの廣瀬です
世界の行ったところを塗りつぶすサービス`ExplorState`を、
`GeoChart(Google Chart Tools)`を使って作ってみました今回はこのサービス作成の際に得られたGeoChartのTipsなどを紹介していきます
## [ExplorState](https://explorstate.makoll.com/) is 何
[私の訪問履歴](https://explorstate.makoll.com/?records=IIVQXAigMgIgNANQJIGEDcLhgPIDkO5gCsAjGgKIDKYwucKAKmkg2AExFwDMALHAGxs0AKQAKYAAwk4EtjK4y+EzhP4yA7DIAcMgJxwSEg9JJySCknxKcS+tkbbS2ctgrZ8OcNm
これから学ぶ言語についてのまとめ
#これから学ぶ言語について
**これからプログラミングを学ぶにあたり、HTML,CSS,Javascript,Ruby,Ruby on Railsの５つの言語について調べてみました。**
（間違いがございましたらご指摘頂けますと幸いです！）##HTML
**Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）**– Webページを作るための最も基本的な**マークアップ言語**のひとつです。
– Webページの文書構造を形作るための言語で、普段観ているWebページのほとんどが、HTMLで作られています。
– Hyper Text（ハイパーテキスト）とは、ハイパーリンクを埋め込むことができる高機能なテキストです。
– HTMLにはハイパーリンク機能で関連する情報同士を結びつけて情報を整理するという特徴があります。
– Markup（マークアップ）とは文書の各部分が、どのような役割を持っているのかを示すということです。
– コンピュータに理解できるように文書の構造を定義することが、HTMLの最も重要な役割で、
この際目印を
ローグライクゲームを作ってみるその6 ゲームメッセージとプレイヤーのステータス
### 過去記事一覧
* [その1 タイトル画面](https://qiita.com/pizyumi/items/3526fddd4f18a462e1ae)
* [その2 ダンジョン・プレイヤーの生成と描画](https://qiita.com/pizyumi/items/2562a159f497a608615b)
* [その3 プレイヤーの移動](https://qiita.com/pizyumi/items/07447c9a1a52b0d9a228)
* [その4 ダンジョンのランダム生成](https://qiita.com/pizyumi/items/0e847f5798ba2ac7a61b)
* [その5 ダンジョンのサイズ](https://qiita.com/pizyumi/items/5f1c4848a96854c5cbfe)現在のコードについては前回の記事の最後の項を参照してください。
### ゲームメッセージ
今回は初めにゲームメッセージを出力する機能を実装します。
ゲームメッセージはゲーム画面の右下の部分に描画することにします。
まず、ゲームメッセ
年末まで毎日webサイトを作り続ける大学生 〜62日目 インベーダーゲーム 当たり判定の完成!〜
##はじめに
こんにちは！@70days_jsです。55日目,61日目にインベーダーゲームを作ろうとしてできませんでした。
それが、ついに、今日！
一応完成しました！とはいえ、ビームを出したら敵が消えて、敵が下まで到達するとゲームオーバーになるというシンプルゲームです。
バグ検証はしていないので、もしかしたら変な動作をするところがあるかもしれません。
あらかじめご了承ください。62日目。(2019/12/19)
よろしくお願いします。##サイトURL
https://sin2cos21.github.io/day62.html##やったこと
インベーダーゲームがついに完成しました。（gif)↓
コードは昨日の記事([年末まで毎日webサイトを作り続ける大学生 〜61日目 インベーダーゲームのリベンジ〜](https://q
