20210612のJavaScriptに関する記事は26件です。

位置情報を利用した拠点滞在ゲーム

位置情報を利用した拠点滞在ゲーム 位置情報を利用した拠点滞在ゲームを作りました これで残業が楽しくなるかもです... 最初に考えた仕様 ゲームを作成するにあたって最初に以下の仕様を考えました(ただし作成時に いくつかの仕様は変更しました) ゲーム内容 位置拠点ゲーム ー勝負についてー 攻撃順序は自分→敵の順番で交互に行う それぞれの対応する一対の攻撃ターン(自分・相手それぞれ一回の攻撃ターン後)は10分おきに更新する 勝負は途中でキャンセル(戦線離脱)できる 敵に勝利すると敵レベルに応じた乱数のコインを取得 自分、相手毎の攻撃後、毎回 勝利/敗北判定する それぞれの攻撃ごとの後、50パーセントの確率で自己ステータスの上昇あるいは相手ステータスの低下のどちらを発生させるか決める) 上昇あるいは低下が選択されたあとは後述の確率により実際に(上昇/低下)が発生するかを判定する ー以下アイテムについてー 敵はアイテムを持たない 呼び鈴ーステータス上昇確率変更アイテム 追い鈴ーステータス低下確率変更アイテム 色付き(呼び/追い)鈴は一度に0〜5個ずつまで持てる 持ち鈴はアイテム欄で選択) 対応する色付き鈴一個につきステータス(上昇/低下)時のステータス選択確率を10%を(加算/減算)する) 鈴の耐久力は0〜999)まで上げられる(耐久度を強化するのに1ptにつき5コイン) 鈴の耐久力は毎5ターン後50%の確率で持ち鈴のどれか1つの耐久力が1ptだけ下がる 各鈴の耐久力が0になった時点で効力を失う ー以下ステータスについてー 赤ー攻撃力 青ー防御力 与えるダメージーmax((自攻撃力-相防御力)、0)+乱数(1〜10) 受けるダメージー max((相攻撃力-自防御力)、0)+乱数(1〜10) 黄ーhp 緑ー回避率 紫ー命中率 攻撃ヒット判定ー 自攻撃時、min (90、max(相回避率ー自命中率、10))の%で攻撃ヒット 相手攻撃時、min(90、max(自回避率ー相命中率、10))の%で攻撃ヒット ー以下ステータス変化項目ー ステータス低下・上昇発生時、黄色が選択された場合は、 自上昇時ー乱数(1〜10)の%の自分のhp回復 自低下時ー乱数(1〜10)の%の自分のhp消費 相上昇時ー乱数(1〜10)の%の相手のhp回復 相低下時ー乱数(1〜10)の%の相手のhp消費 白ー自分のステータス上昇発生率 白銅ー相手の起こすステータス低下発生に対する抵抗率 白金ー自分のステータス上昇時の上昇数値 白銀ー相手がステータス低下を発生させたときの防御数値 ステータス低下数値ー 黒ー相手のステータス低下発生率 黒銅ー相手の起こすステータス上昇に対する抵抗率 黒金ー相手のステータス低下発生時の低下数値 黒銀ー相手がステータス上昇を発生させたときの防御数値 自ステータス上昇発生判定ー min(90、max(自上昇率ー相上昇抵抗率、5))の%でステータス上昇 相ステータス上昇発生判定ー min(90、max(相上昇率ー自上昇抵抗率、5))の%でステータス上昇))  自ステータス上昇量ー 自上昇量ー相防御上昇量+乱数(0〜10) 自ステータス低下発生判定ー min(90、max(相低下率ー自低下抵抗率、5))の%でステータス低下 相ステータス低下発生判定ー min(90、max(自低下率ー相低下抵抗率、5))の%でステータス上昇)) 相ステータス上昇発生判定ー min(90、max(相上昇率ー自上昇抵抗率、5))の%でステータス上昇))  自ステータス低下量ー max(相低下量ー自防御低下量、0)+乱数(0〜10) 相ステータス低下量ー max(自低下量ー相防御低下量、0)+乱数(0〜10) ー以下拠点についてー 各拠点は100メートル以上の間隔が必要性 コイン500に付き単色一つの色の位置拠点・黄金の泉を一つ増やせる コイン1000 につき再生の森・時戻しの砂漠を一つ増やせる コイン5000につき虹色拠点の位置拠点を1つ作れる 最初はそれぞれ一つずつだけ単色色・虹色の位置拠点・再生の森・時戻しの砂漠を設定できる 拠点は一日に一個だけ取り壊しが可能 一種類の拠点が0個となっている場合、一日に一個だけ、0コインで拠点の設置が可能 それぞれの単色の位置拠点では30分いるごとに6ptの対応するステータス上昇用経験値が得られる 黄金の泉では30分いるごとに10ゴールドのお金がもらえる 虹色の位置拠点では30分いるごとに3ptの全てのステータス上昇用経験値が得られる 各色の経験値は10ptにつき1だけ、ステータス上昇に振替できる 時戻しの砂漠では30分いるごとに選択された1ステータスが下がり(最大で1まで)、10ptの、時の砂が得られる 再生の森では30分いるごとに時の砂を10pt消費し、選択されたステータスを上昇させる ー以下敵についてー 敵はランダム動物画像 ステータスは難易度レベル毎にランダム決定 勝負に負けてもとくにペナルティはなし これ以上の追加コンテンツは他の開発者に委ねたいです githubURL サンプルページURL https://nanjomiyako.github.io/KyotenTaizai/ 参考にしたサイト Window.localStorage - Web API | MDN スクリーンショット
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Event handler

On the website if you do nothing, JavaScript wach and checks many events. *Load *Resize *Scroll Etc.
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【アルゴリズム】JavaScriptでステップ/ピラミッド問題を解く

はじめに Qiitaの競技プログラミング研究月間ということで、アルゴリズムの記事を書いています。 今回はステップ問題とピラミッド問題をまとめました。 JavaScriptでアルゴリズムの勉強をされている方の参考になれば幸いです。 記事を順次まとめていきますので、その他の記事についてはマイページからご覧ください。 ステップ 引数に整数Nを与えたときに、N段の階段状になるように'#'を出力してください。 右側の'#'が入っていない部分にはスペースをいれてください。 steps(2) '# ' '##' steps(3) '# ' '## ' '###' 解答 Row方向とColumn方向の二重ループで一行ずつ'#'を入れていく方針を考えます。 まずは空の文字列stairを用意し、Rowの値と同じ個数分'#'を入れていきます。 '#'の右側にはスペースを入れていき、Columnのループが終わったらconsole.log(stair)でその段の文字列を出力します。 console.log(stair)の出力後にrowを1つ増やし、以上と同じ処理をrow = n-1まで繰り返します。 index.js function steps(n) { for (row = 0; row < n; row++) { let stair = ''; for (column = 0; column < n; column++) { if (column <= row) { stair += '#'; } else { stair += ' '; } } console.log(stair); } } 再帰関数を使って解く方法も考えます。 関数の中に3つの分岐を作成します。 stairを更新しているときはif (stair.length <= row)の分岐に入り、stairに'#'かスペースを挿入したあとにsteps(n, row, stair)の再帰呼び出しを行います。 一行分のstairが完成したらif (n === stair.length)の分岐に入り、rowを1増やして再帰呼び出しsteps(n, row + 1)を行います。 rowが全て埋まったらif ((n = row))の分岐に入り、再帰呼び出しを終えてreturnを返します。 index.js function steps(n, row = 0, stair = '') { // 全部の行ができたらreturnを返す if ((n = row)) { return; } // 1行分のstairが完成したらここに入る if (n === stair.length) { console.log(stair); return steps(n, row + 1); } // 最初は必ずここに入る if (stair.length <= row) { stair += '#'; } else { stair += ' '; } steps(n, row, stair); } ピラミッド 引数に整数Nを与えたときに、N段のピラミッド状になるように'#'を出力してください。 両側の'#'が入っていない部分にはスペースをいれてください。 pyramid(1) '#' pyramid(2) ' # ' '###' 解答 ステップのときと同様に、まずはRowとColumnの二重ループで考えます。 各行には(2 * n - 1)個の'#'が入るため、中央の'#'の位置をconst midpoint = Math.floor((2 * n - 1) / 2)として出すことができます。 空の文字列levelを用意し、(midpoint - row <= column && midpoint + row >= column)の範囲に'#'、それ以外の部分にスペースを入れていきます。 各行に入る'#'の個数と'#'が入る位置に気をつければ、ステップのときとほとんど同じ流れで解くことができます。 index.js function pyramid(n) { // #を付与する位置を算出する const midpoint = Math.floor((2 * n - 1) / 2); for (let row = 0; row < n; row++) { let level = ''; for (let column = 0; column < 2 * (n - 1) + 1; column++) { if (midpoint - row <= column && midpoint + row >= column) { level += '#'; } else { level += ' '; } } console.log(level); } } 以下が再帰関数を使う場合です。 index.js function pyramid(n, row = 0, level = '') { if (row === n) { return; } if (level.length === 2 * n - 1) { console.log(level); return pyramid(n, row + 1); } const midpoint = Math.floor((2 * n - 1) / 2); let add; if (midpoint - row <= level.length && midpoint + row >= level.length) { add = '#'; } else { add = ' '; } pyramid(n, row, level + add); } 参考資料
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[JS]mapで配列を回す

はじめに Javascript初学者です。JavaScriptのmapを使ったので備忘録として残しておきます。 使い方 let Array = [1,2,3,4,5] let doubleArray = Array.map( value => { return value * 2 }) console.log(doubleArray); => [2,4,6,8,10] returnを省略するやり方もありそちらのほうがシンプルな見た目になります。 let Array = [1,2,3,4,5] let doubleArray = Array.map( value => value * 2 ) console.log(doubleArray); => [2,4,6,8,10] 参考
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

僕だけ知らない React Tip1 (React.Children)

//Bad case {someData.map(item =>( <div key={item.id}> hello! </div> ))} //Good case {React.Children.toArray( someData.map(item =><div> hello! </div>) )} React.Children.toArrayを利用する場合、key属性は要らなくなります。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

僕だけ知らない React Tip1 (React.Children.toArray)

//Bad case {someData.map(item =>( <div key={item.id}> hello! </div> ))} //Good case {React.Children.toArray( someData.map(item =><div> hello! </div>) )} React.Children.toArrayを利用する場合、key属性は要らなくなります。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

僕だけ知らない React Tip (React.Children.toArray)

//Bad case {someData.map(item =>( <div key={item.id}> hello! </div> ))} //Good case {React.Children.toArray( someData.map(item =><div> hello! </div>) )} React.Children.toArrayを利用する場合、key属性は要らなくなります。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

stack machineを愛でる。 その2

概要 stack machineが、好きだ。 俺仕様の命令コードです。 命令コード コード ニーモニック 動作 0x96 push "x" スタックに"x"を積む 0x21 add スタックの二番目と一番目を文字列連結 0x0a + スタックの二番目と一番目を足す 0x0b - スタックの二番目から一番目を引く 0x0d / スタックの二番目を一番目で割る 0x0c * スタックの二番目と一番目を掛ける 0x1d set スタックの二番目を変数として、一番目の値をセット 0x1c get スタックの一番目を変数として、その値をセット 0x5c ++ スタックの一番目をインクリメント 0x0e = スタックの二番目を一番目で比較 0x0f > スタックの二番目を一番目で比較 0x12 ! スタックの一番目を反転 0x9d if skip スタックの一番目が真ならskipに飛ぶ 0x99 jp loop loopに飛ぶ 0x18 int スタックの一番目を整数化 end 停止 以上。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

stack machineを愛でる。

概要 stack machineが、好きだ。 余り、実装を知らない。flashと.netくらいしか。(mindもあった。) flashは、終了したが、ruffleがあるらしい。 動的に、swfを生成して、ruffleに、食わせてみた。 サンプルコード function _arrayBufferToBase64(buffer) { var binary = ''; var bytes = new Uint8Array(buffer); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); } swf21 = [ 0x46, 0x57, 0x53, 0x04, 0xB0, 0x00, 0x00, 0x00, 0x68, 0x00, 0x10, 0x40, 0x00, 0x04, 0x10, 0x00, 0x00, 0x0C, 0x01, 0x00, 0x43, 0x02, 0x33, 0x33, 0x33, 0x3F, 0x03, 0x79, 0x00, 0x00, 0x00, 0x96, 0x03, 0x00, 0x00, 0x69, 0x00, 0x96, 0x03, 0x00, 0x00, 0x30, 0x00, 0x1d, 0x96, 0x03, 0x00, 0x00, 0x78, 0x00, 0x96, 0x03, 0x00, 0x00, 0x69, 0x00, 0x96, 0x03, 0x00, 0x00, 0x69, 0x00, 0x1c, 0x96, 0x03, 0x00, 0x00, 0x31, 0x00, 0x0a, 0x1d, 0x96, 0x04, 0x00, 0x00, 0x32, 0x39, 0x00, 0x96, 0x03, 0x00, 0x00, 0x69, 0x00, 0x1c, 0x0f, 0x12, 0x9d, 0x02, 0x00, 0xd6, 0xff, 0x96, 0x03, 0x00, 0x00, 0x69, 0x00, 0x1c, 0x1d, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x4D, 0x09, 0x01, 0x00, 0x60, 0x0A, 0x3F, 0xC0, 0x0A, 0x3F, 0xC0, 0x60, 0x08, 0x78, 0x00, 0x05, 0x01, 0x01, 0x00, 0x01, 0x00, 0x00, 0x40, 0x00 ]; function tob(url) { var bin = atob(url); var buffer = new Uint8Array(bin.length); for (var i = 0; i < bin.length; i++) { buffer[i] = bin.charCodeAt(i); } var blob = new Blob([buffer.buffer], { type : 'application/x-shockwave-flash' }); var blob_url = window.URL.createObjectURL(blob); return blob_url; } var b = _arrayBufferToBase64(swf21); var l = '" type="application/x-shockwave-flash" width="300" height="300"></embed>'; var swf = '<embed src ="' + tob(b) + l; document.write(swf); 成果物 以上。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

プログラミングは英語圏の人が圧倒的に有利、もはや卑怯なレベル

プログラマーへの道、備忘録 略歴 90年代のAppleとAdobeのDTP革命の熱に浮かされて、薬科大学を中退後、グラフィックとウェブデザインを独学し、フリーランスとしてウェブ系の仕事を5年ほどしつつ、その後はモノ作り中心のデザイナーに転身。 ITエンジニアとしてビリオネアとなったドイツ人投資家との縁で、彼の所有する外資系リゾートにて支配人として10年ほど働く。 が、コロナの厄災にて観光業が壊滅。失業状態。 非常事態宣言下のフィリピンにて巣ごもり中にITプロジェクトへのオファーと、数ヶ月の自習期間を与えられる。 20年ぶりに見るWEB開発のノウハウは、HTML、CSS、PERLでコツコツ書いていた20年前とは別世界であり、戦後からタイムスリップした様な気分で、ゼロから勉強し直さないと全くついて行けないと絶望する。 自習とは自分との戦いである。 モチベーションを保つ為と、学んだことを整理する目的で、自分の為に記事を書いていこうと思います。 プロジェクトに必要なスキルは Linux node.js express mongoDB bootstrap OAuth React この辺を復習がてら備忘録として書いていこうかな。 英語にてプログラミングを学び直した結果 90年代に主にフロントエンドのサイトデザインをしていて、動的なものを作る際に、PERLやJAVASCRIPT等をオライリー本(もちろん日本語訳)で勉強していた時は、挫折、再開を繰り返し、結局はほとんど身につかず、人のコードをコピーして少し書き直す程度で茶を濁していた訳だけど、海外の会社にて10年あまり働き、英語のソースをベースに勉強を始めた結果、わかり易すぎて目から鱗であった。 気づいたのは、プログラミングが分かりにくい大きな原因が、訳された日本語がムズすぎる問題である。 正規表現、連想配列、関数、引数、実行形式、コンパイル とかめちゃ分かりにくいし、本を開いてこういう単語がいっぱい出てきた時点で読む気失せるよね。 単語からそれがなんなのかが全くイメージできへんやん。 英語だと、その言葉のままやねん!当たり前だけど。なので、非英語圏の人は、まずその言葉がなんなのかを理解しないとしけないっていうので、大きなディスアドバンテージ。 その言葉を調べると、その言葉を説明するさらに知らない言葉が出てきて、さらにそれを調べるとさらに。。。という無限ループに陥り、挫折。 プログラミングが難しい というより、プログラミング用語を日本語訳した言葉が難しい。っていうのはあるんじゃないかと思う。 その次は、英語でのリファレンスやソース、チュートリアルの多さ。 とにかく情報量が日本語と比べて圧倒的に多い。 公式のドキュメントやチュートリアルは勿論ほぼ英語、インド人やロシア人プログラマーとかでも、情報発信は勿論英語。Youtubeでも怪しげなインド人が超わかりやすいデータベースのチュートリアルをしていたりする。 例えばnode.jsでよく使われる、エラーと返ってきたデータとを引数とするコールバックがあって、それについて調べたとき、日本語ではほとんど出てこないんだけど、英語では色々な人が解説していて、圧倒的に情報量が違う。stack overflowみたいなエンジニア系の掲示板とかも賑わってる。 つまり、英語圏のプログラマーと、非英語圏のプログラマーでは、もう圧倒的に後者不利であって、英語圏のプログラマーはチートレベル。プログラミングの能力以前に難解な日本語訳された用語との戦いがあり、ある意味それってあんまり本質的ではないよねと。 コーディングで挫折しそうな人は、自分はコーディングの才能がないのではなく、よくわからない用語がわからないだけではないかと考えて、少し英語を習ってみると良いのではないかと思います。言語はプログラミング以上に人生に役立つしね。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Node.js】https と fs で、ファイルをダウンロードする

環境 $ node -v v16.2.0 $ yarn info https version 1.0.0 $ yarn info fs version 0.0.1-security $ yarn info typescript version 4.3.2 コード 使いやすいようにPromiseを併用しています。 コードは TypeScriptなので、JavaScriptの場合は型定義を消してください。 const download = (uri: string, filename: string) => { return new Promise<void>((resolve, reject) => https .request(uri, (res) => { res .pipe(createWriteStream(filename)) .on("close", resolve) .on("error", reject); }) .end() ); }; download( "https://cdn2.bulbagarden.net/upload/thumb/8/88/006Charizard-Gigantamax.png/600px-006Charizard-Gigantamax.png", "Charizard-gmax.png" ).then(() => console.log("done")); ローカルに Charizard-gmax.png というファイルがダウンロードできているのが確認できます。 かんたんな解説 res.pipe は引数に stream.Writable オブジェクト (今回の場合は fs.createWriteStream ) を指定することで、そのオブジェクトにすべてのデータを自動で流し込んでくれます。 参考 Stream | Node.js v16.3.0 Documentation File system | Node.js v16.3.0 Documentation How to use fs.createWriteStream? | Node.js
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Geolocation APIを使って位置情報を取得する

位置情報を取得する際に使用した構文や引数について、次回以降スムーズに取得できるようまとめておきます。 「Geolocation API」にアクセスするには、「navigator.geolocation」オブジェクトを使用します。 メソッド①:Geolocation.getCurrentPosition() <端末の現在の位置を受け取る> 構文 navigator.geolocation.getCurrentPosition(success[, error[, [options]]) 引数 詳細 success コールバック関数。 GeolocationPosition オブジェクトを唯一の入力引数として受け取る error 任意のコールバック関数。GeolocationPositionError オブジェクトを唯一の入力引数として受け取る(省略可) option 任意の PositionOptions オブジェクト。(省略可) maximumAge(optionの例) 整数 (ミリ秒)キャッシュされた位置の最大寿命。(キャッシュの有効期限。) timeout(optionの例) 整数 (ミリ秒)。エラーコールバックが呼び出されるまでの時間。(タイムアウトまでの時間) enableHighAccuracy(optionの例) falseまたはtrue。高精度の取得を行うかどうかを示すフラグ メソッド②:watchPosition() <位置を定期的に取得する> 構文 navigator.geolocation.watchPosition(success[, error[, options]]) 引数 詳細 success コールバック関数。GeolocationPosition オブジェクトを入力引数として受け取る error 任意のコールバック関数。 GeolocationPositionError オブジェクトを入力引数として受け取る(省略可) option 任意の PositionOptions オブジェクト。位置を監視する構成オプションを提供(省略可) 位置情報 値 内容 coords.latitude 緯度 coords.longitude 経度 coords.altitude 高度 coords.accuracy 正確性(値が小さいほど正確) coords.altitudeAccuracy 高度の正確性 coords.heading 方位 coords.speed 速度 参考サイト
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

https.requestでPromiseを使う

https.request が http.ClientRequest を返すので、続けて https.on や https.end が利用可能。 環境 $ node -v v16.2.0 $ yarn info jsdom version 16.6.0 $ yarn info https version 1.0.0 $ yarn info typescript version 4.3.2 コード import * as https from "https"; const request = (options) => { return new Promise((resolve, reject) => { https .request(options, (res) => { const data = []; res.on("data", (d) => data.push(d)); res.on("end", () => resolve(data.join(""))); }) .on("error", reject) .end(); }); }; TypeScript ver. import * as https from "https"; const request = (options: string | URL | https.RequestOptions) => { return new Promise<string>((resolve, reject) => { https .request(options, (res) => { const data = []; res.on("data", (d) => data.push(d)); res.on("end", () => resolve(data.join(""))); }) .on("error", reject) .end(); }); }; そのまま jsdom に渡せる。 import { JSDOM } from "jsdom"; request("https://www.google.com/") .then((data) => { const dom = new JSDOM(data); // Google console.log(dom.window.document.title); }); 参考 HTTPS | Node.js v16.3.0 Documentation node.js - nodejs - How to promisify http.request? reject got called two times - Stack Overflow jsdom/jsdom: A JavaScript implementation of various web standards, for use with Node.js
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

職業訓練校 Webプログラマ養成科

職業訓練校に通い始めました 前職を辞めてからしばらくはJavaScript,PHPを中心に勉強していましたがオブジェクト指向の餌食になってしまい、エラーのオンパレード。そこで海外留学やプログラミング教室など誰かに教えて貰おうと思ったのですが高額すぎて諦めました。そんな中とある日何気無くYoutubeで2chの元管理人のひろゆきさんのライブ配信(本人曰く録画放送)の中でお金を貰いながら勉強できる公的サービスがあると聞いて調べてみた所、職業訓練と言う働く気がある者なら誰でも受ける資格があり場合によれば職業訓練手当と言う在学中月10万円ほどもらえる仕組みがある事を知りました。※詳しくは各地方自治体のハローワークのホームページをご参照ください
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Seleniumを使ってe-typingを自動化した ②実装編

はじめに 前回の記事でselenium準備編を書いたので、ブラウザを動かすコードを書いていきます! 実装 以下実装したコードになります。 e-typing.js const {Builder, By, Key, until} = require('selenium-webdriver'); const tesseract = require('tesseract.js'); let fs = require('fs'); async function example() { // Chrome / Chromiumセッションをインスタンス化 let driver = await new Builder().forBrowser('chrome').build(); // e-typingのWebサイトを開く await driver.get('https://www.e-typing.ne.jp/roma/check/'); // e-typingサイトの「今すぐチェック」というボタン要素をidから取得してclickする await driver.findElement(By.id('level_check_btn')).click(); // 表示に時間がかかる為、5秒スリープさせる await driver.sleep(5000); //iframeが表示される為、iframeの要素をidから取得 const iframe = await driver.findElement(By.id('typing_content')); //取得したiframeの要素をへ移動する (これがないとiframe内の要素にアクセスできない) await driver.switchTo().frame(iframe); // 「スタート」ボタン要素をidから取得して、クリック await driver.findElement(By.css('#start_btn')).click(); // 表示に時間がかかる為、3秒間スリープさせる await driver.sleep(3000); // スペースキーをクリックするとゲームが開始される為、スペースキーをクリック await driver.actions().keyDown(Key.SPACE).perform(); // 表示に時間がかかる為、3秒間スリープさせる await driver.sleep(3000); while (true) { try { // 画面に表示されている英字を取得する const sentenceText = await driver.findElement(By.id('sentenceText')).getText(); // 取得した文字を一文字づつループさせる for (i = 0; i < sentenceText.length; i++) { word = sentenceText[i].toLowerCase(); // 取得した文字のキーを押す await driver.actions().keyDown(word).perform(); // キーを打つ速度を遅くする処理 (無くても動く) await driver.sleep(50); } } catch (error) { // 「sentenceText」というidを持った要素が取得できない場合エラーが発生して、処理終了 console.log(error); return; } } }; example(); nodeで動きます! $ node e-typing.js まとめ コードを書いて自動化するのは、すごく好奇心をくすぐられる。もっと色々と自動化できるもの探して行くつもりです! 実務の中でテストに利用して、テストの時間を短縮できたらめちゃ便利だなと思いました ※動画を載せれたら載せます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【アルゴリズム】JavaScriptで文字列問題を解く

はじめに Qiitaの競技プログラミング研究月間ということで、アルゴリズムの記事を書いています。 今回は文字列に関する問題をまとめました。 JavaScriptでアルゴリズムの勉強をされている方の参考になれば幸いです。 記事を順次まとめていきますので、その他の記事についてはマイページからご覧ください。 頭文字の大文字化 引数に文字列を与えたとき、各単語の頭文字だけ大文字にして返してください。 capitalize('a short sentence') --> 'A Short Sentence' capitalize('a lazy fox') --> 'A Lazy Fox' capitalize('look, it is working!') --> 'Look, It Is Working!' 解答 以下の処理を考えます。 空配列wordsをつくる 引数の文字列をスペース区切りで配列にする 配列の各要素wordにforをまわす wordの先頭を大文字にする 先頭の大文字と残りの文字列連結する 連結した文字を配列wordsに格納する 配列wordsを文字列にして返す index.js function capitalize(str) { const words = []; // str.split(' ')でスペース区切りの配列をつくる for (let word of str.split(' ')) { words.push(word[0].toUpperCase() + word.slice(1)); } return words.join(' '); } 出現最多文字(MaxChars) 文字列を引数に与えたときに、一番現れる回数が多い文字を返してください。 maxChar("abcccccccd") === "c" maxChar("apple 1231111") === "1" 解答 文字列の文字をキー、文字の出現回数を値にもつオブジェクト(連想配列)を作成します。 空のオブジェクトcharMapを用意し、for (let char of str)の中でcharをキーにしたオブジェクトを作成します。 文字が初出現したときはcharMap[char] = 1をセットし、2回目以降の出現ではcharMap[char]++のようにインクリメントしていきます。 オブジェクトを作成したら、各文字(キー)の出現回数とmaxを比較していき、maxより大きい値がでたらmaxを更新していきます。 また、maxの文字をmaxCharとして更新していき、更新結果を最後に返します。 index.js function maxChar(str) { const charMap = {}; let max = 0; let maxChar = ''; // オブジェクト(文字: 出現回数)の作成 for (let char of str) { if (charMap[char]) { charMap[char]++; } else { charMap[char] = 1; } } // 出現回数が多い文字が現れたら更新 for (let char in charMap) { if (charMap[char] > max) { max = charMap[char]; maxChar = char; } } return maxChar; } アナグラム 2つの文字列を引数として与えたときに、各文字列がアナグラム(同じ文字を同じ個数含んでいる)になっているかどうかを判定してください。 アナグラムは文字のみを考えます(記号については考えません)。 また、大文字・小文字の区別も行いません。 anagrams('rail safety', 'fairy tales') --> True anagrams('RAIL! SAFETY!', 'fairy tales') --> True anagrams('Hi there', 'Bye there') --> False 解答 出現最多文字(MaxChars)のときと同様に、引数の2つの文字列をbuildCharMap()でオブジェクト(文字: 出現回数)に変換します。 オブジェクトを作成する際に、正規表現str.replace(/[^\w]/g, '')とtoLowerCase()を使うことですべての半角英数字とアンダースコアに含まれない一文字をすべて''に置き換え、文字列の文字をすべて小文字にしています。 if (Object.keys(aCharMap).length !== Object.keys(bCharMap).length)でキーの数を比較して、数が異なっていたら早期でfalseを返します。 次にfor文の中でif (aCharMap[char] !== bCharMap[char])を使い、各文字列の同じキーの値(出現回数)がどれか一つでも異なっていたらfalseを返します。 ここまでの処理でfalseを返さなかった場合、最終的にtrueを返すようにします。 index.js function anagrams(stringA, stringB) { // 文字をキー出現回数を値にもつオブジェクト const aCharMap = buildCharMap(stringA); const bCharMap = buildCharMap(stringB); if (Object.keys(aCharMap).length !== Object.keys(bCharMap).length) { return false; } for (let char in aCharMap) { if (aCharMap[char] !== bCharMap[char]) { return false; } } return true; } function buildCharMap(str) { let charMap = {}; // 正規表現を使いすべての半角英数字とアンダースコアに含まれない一文字をすべて''に置き換える for (let char of str.replace(/[^\w]/g, '').toLowerCase()) { if (charMap[char]) { charMap[char]++; } else { charMap[char] = 1; } } return charMap; } 母音の総数 引数の文字列に含まれる母音の合計数を返してください。 解答 前の2題と同様に、文字と出現回数のオブジェクトcharMapを作成します。 母音の配列const words = ['a', 'i', 'u', 'e', 'o']を用意し、forの内部で各母音の数をカウントしていきます。 index.js function vowels(str) { let charMap = {}; for (let char of str.toLowerCase()) { if (charMap[char]) { charMap[char]++; } else { charMap[char] = 1; } } const words = ['a', 'i', 'u', 'e', 'o']; let count = 0; for (word of words) { if (charMap[word]) { count = count + charMap[word]; } } return count; } JavaScriptのArrayメソッドを使うともっとシンプルに書くことができます。 例えば、includes()メソッドを使うと以下のようになります。 index.js function vowels(str) { let count = 0; const checker = ['a', 'i', 'u', 'e', 'o']; for (let char of str.toLowerCase()) { if (checker.includes(char)) { count++; } } return count; } また、match()メソッドを使うことで、正規表現に対する文字列のマッチングの結果matchesを受け取ることができます。 matches.lengthがそのまま結果となります。 index.js function vowels(str) { const matches = str.match(/[aeiou]/gi); return matches ? matches.length : 0; } 参考資料
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

色々なダイアログ・ボックスを作ってみた!

1、概要  ご存じの通り、HTML 5.2 で「<dialog>: ダイアログ要素」が使用できるようになりました。 まだ「Chrome」、「Edge」、「Opera」等一部のブラウザでのサポートですが、ダイアログ・ボックスを簡単に表示できるようになったので色々作成してみました。(次の画像はその一例です) 皆様の参考になれば幸いです。 2、ファイル構成  プログラム用ファイルは、HTML、CSS 及び JavaScriptが作られており、これらのソースコードは全て次のGitHubからダウンロードできます。 また、そのファイル構成は、以下の通りです。 - GitHub: Dialog_Boxes_for_HTML css:各種スタイルシートを収容するフォルダー images:各種アイコンや画像ファイルを収容するフォルダー js:関連するJavascriptを収容するフォルダー index.html:英語版用メニュー・プログラムのソースファイル EN_Dialog_***.html:英語版プログラムのソースファイル JP_Dialog_***.html:日本語版プログラムのソースファイル Simple_Dialog.html:簡単なダイアログ・ボックス表示プログラムのソースファイル 3、内容  ここに記載されたプログラムは全て次の「Index.html」からも確認できます。 なお、日本語版については、それぞれの項目で確認してください。 - index.htm:英語版のプログラムが確認できます。 3-0. シンプルなダイアログ・ボックスの表示  ダイアログ・ボックスを表示させるのは次の通りとても簡単です。 ここで忘れてならないのは、ダイアログを「開く」ボタンと「閉じる」ボタンを表示し、その処理を記載することです。 ダイアログを「開く」処理を記述しないとダイアログは表示されませんし、当然ながら「閉じる」処理を記述しないと表示されっぱなしになりますから。 - Simple_Dialog.htm:シンプルなダイアログ・ボックスの表示 Simple_Dialog.html <!DOCTYPE html> <html lang="en"> <head> <meta charset = "utf-8" /> <title> Simple Dialog Box 2021/06/10 by T. Fujita</title> </head> <body> <center> <p>Simple Dialog Box</p> <input type="button" value="Open dialog" onclick="dialog_Open()"> </center> <dialog id="dialog"> <center> <p>This is a simple dialog box.</p> <br> <input type="button" value="Close dialog" onclick="dialog_Close()"> </center> </dialog> <script> function dialog_Open(){ dialog.showModal(); } function dialog_Close() { dialog.close(); } </script> </body> </html> 3-1. インフォメーション等 (a) インフォメーション  ここでは、2つのインフォメーション・ボックスを作成しました。 一つ目は単純な情報表示で、二つ目は文字にマウスを重ねると文字が砂のように崩れる効果を付けたものです。 - JP_Dialog_001.htm:インフォメーション表示のダイアログボックス (b) プロファイル  写真がマウスの位置により動く効果をつけたものを用意しました。 「CSS」フォルダー内の「images」フォルダーの写真を変更してみて下さい。 但し、写真のサイズ等を変える場合はcss内の記述の変更も忘れずに! - JP_Dialog_010.htm:プロファイル写真表示のダイアログ・ボックス 3-2. データ入力ダイアログ (a) テキスト入力  単純なキーボードからのテキスト入力です。 ダイアログ・ボックスで入力されたテキストが親ウインドウに表示されます。 JP_Dialog_002.htm:テキスト入力のダイアログ・ボックス (b) 音声入力  音声認識を使用したテキスト入力です。 もちろんキーボードからの入力も可能です。 JP_Dialog_012.htm:音声入力のダイアログ・ボックス (c) ラジオボタン  ラジオボタンを使用した入力です。 入力結果が親ウィンドウに表示されます。 JP_Dialog_003.htm:ラジオボタン入力のダイアログ・ボックス (d) チェックボックス  チェックボックスを使用した入力で、これも入力結果が親ウィンドウに表示されます。 JP_Dialog_004.htm:チェックボックス入力のダイアログ・ボックス (e) セレクター  プルダウン・メニューを使用したセレクター入力です。 JP_Dialog_005.htm:セレクター入力のダイアログ・ボックス (f) カレンダー選択  jqueryとjquery UI を使用したカレンダーでの年月日入力です。 jquery UIのテーマ一覧は、ここ で確認できますので、参考にしてください。 JP_Dialog_011.htm:カレンダー入力のダイアログ・ボックス 3-3. ファイル入出力 (a) テキスト・ファイル読込  UTF-8やANSI/Shift-JISの自動判別可能なテキスト・ファイル読込用ダイアログ・ボックスです。 読み込んだファイルのデータは親ウィンドウにも表示されます。 テキスト・ファイルの出力(ローカル・ファイルへの出力)については、3-4項で実装しました。 JP_Dialog_006.htm:テキスト・ファイル読込のダイアログ・ボックス (b) CSVファイル読込  UTF-8やANSI/Shift-JISの自動判別可能なCSVファイル読込用ダイアログ・ボックスです。 読み込んだCSVファイルのデータは親ウィンドウにも表示されます。 CSVファイルの出力(ローカル・ファイルへの出力)については、3-4項で実装しました。 JP_Dialog_007.htm:CSVファイル読込のダイアログボックス (c) 画像ファイル読込  画像ファイル読込用ダイアログ・ボックスです。 読み込んだ画像は親ウィンドウにも表示されます。 JP_Dialog_008.htm:画像ファイル読込のダイアログボックス 3-4. 時計 (a) デジタル時計  ダイアログ・ボックス内にデジタル時計を実装してみました。 背景色や文字色を変更することで色々使えると思います。 JP_Dialog_009.htm (b) アナログ時計  ダイアログ・ボックス内にアナログ時計を実装してみました。 文字盤の画像を変えることで好みの時計を実装できます。 JP_Dialog_016.htm 3-5. メニュー等 (a) プルダウン・メニュー  親ウィンドウのプルダウン・メニューから直接ダイアログ・ボックスを表示してみました。 ダイアログ・ボックスの内容は、上記と同様です。 また、テキストファイルの出力(UTF-8)と CSVファイル出力(UTF-8及びShift-JIS)も実装しています。 JP_Dialog_100.htm:親ウィンドウのプルダウン・メニューから直接ダイアログ・ボックスを表示 (b) スライダー  ダイアログ・ボックス内にスライダーを設置し、単純な入力を切り替えるようにしてみました。 JP_Dialog_101.htm:ダイアログ・ボックス内にスライダーを設置 (c) アイコン・メニュー  ダイアログ・ボックスにアイコン・メニューを設置し、そこから各種ダイアログ・ボックスを表示してみました。 親ウインドウ以外は、上記「(a) プルダウン・メニュー」とほぼ同一です。 JP_Dialog_102.htm:ダイアログ・ボックスにアイコン・メニューを設置 4、Reference ダイアログ要素:HTML の 要素の説明 Dialog_Boxes_for_HTML:この記事で説明したプログラムのソースファイル保存場所
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【アルゴリズム】JavaScriptで部分配列問題を解く

はじめに Qiitaの競技プログラミング研究月間ということで、アルゴリズムの記事を書いています。 今回は部分配列に関する問題をまとめました。 JavaScriptでアルゴリズムの勉強をされている方の参考になれば幸いです。 記事を順次まとめていきますので、その他の記事についてはマイページからご覧ください。 チャンク(Chunk) 配列とチャンクサイズを引数で与えたとき、配列内にチャンクサイズと同じ長さの部分配列をつくってください。 chunk([1, 2, 3, 4], 2) --> [[ 1, 2], [3, 4]] chunk([1, 2, 3, 4, 5], 2) --> [[ 1, 2], [3, 4], [5]] chunk([1, 2, 3, 4, 5, 6, 7, 8], 3) --> [[ 1, 2, 3], [4, 5, 6], [7, 8]] chunk([1, 2, 3, 4, 5], 4) --> [[ 1, 2, 3, 4], [5]] chunk([1, 2, 3, 4, 5], 10) --> [[ 1, 2, 3, 4, 5]] 解答 以下の処理を考えて実装します。 部分配列を包含する空配列chunkedをつくる 引数で与えた配列の各要素elementに対してforをまわす chunkedの最後の要素(部分配列)lastを取り出す (if) lastがない、またelementの長さがチャンクサイズと同じ場合 chunkedにelementを含んだ配列[element]を追加する (else) 該当しない場合 lastにelementを追加する index.js function chunk(array, size) { const chunked = []; for (let element of array) { // chunkedの最後の要素(部分配列) const last = chunked[chunked.length - 1]; if (!last || last.length === size) { chunked.push([element]); } else { last.push(element); } } return chunked; } スパイラルマトリクス(SpiralMatrix) 引数に整数Nを与えたときに、NxNのスパイラルマトリクスを返してください。 matrix(2) [[1, 2], [4, 3]] matrix(4) [[1, 2, 3, 4], [12, 13, 14, 5], [11, 16, 15, 6], [10, 9, 8, 7]] 解答 以下の処理を考えます。 初期値1のcounterという変数をつくって、1ずつ増やしながら部分配列に格納していくイメージとなります。 部分配列を包含する空配列resultsをつくる counterという変数をつくる(初期値1) 1, 2, 3, 4の順番でforを回し、counterを格納する(1ずつ増やしていく) 配列resultsには空の部分配列を先に格納してしまい、その後に処理を行っていきます。 index.js function matrix(n) { const results = []; for (let i = 0; i < n; i++) { results.push([]); } let counter = 1; let startColumn = 0; let endColumn = n - 1; let startRow = 0; let endRow = n - 1; while (startColumn <= endColumn && startRow <= endRow) { // Top row for (let i = startColumn; i <= endColumn; i++) { results[startRow][i] = counter; counter++; } startRow++; // Right column for (let i = startRow; i <= endRow; i++) { results[i][endColumn] = counter; counter++; } endColumn--; // Bottom row for (let i = endColumn; i >= startColumn; i--) { results[endRow][i] = counter; counter++; } endRow--; // start column for (let i = endRow; i >= startRow; i--) { results[i][startColumn] = counter; counter++; } startColumn++; } return results; } 参考資料
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

plunkerでruffle

概要 plunkerでruffleやってみた。 サンプルコード var swfobject = {}; swfobject.embedSWF = function(url, id, width, height) { var ruffle = window.RufflePlayer.newest(); var player = Object.assign(document.getElementById(id).appendChild(ruffle.createPlayer()), { width: width, height: height, style: 'width: ' + width + 'px; height: ' + height + 'px', }); player.load({ url: url }); } swfobject.embedSWF('https://e9x.github.io/ruffle/1on1soccer_24.swf', 'ruffle', 300, 300); 成果物 以上。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【アルゴリズム】JavaScriptで反転問題を解く

はじめに 以前からアルゴリズム系に苦手意識があり、ずっと勉強を後回しにしてきたのですが、このたびQiitaで「競技プログラミング強化月間」が始まったので便乗して勉強してみることにしました。 試しに解いたLeetCodeが解説も意味不明なレベルだったので、もっと優しいレベルの問題を解いて記事にまとめていくことにしました。 JavaScriptでアルゴリズムの勉強をされている方の参考になれば幸いです。 記事を順次まとめていきますので、その他の記事ついてはマイページからご覧ください。 文字列反転 引数に文字列を与えたときに反転した文字列を返してください。 ex.) reverse('apple') === 'elppa', reverse('hello') === 'olleh', reverse('Greetings!') === '!sgniteerG' 解答 初期値が空の文字列reversedを用意し、引数の文字列strの文字characterをfor文で先頭から取り出します。 reversedを後ろからcharacterに連結していくことで、反転した文字列reversedが完成します。 index.js function reverse(str) { let reversed = ''; for (let character of str) { reversed = character + reversed; } return reversed; } 回文 引数に与えた文字列が回文だったときにtrue、回文ではなかったときにfalseを返してください。 ex.) palindrome("abba") === true, palindrome("abcdefg") === false 解答 文字列strをsplit('')で文字の配列にした後に、reverse()で配列の順番を反転させ、join('')で再び文字列reversedに戻します。 最後にstrとreversedを比較した結果を返します。 index.js function palindrome(str) { const reversed = str.split('').reverse().join(''); return str === reversed; } 整数反転 引数に正負整数を与えたときに反転した正負整数を返してください。 ex.) reverseInt(15) === 51, reverseInt(981) === 189, reverseInt(-15) === -51 解答 String(n)で引数nを文字列に変換し、回文のときと同様に文字列reverseStrとして反転させます。 記号も含めて反転されてしまっているので、parseint(reverseInt)で正の整数に戻した後、Math.sign(n)でnの正負(+/-1)をかけてあげます。 index.js function reverseInt(n) { const reverseStr = String(n).split('').reverse('').join(''); return parseInt(reverseStr) * Math.sign(n); } 参考資料
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQueryとJavaScriptを使ってWebデザインページを作成しました。

jQueryとJavaScriptを使ってWebデザインページを作成しました。 今回はjQueryフレームワークを使いました。(普段はBootStrap派です) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryを使ったアニメーションテスト</title> </head> <!-- jQueryを使ったテスト --> <script src="jquery.js"></script> <script> //F1タグの色を青に変える $(function(){ $('h1').css('color','blue'); }); //F2タグを消す $(function(){ $('h2').fadeOut(); }); //h4タグの色を変える $(function(){ $('h4').css('color','deeppink'); }); //h5タグの背景を変える $(function(){ $('h5').css('background-color','black'); }); //fuori-classeサイトを別ウィンドウで開く function test100(){ let i = 0; while (i< 1){ window.open('http://www.fuoriclasse2.com/','flora','width=600,height=450'); i++; } } //EURO2020のイタリアVSトルコ戦のサイトを別ウィンドウで開く function fuoriclasse(){ let i = 0; while (i< 1){ window.open('http://www.fuoriclasse2.com/cgi-bin/g.cgi?euro&2020&210611','italy vs Turkey','width=600,height=450'); i++; } } </script> <style> h1 { color:red; font-size:50px; } h2 { color:black; font-size:40px; } .test { color:lawngreen; font-size:50px; background-color:dimgray; text-align: center; padding :20px; margin: 20px; border:solid 10px #8b7348; width:350px; height:150px; } .test2 { background-color:aliceblue; text-align: center; color:darkred; font-size:80px; padding: 100px; } .test3{ color:indianred; font-size:30px; background-color:aliceblue; text-align: center; padding :20px; margin: 20px; border:solid 10px #b0c100; width:400px; height:100px; } .test4{ color:#05AB92; font-size:20px; background-color:whitesmoke; text-align: center; padding :20px; margin: 20px; border:solid 5px #cccccc; width:200px; height:100px; } .test5{ color:#00FF00; font-size:20px; background-color:whitesmoke; text-align: center; padding :20px; margin: 20px; border:solid 5px #66AA33; width:80px; height:50px; } .test6{ color:yellow; font-size:20px; background-color:darkorchid; text-align: center; padding :20px; margin: 20px; border:solid 5px #66AA33; width:200px; height:100px; } .test7{ color:black; font-size:18px; background-color:white; text-align: center; padding :20px; margin: 20px; border:solid 5px #66AA33; width:200px; height:100px; } </style> <body> <h1 class="test">jQueryのテスト</h1> <h2 class="test2">この部分は消えます</h2> <h3 class="test3" >I will move to Osaka at next year.</h3> <h4 class="test4">大阪で頑張るぞー</h4> <h5 class="test5">以上報告でした</h5> <br> <a class="test6" onclick=test100()>株式会社fuori-classe</a> <br> <br> <br> <br> <br> <a class="test7" onclick=fuoriclasse()>EURO2020の試合結果が出てるぞ</a> <br> </body> 完成したWebページです
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

YoutubeをAPI Key不要で検索するnode-ytsrの説明文を読み解く

プロトアウトスタジオの卒業制作では「Youtube動画内テキスト検索」(別名:気づいたらYoutube観て1日が終わってた撲滅システム)」を作ろうとしています。 同じ課題感を持っている方には使っていただけるようにしますので、応援いただけますと幸いです。 なにはなくともYoutubeに検索単語を入れて、URLを返してもらうのは必要なのでGitHubでそれを調べました。 今回はログインやGoogle-API-Keyを必要としないnode-ytsrを読み解いていきます。 node-ytsr ダウンロード数は27万回。 更新状況も良さそう。(4月26日更新 v3.5.0) discordのサポートチャンネルもあり、信用できそうです。 では、読んでいきます。 DL翻訳を使ったあとに英文も読んではいますが、英語は勉強中なので信用しきらないようにお願いします。m(__)m Simple js only package to search for Youtube for Videos, Playlists and many more. Does not require any login or Google-API-Key. Youtubeの動画やプレイリストなどを検索するシンプルなjsのみのパッケージです。ログインやGoogle-API-Keyを必要としません。 const ytsr = require('ytsr'); const searchResults = await ytsr('github'); dosth(searchResults); ytsr(searchString, [options]) Searches for the given string 与えられた文字列を検索する searchString 検索文字列 search string or url (from getFilters) to search from 検索文字列、または検索対象となるURL(getFiltersから)。 options オプション object with options オプションを持つオブジェクト possible settings: 可能な設定 gl[String] -> 2-Digit Code of a Country, defaults to US - Allows for localisation of the request gl[String] -> 国の2桁のコード、デフォルトはUS - リクエストのローカライズを可能にします。 hl[String] -> 2-Digit Code for a Language, defaults to en - Allows for localisation of the request hl[String] -> 言語を表す2桁のコード、デフォルトはen - リクエストのローカライズを可能にします。 safeSearch[Boolean] -> pull items in youtube restriction mode. safeSearch[Boolean] -> youtube制限モードでアイテムを引き出します。 limit[integer] -> limits the pulled items, defaults to 100, set to Infinity to get the whole list of search results - numbers <1 result in the default being used limit[integer] -> 引っ張るアイテムを制限します。デフォルトは100で、Infinityに設定すると検索結果の全リストを取得します - 数値が1未満の場合はデフォルトが使用されます。 pages[Number] -> limits the pulled pages, pages contain 20-30 items, set to Infinity to get the whole list of search results - numbers <1 result in the default limit being used - overwrites limit pages[Number] -> 抽出されるページを制限します。ページには20~30のアイテムが含まれ、Infinityに設定すると検索結果の全リストが表示されます。 requestOptions[Object] -> Additional parameters to passed to miniget, which is used to do the https requests requestOptions[Object] -> httpsリクエストを行うために使用されるminigetに渡される追加のパラメータです。 returns a Promise  Promiseを返します。 Example response 応答の例 ytsr.getFilters(searchString, options) Pulls avaible filters for the given string or link 指定された文字列またはリンクに対する利用可能なフィルタを取得します。 const ytsr = require('ytsr'); const filters1 = await ytsr.getFilters('github'); const filter1 = filters1.get('Type').get('Video'); const filters2 = await ytsr.getFilters(filter1.url); const filter2 = filters2.get('Features').get('Live'); const options = { pages: 2, } const searchResults = await ytsr(filter2.url, options); dosth(searchResults); searchString 検索文字列 string to search for 検索対象の文字列 or previously optained filter ref または以前に取得したフィルタの参照 options オプション gl[String] -> 2-Digit Code of a Country, defaults to US - Allows for localisation of the request gl[String] -> 国の2桁のコード、デフォルトはUS - リクエストのローカライズを可能にします。 hl[String] -> 2-Digit Code for a Language, defaults to en - Allows for localisation of the request hl[String] -> 言語を表す2桁のコード、デフォルトはen - リクエストのローカライズを可能にします。 requestOptions[Object] -> Additional parameters to passed to miniget, which is used to do the https requests requestOptions[Object] -> httpsリクエストに使用されるminigetに渡される追加パラメータ returns a Promise resulting in a Map> Map>になったPromiseを返します。 Example response ytsr.continueReq(continuationData) Continues a previous request by pulling yet another page. 前回のリクエストの続きで、さらに別のページを引きます。 The previous request had to be done using pages limitation. 前のリクエストは、ページ数制限を使って行う必要がありました。 var ytsr = require('ytsr'); const search = await ytsr('github', { pages: 1 }); display(search.items); const r2 = ytsr.continueReq(search.continuation); display(r2.items); const r3 = ytsr.continueReq(r2.continuation); display(r3.items); returns a Promise resolving into { continuation, items } は、{ continuation, items }に解決するPromiseを返します。 Install インストール npm install --save ytsr
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

YoutubeをAPI Key不要で検索するnode-ytsrの説明文を翻訳した

プロトアウトスタジオの卒業制作では「Youtube動画内テキスト検索」(別名:気づいたらYoutube観て1日が終わってた撲滅システム)」を作ろうとしています。 同じ課題感を持っている方には使っていただけるようにしますので、応援いただけますと幸いです。 なにはなくともYoutubeに検索単語を入れて、URLを返してもらうのは必要なのでGitHubでそれを調べました。 今回はログインやGoogle-API-Keyを必要としないnode-ytsrを読み解いていきます。 node-ytsr ダウンロード数は27万回。 更新状況も良さそう。(4月26日更新 v3.5.0) discordのサポートチャンネルもあり、信用できそうです。 では、読んでいきます。 DL翻訳を使ったあとに英文も読んではいますが、英語は勉強中なので信用しきらないようにお願いします。m(__)m Simple js only package to search for Youtube for Videos, Playlists and many more. Does not require any login or Google-API-Key. Youtubeの動画やプレイリストなどを検索するシンプルなjsのみのパッケージです。ログインやGoogle-API-Keyを必要としません。 const ytsr = require('ytsr'); const searchResults = await ytsr('github'); dosth(searchResults); ytsr(searchString, [options]) Searches for the given string 与えられた文字列を検索する searchString 検索文字列 search string or url (from getFilters) to search from 検索文字列、または検索対象となるURL(getFiltersから)。 options オプション object with options オプションを持つオブジェクト possible settings: 可能な設定 gl[String] -> 2-Digit Code of a Country, defaults to US - Allows for localisation of the request gl[String] -> 国の2桁のコード、デフォルトはUS - リクエストのローカライズを可能にします。 hl[String] -> 2-Digit Code for a Language, defaults to en - Allows for localisation of the request hl[String] -> 言語を表す2桁のコード、デフォルトはen - リクエストのローカライズを可能にします。 safeSearch[Boolean] -> pull items in youtube restriction mode. safeSearch[Boolean] -> youtube制限モードでアイテムを引き出します。 limit[integer] -> limits the pulled items, defaults to 100, set to Infinity to get the whole list of search results - numbers <1 result in the default being used limit[integer] -> 引っ張るアイテムを制限します。デフォルトは100で、Infinityに設定すると検索結果の全リストを取得します - 数値が1未満の場合はデフォルトが使用されます。 pages[Number] -> limits the pulled pages, pages contain 20-30 items, set to Infinity to get the whole list of search results - numbers <1 result in the default limit being used - overwrites limit pages[Number] -> 抽出されるページを制限します。ページには20~30のアイテムが含まれ、Infinityに設定すると検索結果の全リストが表示されます。 requestOptions[Object] -> Additional parameters to passed to miniget, which is used to do the https requests requestOptions[Object] -> httpsリクエストを行うために使用されるminigetに渡される追加のパラメータです。 returns a Promise  Promiseを返します。 Example response 応答の例 ytsr.getFilters(searchString, options) Pulls avaible filters for the given string or link 指定された文字列またはリンクに対する利用可能なフィルタを取得します。 const ytsr = require('ytsr'); const filters1 = await ytsr.getFilters('github'); const filter1 = filters1.get('Type').get('Video'); const filters2 = await ytsr.getFilters(filter1.url); const filter2 = filters2.get('Features').get('Live'); const options = { pages: 2, } const searchResults = await ytsr(filter2.url, options); dosth(searchResults); searchString 検索文字列 string to search for 検索対象の文字列 or previously optained filter ref または以前に取得したフィルタの参照 options オプション gl[String] -> 2-Digit Code of a Country, defaults to US - Allows for localisation of the request gl[String] -> 国の2桁のコード、デフォルトはUS - リクエストのローカライズを可能にします。 hl[String] -> 2-Digit Code for a Language, defaults to en - Allows for localisation of the request hl[String] -> 言語を表す2桁のコード、デフォルトはen - リクエストのローカライズを可能にします。 requestOptions[Object] -> Additional parameters to passed to miniget, which is used to do the https requests requestOptions[Object] -> httpsリクエストに使用されるminigetに渡される追加パラメータ returns a Promise resulting in a Map> Map>になったPromiseを返します。 Example response ytsr.continueReq(continuationData) Continues a previous request by pulling yet another page. 前回のリクエストの続きで、さらに別のページを引きます。 The previous request had to be done using pages limitation. 前のリクエストは、ページ数制限を使って行う必要がありました。 var ytsr = require('ytsr'); const search = await ytsr('github', { pages: 1 }); display(search.items); const r2 = ytsr.continueReq(search.continuation); display(r2.items); const r3 = ytsr.continueReq(r2.continuation); display(r3.items); returns a Promise resolving into { continuation, items } は、{ continuation, items }に解決するPromiseを返します。 Install インストール npm install --save ytsr
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ある程度スクロールするとじわっと表示させる

やる事 スクロールをしていって、要素がスクリーンのある程度に来るとじわっと表示させる。 方法 html <section class="fadein"> <!--何かしらの要素を入れる--> </section> javascript $(function(){ $(window).scroll(function (){ $(".fadein").each(function(){ let imgPos = $(this).offset().top; let scroll = $(window).scrollTop(); let windowHeight = $(window).height(); if (scroll > imgPos - windowHeight + 250){ //ここの数値を変えて表示させる箇所を変更する $(this).addClass("fadein_scroll"); } else { $(this).removeClass("fadein_scroll"); } }); }); }); css .fadein { opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; } .fadein_scroll { opacity : 1; }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JavaScript 超初心者向け

HTMLでの読み込み HTML上で動かす場合 sample.html <script type = "text/javascript"> // ここにコードを書く </script>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JavaScript 初心者向け

ここに記載されているコードは単体で動くようになっているのでイメージが湧かない場合は動かしてみてください。 HTMLでの読み込み HTML上で動かす場合 sample.html <script type = "text/javascript"> // ここにコードを書く </script> 外部ファイルとして読み込む sample.html <script src="JavaScriptのファイルパス"></script> コメントアウト sample.js 1行の時 // これは例です 複数行の時 /* これは例です これは例です */ コンソールに出力 主にデバックで使用します。 sample.js console.log('Hello World'); console.log("Hello World"); //文字列は、シングルorダブルクォーテーションで囲む ダイアログ sample.js alert("Hello World!!"); 数値と文字列の出力 sample.js console.log(5 + 3); // 出力結果:8 console.log(5 - 3); // 出力結果:2 console.log(4 * 2); // 出力結果:8 console.log(4 / 2); // 出力結果:2 console.log(9 % 2); // 出力結果:1 ※余りの計算 console.log("5 + 3"); // 出力結果:5 + 3 console.log("5" + "3"); // 出力結果:53 console.log("あい" + "うえお"); // 出力結果:あいうえお console.log("A" + "B" + "C"); // 出力結果:ABC 計算式の省略 sample.js 省略前 省略後 x = x + 1 x += 1 x = x - 1 x -= 1 x = x * 1 x *= 1 x = x / 1 x /= 1 x = x % 1 x %= 1 変数 変数とはプログラミング言語における値を入れておく箱のこと 変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るのでNG sample.js const name = "tanaka"; // 変数名はtanaka console.log(name); // 出力結果:tanaka /*--------------------------------------------------*/ const name = "tanaka"; console.log(name + tarou); // 出力結果:tanakatarou /*--------------------------------------------------*/ const x = 1 + 100; alert(x); // 出力結果:101 変数の種類 変数にはvar、let、constがあり現場で使用するのはlet、constを使う const 再代入できない変数。 sample.js const name = "yamada"; name = "tanaka"; console.log(name) // エラーになる let 再代入できる変数。 sample.js let name = "yamada"; name = "tanaka"; console.log(name) // 出力結果:tanaka 真偽値 「true(真)」と「false(偽)」2つの値のこと sample.js a === b // aとbが等しければtrue a !== b // aとbが等しくなければtrue a < b // aの方がbより小さいときtrue a <= b // aの方がbより小さいまたは等しいときtrue /*--------------------------------------------------*/ && = かつ xが2のとき x > 1 && x < 3 //複数の条件がすべて真だからtrue /*--------------------------------------------------*/ || = または xが2のとき x < 1 && x < 3 //複数の条件のうち1つでも真だからtrue 条件分岐 if文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ if文 sample.js if (条件式) { 処理 // 条件式がtrueのとき実行 } else { 処理 // 条件式がfalseのとき実行 } /*--------------------------------------------------*/ const name = "yamada" if (name === "yamada") { console.log("yamadaです") // 条件式がtrueのとき実行 } else if (name === "tanaka") { console.log("tanakaです") // 条件式1がfalseで、条件式2がtrueのとき実行 } else { console.log("yamadaでもtanakaでもないです") // 条件式1と2両方ともfalseのとき実行 } switch文 sample.js switch (対象) { case 値1: // 式の結果が値1に等しい場合に実行 break; case 値2: // 式の結果が値2に等しい場合に実行 break; default: // 式の結果がどれにも該当しない場合に実行 処理 } /*--------------------------------------------------*/ const food = "チョコレート"; // food === "チョコレート"のとき switch (food) { case "チョコレート": console.log("チョコレートは食べ物です"); // 実行される break; case "コーラ": console.log("コーラは飲み物です");  // 実行さない break; default: console.log("食べ物でも飲み物でもありません"); } // bleakがあるのでswitch文を抜ける // bleakがないと他のcase内の処理も実行される 繰り返し処理 繰り返し処理とは、一定の処理を自動で繰り返し行う処理のこと。JSでループ(繰り返し)処理をおこなうときは、while文とfor文の2種類がある。 while文 sample.js while (条件式) { 処理 } /*--------------------------------------------------*/ let x = 1; // 変数の定義 while (x <= 5) { // 条件(条件式の真偽が判定される) console.log(x); // 繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了) x = x + 1; // 変数の更新(変数の値が更新され、再び条件に戻る) } for文 sample.js for(変数の定義;条件式;変数の更新){ 処理 } /*--------------------------------------------------*/ for (let x = 1; x <= 1; x += 1) { console.log(x); // 条件式がtrue(真)になるまで出力する } 配列 配列を使うと複数の値をまとめて書くことができる。 sample.js // 例えば、名前の値がいくつもある場合、配列を使うとシンプルになる let name01 = "tanaka"; let name02 = "sasaki"; let name03 = "yamada"; // 配列の出力 let name1 = ["tanaka", "sasaki", "yamada"] console.log(name1); // 配列の要素を取り出す(インデックス番号:「0=tanaka」「1=satou」「2=yamada」) let name2 = ["tanaka", "sasaki", "yamada"] console.log(name2[0]); // 出力結果:tanaka lengthメソッド sample.js const name = ["tanaka", "sasaki", "yamada"] console.log(name.length); //出力結果:3 pushメソッド sample.js const name = ["tanaka","sasaki","yamada"] name.push("suzuki") console.log(name); // 出力結果:tanaka,sasaki,yamada,suzuki 連想配列 配列は複数の値を並べて管理するのに対して、連想配列はそれぞれの値にキーと呼ばれる名前をつけて管理する。 sample.js [値1, 値2] // 配列 { キー1: 値1, キー2: 値2, } // 連想配列 /*--------------------------------------------------*/ let fruit = { "name": "banana", "color": "yellow", }; console.log(fruit.name); // 出力結果:banana console.log(fruit.color); // 出力結果:yellow アロー関数 関数とは、ある処理をまとめたプログラムのこと。同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの。 sample.js const hello = () => { // hello = 関数名 console.log("こんにちは") // console.log("こんにちは") = 実行される処理 } hello(); // 出力結果:こんにちは 引数 引数(ひきすう)とは関数に与える追加情報のようなもの。関数を呼び出すときに一緒に引数を渡すことで、関数の中でその値を利用することができる。 sample.js const 関数名 = (引数名) => { 処理 } 関数名(値); // 関数の呼び出し /*--------------------------------------------------*/ const introduce = (name) => { console.log(name); } introduce("tanaka"); // 出力結果:tanaka /*--------------------------------------------------*/ const introduce = (name, age) => { console.log("名前は" + name + "です"); console.log(age + "歳です"); } introduce("田中", 20); // 出力結果:名前はtanakaです。20歳です。 戻り値 関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。 sample.js const 関数名 = () => { return 値; // 「return 値」と書くことで、関数はその値を戻り値として返す。 } /*--------------------------------------------------*/ const add = (a, b) => { return a + b; } sun = add(1, 3) // 呼び出し部分 console.log(sun); // 結果4 DOM取得 DOMとは「Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み sample.html <input type="text" id="text_area"> sample.js const textArea = document.getElementById("text_area") console.log(textArea) // 出力結果:<input type="text" id="text_area"> 値(value)を取得 sample.html <input type="text" id="text_area" value="banana"> sample.js const textArea = document.getElementById("text_area") console.log(textArea.value) // 出力結果:banana 入力した値(value)を取得 sample.html <input type="text" id="text_area"> <button id="send_button">送信</button> sample.js const textArea = document.getElementById("text_area") // inputタグのDOMを取得 const sendButton = document.getElementById("send_button") // buttonタグのDOMを取得 sendButton.addEventListener('click', () => { console.log(textArea.value) // 出力結果:入力された値 })
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む