- 1. axiosライブラリを使ったHTTP通信
- 2. SuperAgentで画像送信などのTips
- 3. タイマーアプリを作ってみた
- 4. Lighthouseの計測結果を見ていく
- 5. new Array と Array.of()
- 6. JavaScriptでclass構文を使ってみた
- 7. フロントエンドでデータの検索機能を実装する
- 8. jQueryで実装するページトップへ戻るボタン
- 9. クリスマスカードを作って祝いたい、three.js使いたい。
- 10. データサイエンティストをダメにする(かもしれない)簡単なjupyter notebook拡張機能を作ってみましたので紹介
- 11. PlayCanvasでサンディちゃんを歩かせるゲームを作るぞ☆（第２回）
- 12. Javascriptレシピ⑧
- 13. PlayCanvasでサンディちゃんを歩かせるゲームを作るぞ☆（第１回）
- 14. kintoneカスタマイズ基礎-部品集-
- 15. javascriptでdeepcopyのようなことをやってみる
- 16. Code Chrysalis Culture!!
- 17. React.js (TypeScript) + Voximplantで動画アプリを作る
- 18. 年末まで毎日webサイトを作り続ける大学生 〜68日目 オブジェクト指向と綺麗な円〜
- 19. Google広告スクリプトを使って自動でリスティング開始・停止させる
- 20. XStateで状態遷移を共通言語にしよう
axiosライブラリを使ったHTTP通信
# axios とは
**HTTP通信を簡単に行うことができるJavascriptライブラリ**### GET通信を行う
“`index.js
// GET通信
axios.get(‘http://localhost:3000/users’)
// thenで成功した場合の処理をかける
.then(response => {
console.log(‘status:’, response.status); // 200
console.log(‘body:’, response.data); // response body.// catchでエラー時の挙動を定義する
}).catch(err => {
console.log(‘err:’, err);
});
“`また、以下のようにaxiosにconfigオブジェクトを渡す形でも、`GET通信`を行うことができます。
“`index.js
// configオブジェクトを使ったGET通信の例
axios(
SuperAgentで画像送信などのTips
# 記事の内容
AxiosではなくSuperAgentの使うことになりました
その際に画像の送信でなど詰まったので方法やTipsをまとめます# SuperAgentとは
ブラウザやNode.jsで動作するajax APIです
基本的な使い方などは一番下に資料をまとめたので参考にしてください# 画像などを送信したい時
### 使い方
“`
import request from ‘superagent’;
request
.post(url)
.field(‘name’, ‘Image Name’)
.attach(‘image’,file)“`
### 注意点
1. `.send()`は使えないので`.attach()`と`.field()`を使いましょう
2. `Content-Type`は使わない(正しいtypeをセットしてくれます)> To send a file use .attach(name, [file], [options]). You can attach multiple files by calling .attach
タイマーアプリを作ってみた
##このアプリを作った経緯
このアプリは私がプログラミングの学習をはじめて最初にアウトプットとして作ったものになります。
自分は時間を忘れて没頭する癖があるので抑止力として作りました。
まぁタイマーアプリなんて山ほどあるのでタイマーの説明は省きます（おい
というわけでとりあえず本題に入りましょう。
##本題
コードは[github](https://github.com/haplus-stu/Timer)に公開しています。すぐに利用できるものは[こちら](https://haplus-stu.github.io/Timer/)にあります
このタイマーはスタートを押すと休憩ボタンが押せなくなりますがこれは仕様です。理由としては
・スタート中に休憩を押せないようにして集中するしかない状態を少しでも作りたかったから
この一点に尽きます。
このコードで自分が力を入れた部分は値の取得部分です。
自分は時間の設定のためにinputタグを使っています。その要素を取得するためには“`javascript
document.timer.elements[].value
“`というコードを集中
Lighthouseの計測結果を見ていく
Google Chrome 60からデベロッパーツールのAuditsタブからLighthouseが簡単に実行できるようになっているので使い方を見ていく。
## Lighthouseとは
Lighthouseとはウェブページの品質改善の指針を「パフォーマンス」、「PWA」、「アクセシビリティ」、「ベストプラクティス」、「SEO」点でチェックしてくれるツール。Chrome拡張やコマンドラインで提供されていましたが、Google Chrome 60でデベロッパーツールに統合された。
また、オンラインでチェックしてくれるツール[Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)も、分析エンジンにLighthouseを採用するようになりました。とは言っても全く同じ結果とはならなくて、[Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)の判定の方が低い場合が多いよ
new Array と Array.of()
# new Array
引数が1つのとき、長さ引数個の空配列を生成する仕様…
“`js
new Array // []
new Array(3) // [undefined, undefined, undefined]
new Array(1, 2) // [1, 2]
“`# Array.of()
引数が1の場合があるときは、[]もしくはArray.of()を使う。
“`js
Array.of() // []
Array.of(3) // [3]
Array.of(1, 2, 3) // [1, 2, 3]
“`
JavaScriptでclass構文を使ってみた
# はじめに
今作っている3D RPGを管理するためにクラス化して管理したくなって、ちょっと調べてみた。
で、privateメソッドとかできるのかな？と調べてみても、private 変数は宣言できてもメソッドはできないらしい。その辺も踏まえてちょっと試してみた。
ちなみに、ECMAScript 2015(ES6)で導入された機能らしい。
Windows10のIE11でエラーになったので、IEでは動かない。
Edgeはclass構文は問題なし。
private変数が使えなかった。
まぁ、Edgeに関してはChromiumベースになったら状況変わりそうだけど。
Appleはしらん。
ちなみにprivate fieldはいつ策定されたのかよくわからない・・・## class
JavaScriptでclassはこんな感じで書ける。“`javascript
class Main{
constructor(){
}
}
“`とってもシンプル。
constructor()はなくても動作する模様。## 変数の宣言
さて、変数の宣言はこんな感じ。
“`javas
フロントエンドでデータの検索機能を実装する
:christmas_tree: Happy Holiday :santa:
これはROXXアドベントカレンダー25日目の投稿です。(12時過ぎましたがクリスマス気分のうちはまだクリスマス!)業務ではサーバー (Laravel製) に対して、 フロントエンド (Nuxt.js製) からリクエストを送る構成になっています。
データ内の検索機能などは基本的にはサーバー側で処理することが多いのですが、最近フロントエンドで同機能を実装する機会がありました
フロントエンドだけで処理を行うため、処理速度は速くなり、 API へのアクセスも削減することができます?
この記事ではその実装方法について書きます。## 実装ページ (CodePen)
https://codepen.io/shohei-japan/pen/rNaweRb## 実装概要
– Vue.js
– 使用するAPI: [PokéAPI](https://pokeapi.co/)
– ポケモン情報が取れる API
– ページ作成時に API リクエストを行う
– ソート、検索をフロントエンドで処理する### 検索
jQueryで実装するページトップへ戻るボタン
jQueryでトップへ戻るボタンを実装したので備忘録として書きます。
この記事のコードをコピペすれば誰でも実装できるはず！##HTML
“`
“`
HTMLはこれだけです。デザインに応じてaタグの中身を変更しましょう。##CSS
“`
body{
background: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
height:3000px;}
.sticky_button {
bottom: 30px;
display: none;
position: fixed;
right: 20px;
z-index: 9999;
}
“`
buttonタグのclass(.sticky_button)に表示する位置を指定しています。
今回はページ全体の右下部分に表示します。
※bodyのスタイルはわかりやすいように記述してい
クリスマスカードを作って祝いたい、three.js使いたい。
みなさまいかがお過ごしでしょうか。
あっという間に今日は12月25日、つまりクリスマス
つまりアドベントカレンダー最終日です。
早かったような、遅かったような、そんな１年がもうすぐ終わろうとしています。
僕にとって入社して初めてのクリスマス＆年越しです。
そんな１年の最後は友達と呑んだくれて寝正月ならぬ飲正月を過ごそうと着々と計画をしております。
もちろんコードもたくさん書く予定です。さて、僕がこのアドベントカレンダー最終日を選んだ理由、それは
「クリスマスが１年で一番好きな日だから」
です。
誕生日とかよりも全然好きです。
なのでしっかり祝いたいのです。#どうやって祝うか
さてどうやって祝いましょう。
クリスマス感も欲しいけど、なんかJSが書きたいな、なんとなく。##そうだ、クリスマスカードを書こう
ということで個人的に、クリスマスといえばクリスマスカードなのでクリスマスカードを書くことにしました。
でも書くだけなら雑貨店とかで買ってきて、メッセージ書いて、
と面白みがありません。
なので、クリスマスカードを ”書く” ことにしました。
そして、自分の好きな飛び出す絵本的
データサイエンティストをダメにする(かもしれない)簡単なjupyter notebook拡張機能を作ってみましたので紹介
jupyter notebook Advent Calendar 2019 25日目の記事です。
プログラミング言語のカテゴリに入っているので、数日前まで存在すら気づかなかったですが、滑り込みで投稿してみました。特に最終日にふさわしいようなjupyterの真髄を伝えるといった内容ではなく、こんなの作ってみました、という自己満足な記事ですが、もし眺めていただけると幸いです。
今回は、実際のデータ分析や開発業務等で使っている、自作のjupyter notebookの拡張機能で、一応パブリックに置いているものを簡単にご紹介してみたいと思います。
#### 注意点
以下の拡張機能等を用いる場合は、自己責任でお願いいたします。また今後、何点か改良予定がありますので、以下は2019年12月25日現時点のものとなります。
また制作者はjavascriptに関して**ど**素人ですので、コード上好ましくない点や、改良点などありましたら、ご指摘いただけるとありがたいです。
## “データサイエンティストを堕落させる拡張機能”
jupyter notebookは(魔改造などして)使いこなすと
PlayCanvasでサンディちゃんを歩かせるゲームを作るぞ☆（第２回）
# こんなん作ってます。
https://playcanv.as/b/6yisdCs4/
※本解説よりも開発が進んでいることもございますのでご了承ください。# 今回の目標
前回はサンディちゃんを配置してみました。
今回はキーボードのカーソルキーで操作するところまで。# サンディを操作する。
JavaScriptで動作について書いてきます。
アセットに「src」フォルダを作成し、「ctrlSandy」というJavaScriptを作ります。（拡張子は自動でつく）
作成したJSファイルのインスペクタからEditをクリック。JSファイルの編集をします。
{
const input_message = document.getElementId(‘input_message’).value;
document.getElementById(‘out’).innerHTML = input_message.toUpperCase();“`
###FileReader
CSVや画像ファイルをブラウザから直接読み取ったりアプロード出来ます。
“`js
const text = new Blob([‘テスト’], {type:’text/plain’});
const file_reader = new FileReader();file_reaeder.onload = functi
PlayCanvasでサンディちゃんを歩かせるゲームを作るぞ☆（第１回）
# はじめに
なんとなく手を出してみたPlayCanvasが使いやすかったので、ひととおりゲームらしきものを作ってみようかと。# こんなん作ってます。
https://playcanv.as/b/6yisdCs4/
※本解説よりも開発が進んでいることもございますのでご了承ください。# PlayCanvasのいいところ
– ネットに繋がってる端末があればどこでも開発ができる。
– ブラウザアプリに限定すればUnityよりビルドが速く快適。# シーンを作る。
プロジェクトの作成は省略。とりあえず最初だし『No.0』という名前で作成。
デフォルトはこんな感じ。
豆腐がある風景。
 {
var hensu = event[“record”][“フィールドコード”][“value”];
}
“`## 2. 編集画面でレコードの値を取得する
“`js
var events = [‘app.record.create.show’,’app.record.edit.show’];
kintone.events.on(events, function(event) {
var record = event.record;
var hensu = record[‘フィールドコード’][‘value’];“`
## 3. フィールドの入力可・不可の制御
“`jskintone.events.on([‘app.record.edit.show’, ‘app.r
javascriptでdeepcopyのようなことをやってみる
#この記事でやること
pythonを触っているときにcopyを使えば二次元配列も簡単にコピーできることに感動しました。
以前にjavascriptで同じことをやろうと思ったときに詰まった経験があるので、
javascriptの二次元配列やオブジェクトの配列をコピーする方法を残しておこうと思います。#はじめに
まず、javascriptである配列を別変数に代入した場合、その変数の値を変更すると元の配列にも影響します。“`javascript:deepcopy.js
const arr1 = [0, 1, 2];
const arr2 = arr1;
arr2[0] = 5;
console.log(arr1); // [5, 1, 2]
“`このパターンでよく使われるのがこちらです。
“`javascript:deepcopy.js
// パターン1
const arr1 = [0, 1, 2];
const arr2 = [].concat(arr1);
arr2[0] = 5;
cons
Code Chrysalis Culture!!
こんにちは！最近Code Chrysalisに入社したIkuです。
今日は私が感じるCode Chrysalisのカルチャーについてお話しします。##始めに
簡単に自己紹介します。
私は現在Code Chrysalisで入学手続き関連の仕事をしており、入社したのは12月上旬です。
2年ほどIT企業で働いていましたがエンジニアとしての経験はなく、1月からFoundations（プログラミング初心者向けのコース）に参加します。
プログラミング経験が全くないので不安もありますが、とても楽しみです！##Code Chrysalisのカルチャーって？
私が感じているCode Chrysalisのカルチャーは（１）オープンであること、（２）自主的・自立していること、（３）人想いであること、です。まず（１）オープンであることですが、スタッフの皆さんは思ったことをはっきりその人に伝えます。これは日本の和を乱さない文化に反すると思いますが、相手が本当にどう思っているのか、何を自分にしてほしいのかはっきり直接教えてもらえた方が変に勘ぐることもないですし、また大人になってから正直な意見を伝えてく
React.js (TypeScript) + Voximplantで動画アプリを作る
## 0. Voximplantとは
[Voximplant](https://voximplant.com/) はロシア発のスタートアップで、VRやARを始めとした動画技術関連のCPaaS、つまりクラウドプラットフォームを独自サービスとして提供しています。
WebRTCのライブラリも充実しており、WebやモバイルからUnityのようなゲームエンジンまで、幅広い用途に対応しているのが特徴です。2019年12月現在、まだ日本語では開発方法に関する情報が少ないので、今回は、React上で簡単な動画アプリを作る方法をご紹介します。今回作るのはP2Pの動画アプリ（SDK同士の通信）なので、コストは無料です（月あたりのアクティブユーザーが1000人を超えると有料になります）。今回は、エディタに Visual Studio Codeを利用しました。
## 1. Reactの新規プロジェクトを立ち上げる
yarn と node が使える前提で、プロジェクト名は **voximplant** とします。“`
cd
ya
年末まで毎日webサイトを作り続ける大学生 〜68日目 オブジェクト指向と綺麗な円〜
##はじめに
こんにちは！@70days_jsです。
今日はオブジェクト指向で円を作りました。(gif)↓
今日は68日目。(2019/12/25)
よろしくお願いします。##サイトURL
https://sin2cos21.github.io/day68.html##やったこと
オブジェクト指向で円を作りました。html↓
“`html
“`css↓
“`css
body {
margin: 0;
}
“`JavaScript↓
“`javascript
let canvas = document.getElementById(“canvas”),
ctx = canvas.getContext
Google広告スクリプトを使って自動でリスティング開始・停止させる
#背景
Webサイトの在庫状況が、「在庫なし」のときに自動でリスティングを停止させたい。
在庫なしのときにリスティングをしても無駄な出費となるため。#大まかな仕組み
1. Google広告スクリプトを使って1時間ごとにWebサイトをスクレイピング
2. Webサイト上に「在庫なし」の文言が入っていた場合、リスティングを停止
3. 文言が入っていない場合はリスティングを開始#実装方法
##1. Google広告にログインし、「ツールと設定」→一括操作の「スクリプト」をクリック
##2. 青い+ボタンをクリックして新しいスクリプトを追加
 June 30, 2017
オブジェクトベースのUIモデリングが注目されることにより、UIからオブジェクトを抽出してオブジェクト間の関連や階層など静的な構造を考えることが広まってきました。
特にUIクラス図などは、UIに現れる要素(オブジェクト)と関係を視
