What's New Qiita

20190724のJavaScriptに関する記事は18件です。

  • 投稿日：2019-07-24T22:56:45+09:00

PosenetでFedexランクTOP50選手のインパクト時画像の角度を算出してみた

画像や動画から人間の姿勢判定を行う人工知能「Posenet」から得られるデータをスポーツ・ゴルフに活用しよう、という試みを行なっています。

という訳で、Posenetで得られる座標から、米国PGAツアー・FedexランキングTOP50選手のインパクト画像を手作業でかき集め、選手によって差があるのか、を検証してみました。
今回はJavascript情報が無いですが、Posensetは「こちら」のExample usage の通りで、簡単に動作させることが出来ます。

ゴルフスイングの特徴を把握しようと思ったら

画像内の特徴点座標は、その画像本体の幅や高さがまちまちで、また人物が写っている箇所も異なるのため、単なるx,y座標点比較では相違・類似度の計算は出来ない、と考えました。
よって、多少のアングルのズレは仕方ない、として、特徴点３点がなす角度を算出し、その平均値をトップレベル選手のスイングの特徴、と定義付けることにします。（少し無理矢理感があります・・）

特徴点3点、3箇所

  1. 「鼻 - 胸 - 腰中心」の角度：122.53度
  2. 「鼻 - 腰 - くるぶし」の角度：119.71度
  3. 「鼻 - 胸 - 右手首」の角度：68.01度 という感じです。

スクリーンショット 2019-07-24 21.13.13.png
スクリーンショット 2019-07-24 21.11.34.png

これを50選手分機械処理を行い、平均は以下の通りとなりました。
image.png
標準偏差は１桁なので、トッププロは、アドレスやバックスイングの癖が強くても、インパクトの瞬間は選手によって大きな誤差は無い、ということでしょうか。

相関係数を出してみる

EXCELでの作業となりますが、平均値と各選手の値の相関係数「CORREL()」を出してみました。
当然ながら、全て「0.98」以上になりました。（以下10名抜粋）
image.png
平均値と各選手の値との相関だけでなく、各選手同士の相関も、0.96以上となりました。

＊相関係数は、−1以上1以下の実数に値をとります。相関係数が正のとき確率変数には正の相関が、負のとき確率変数には負の相関があります。また相関係数が0のとき確率変数は無相関です。

一般ゴルファーのインパクト角度と比較してみる。

では、一般ゴルファーとの差はどうでしょうか？
image.png
相関係数は、「0.92」。
上記から考えると、0.92は、「PGAツアートップレベル選手のスイング特徴点」からは、かけ離れている、と言っても良さそうです。
角度だけを見ると、首だけが下がった立ちんぼ状態、でしょうか。

今後

今回はまだ簡易な状態ですが、今後はTOP100〜もっと多くのトップレベル画像を収集＆角度測定箇所を増やして、検証とモデル作成を続けたいと思います。
「教師なし」学習で分類しても良いかも。

データ収集やデータを用いて上達理論・勝利論のモデル構築に協力頂けるプロゴルファーやトップレベルアマチュアを探しています！一緒に効率の良い練習モデルを作りませんか？

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T22:15:47+09:00

【初心者】React&Redux入門を理解するための超入門/jsの基礎編

未来電子テクノロジー株式会社でインターンをしている文系大学1回生です。
半月ほどReactとReduxの勉強をしています。
理解がなかなか難しいので、勉強したこと、自分なりのポイントをアウトプットしていきます。

ReactやReduxのコードの意味が分からないのは、jsの基礎が抜けているのも一つの原因でした。
そこで、jsの基礎をもう一度確認しました。

jsの基礎

□w3schoolscom

英語ですが、とても分かりやすいです。
実際に手を動かして基礎の理解を深められます。

ポイント

document.getElementById("hoge")

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

Reactにも出てきます。
任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。

オブジェクト

<script>
// Create an object:
var car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

Reactでは、複数のスタイルを設定するために、スタイル名をプロパティとしたオブジェクトのリテラルを記述するときや、ステートの値を設定するときなどに必要な知識です。

＊new演算子の使い方と生成方法まとめ！
これもオブジェクトの勉強になった。

□公式ドキュメント

Reactにも出てくる構文の基礎を固めるのに最適です。

ポイント

this

var myObject = {
  value: 10,
  show: function() {
    console.log(this.value);
  }
}
myObject.show(); // 10

上記は、単にメソッドの呼び出しを行っています。
しかし、thisはそんなに生易しいものでは無いようです。

＊thisって何？使い方を覚えて、JavaScriptをもっと楽しく使おう！

＊windowオブジェクトとグローバルの実態について

＊strictモードの使い方を徹底解説！

＊applyって何だ？callとの違いまで徹底解説

＊JavaScriptの「this」は「4種類」？？

これらの記事を理解して少しthisについて詳しくなったと思います。
windowオブジェクトとグローバルの実態なんて知らなかった。。。

super

class Animal {
  constructor(name) {
    console.log('親クラスのコンストラクタ');
    this.name = name;
  }

  speak() {
    console.log('親クラスのspeakメソッド');
  }
}

class Dog extends Animal {
  constructor(name, age) {
    console.log('子クラスのコンストラクタ');
    super(name);
    this.age = age;
  }

  speak() {
    super.speak();
    console.log('子クラスのspeakメソッド');
  }
}
const dog = new Dog('ポチ', 1);
dog.speak();
console.log('名前: ' + dog.name + '年齢: ' + dog.age); //"名前: ポチ年齢: 1"

constructor : 「super()」で親クラスのconstructorを実行する。
constructor以外のメソッド : 「super.メソッド名()」で親クラスのメソッドを実行する。

＊【JavaScript】superの使い方【クラス継承】

bind

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T20:17:18+09:00

非エンジニアの社長にReactとは何かを説明する①

非エンジニアの社長にReactとは何かを説明する

最近、エンジニアのデイリーMTGを始めたのですが、ありがたいことに非エンジニアの社長もオブザーバーとして参加してくれています。
とはいえ、やはりエンジニアのデイリーMTGの内容となると技術的な内容が多くなるので非エンジニアの面々には分からない部分が多いはずです。
このままMTGを続けるのは申し訳ないですし、非エンジニアにも分かるように説明するという視点で記事を書いてみるのも面白いかなと思うので、つらつらと書いてみようかと思います。
まず、最近主に扱っているReactについて。

なお、説明がややこしくなるのを避けるため、厳密に正確な説明をすることは放棄している部分があります。
悪しからず。

ブラウザとjavascript

いきなりReactの説明を始めることは出来ないので、その前提となるブラウザとjavascriptから説明を始めます。

ブラウザ

ブラウザは、ChromeやInternetExploler,Edgeと言ったWebページを閲覧するのに使っているものです。

さて、このブラウザにはエンジニアは当たり前のように使うものの、一般の方はまず使わない機能が搭載されています。
何らかのページを開いている状態で「F12」ボタンを押して見てください。

おそらく、開発者コンソールとかDevToolとかそんな感じの名前のものが出てくるかと思います。
画面上部にタブがあるので、Elementあるいは要素(ブラウザによって表示は違います)を選んでください。

そうすると、以下のような感じに<>で囲まれた文字が羅列されていると思います。

htmlサンプル.png

この一見、よく分からない文字列の羅列がいわゆるHTMLと呼ばれる形式で書かれたページのソースで、ブラウザ上に表示されているWebページの元です。
コンテンツとして載せる画像や動画は別として、Webページは基本的にこのHTML形式のデータをブラウザが読み取って表示しています。
(ちなみに、Webページ上の要素を右クリックして、「検証」を選択すると、その要素がソース上の何に相当するのか表示してくれます。興味があれば是非)
大雑把な言い方をすれば、Web系のエンジニアはこの文字列を作ったり操作したりするプログラムを書くのが仕事というわけです。

JavaScript

先ほど、「WebページはHTML形式のデータをブラウザが読み取って表示しているもの」と説明しましたが、
実は、HTML形式のデータだけではWebページはほとんどあるいは全く動きがないものになります。
具体的には、阿部寛のホームページのような感じです。
リンクを踏んでページを切り替える以外に画面を変化させる方法がありません。

ただ、このようなページは極めて例外的です。実際、普段皆さんがご覧になっているWebページは、もっと色々な動きがついているはずです。
例えば、検索欄に何か打ち込んだらサジェストが出たり、スクロールしたら徐々に要素が出てきたりとかですね。

これがどうやって実現されているかと言うと、ブラウザ上で「JavaScript」という言語が動き、Htmlの内容を書き換えることによって実現されています。
実際、先ほど紹介した開発者ツールのElementを見ながら画面上の動きを起こすと、
どこかしら要素に変化があることがわかるかと思います。(ものによっては一か所値が書き換わるだけで分かりにくかったりもしますが…)

WebページのUI・UXがどんどんリッチになっていっている現代、このJavaScriptの役割もますます大きくなってきており、いわゆる「フロントエンドエンジニア」と呼ばれる人々は主にこのJavaScriptを扱っています。

そして、今回説明しようとしているReactはこのjavascriptをうまく使うための便利な道具集(ライブラリ)の一つです。

Reactは名前しか出てきていませんが、長くなってきたのでこの辺りで。
次回に続きます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T20:15:48+09:00

JavaScriptが嫌いな人のためのJavaScript , HTML 落とし穴集

JavaScriptが嫌いだけれども
Web系のフロントサイドをやっていかなければいけない人向け。
自分自身が嵌ったところを只々羅列していきます。
調べれば一瞬でわかることだけれど知らないと悩んでしまうところ。

HTML

classの複数宣言
<button class="a b" type="button" style="flex-basis: 14.2857%; max-width: 14.2857%; overflow: hidden;"><abbr aria-label="July 3, 2019">3</abbr></button>

class = "a" と class ="b"が同時に宣言されている。
aを指定してもbを指定もしても該当のタグの要素に影響を与えます。

JavaScript

[]で括ると配列になる。

"a"を配列にしたいとおもったら[]で括るだけ。

return "a" //a 
return ["a"];//{a}
ローカル変数の有効範囲
存在しないはずのものがいる。
if(true){
    var i = 3;
}
console.log(i)//コンパイル通ります・・・もちろん3が出力されます。え

なんでifから飛び出してるのにiが生きているのだ。と思いました。
最近はletとよばれる{}ブロック内のみ生存できる変数型や
他の言語のような定数型constがあるようです。

#生まれる前から認識されている。
    var g_variable = `外`
    function getValue(){
      console.log(i_variable);
      var i_variable = `内`;
      return i_variable;
    }

//実はコンパイルエラーにならない。
値は入っていないもののi_variableは、ブロック内であれば、宣言する前から
変数として認識されている。

関数？データ型？
let GetSquare =  length => length*length;
getDayは日にちの取得ではない。
if(new Date().getMonth == 'July')
    if (new Date().getDay() == HerBirthday.getDay()) {
      console.log("Happy Birthday");
    }

getDayは、曜日を返すらしいです。
上記のコードでは、彼女の誕生日が毎週来てしまうことになります。
日にちをDateから取得したいときは、getDateらしいです。
誕生日デートできるとことを望みます

thisとbind

scope

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T17:27:27+09:00

React.useEffectでfetchをするhookの実装方法

はじめに

本記事は過去記事のまとめです。とはいえ、スクリーンキャストは新しい内容です。

スクリーンキャスト

ゆっくり見るには、リンクを開いて、右矢印を押して進めてください。

各ステップの記事

おわりに

当初の記事に載せたコードもほぼ同じものです。色々改善して最後に作成したスクリーンキャストのコードが分かりやすくなっていると思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T16:46:29+09:00

=>||FREE-TV| | BMX World Championships 2019 live/stream

BMX World Championships 2019 : liveStream, time

GO LIVE?► >http://nufilm.live/allsports/BMX-World-Championships-2019

?►CLICK HERE?►

GO LIVE?► >http://nufilm.live/allsports/BMX-World-Championships-2019

Jake Sverns - 2019 UCI BMX World Championships - Duration: 0:53. BMX Australia 376 views Terry Adams at Flatland BMX World Championship 2019 FINAL Cologne - Duration: 4:32. Kevin & Els 18,547 views This video is unavailable. Watch Queue Queue. Watch Queue Queue Published on Jun 25, 2019 One of the best flatland bmx final runs ever caught on tape from the legendary rider Terry Adams (USA). His style, power and combos motivates and inspires many people LoadingGet YouTube without the ads. Rubik's Nations Cup - WCA World Championship 2019 - Duration: 27:28. LaZer0MonKey 43,750 views. New Published on Jul 8, 2019 Jean William Prévost at the world championship impresses every single one of the spectators in this hyper energetic final run. Pedal moves like never seen before. LoadingGet YouTube without the ads.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T16:35:35+09:00

Create React AppからStorybookの追加が超簡単だった。

概要

ReactでStorybook使ってみたくて、色々調べてた結果、
設定面倒なのかなーと思ってたらCreate React Appからの追加が超簡単だったという話です。

環境構築

今回はyarnでゴリゴリ入れていきましょう。

yarn global add create-react-app
yarn create react-app sample-storybook
cd sample-storybook
yarn add storybook
yarn storybook

ここまで来ると、「お？Create React Appで作ったプロジェクトやんけ！」
と勝手に解釈してくれて、良い感じに雛型を作ってくれます。超便利ですね。

再度yarn storybookを叩くと、http://localhost:9009でStorybookの
サーバーが立ち上がります。以上です。

コンポーネント追加

Material-UIのボタンを追加してみます。
（実際は自作のコンポーネントを追加するような使い方になると思いますが）

yarn add @material-ui/core
src/stories/index.js
import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

+ import MaterialButton from '@material-ui/core/Button';

storiesOf('Welcome', module).add('to Storybook', () => (
  <Welcome showApp={linkTo('Button')} />
));

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>? ? ? ?</Button>
  ))
+  .add('material', () => (
+    <MaterialButton
+      variant="contained"
+      color="primary"
+      onClick={action('clicked')}
+    >
+      Primary
+    </MaterialButton>
+  ));

ホットリロードで画面が更新されています。良いですね。
image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T15:57:00+09:00

PWAのmanifest.jsonを動的に生成する

iOSにおける問題

WebサイトをPWAに対応させる
上記の対応を行ったサイトで実際にホーム画面追加したアプリを起動してみると、Andoroidでは問題なく利用できましたが、iOSではログイン画面が開きました。
セッション情報をLocal Storageに保存していた場合に、AndroidではLocal Storageの情報がブラウザと共有されるのに対し、iOSでは共有されないようです。

再度ログインし直せばそれで済む問題ではありますが、ユーザーにとっては２度手間になってしまいます。

start_urlにパラメータを付加したい

上記の問題を解決するために、ホーム画面にアイコンを追加するタイミングでURLパラメータにセッショントークンを追加してログイン情報を引き継ぐことにしました。
そのために、manifest.jsonの内容を動的に作成し、start_urlにパラメータを付加することを検討しました。

linkタグを書き換えられるようにする

まず、manifest.jsonを読み込むためにhtmlに追加したlinkタグを次のように書き換えます。

index.html
<link rel="manifest" href="/manifest.json" />

↓

index.html
<link rel="manifest" id="my-manifest" />

これで、次のようにしてmanifest.jsonを置き換えられるようになります。

document.querySelector('#my-manifest').setAttribute('href', '/manifest.json');

manifest.jsonを動的に生成する

次のようなfunctionを用意しておき、セッショントークンを生成したタイミングで呼び出すことでセッション情報を付加したURLを作ることができました。

manifest.js
var setManifestURL = function (token = null) {
    var myUrl = window.location.href;
    var startUrl = token ? myUrl + "?token=" + token : myUrl;

    var manifest = {
      "name": "Sample Application",
      "short_name": "SMPL APP",
      "theme_color": "#2196f3",
      "background_color": "#2196f3",
      "display": "standalone",
      "start_url": startUrl,
      "icons": [
        {
          "src": myUrl + "/img/icons/icon-72x72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-96x96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-128x128.png",
          "sizes": "128x128",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-144x144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-152x152.png",
          "sizes": "152x152",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-384x384.png",
          "sizes": "384x384",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ]
    }

    const stringManifest = JSON.stringify(manifest);
    const blob = new Blob([stringManifest], {type: 'application/json'});
    const manifestURL = URL.createObjectURL(blob);
    document.querySelector('#my-manifest').setAttribute('href', manifestURL);
}

注意点

最初にこの方法を試した時にはURLや画像が無効だというエラーが出続け、解消するのに苦労しました。

原因はURLの指定方法にありました。
通常はstart_urlやアイコンのURLは相対パスでよかったのですが、動的にmanifestを読み込ませる場合はフルパスを指定しないと有効になりませんでした。

参考資料

下記を参考にしました。
How to Setup Your Web App Manifest Dynamically Using Javascript

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T15:30:18+09:00

【JavaScript】初めてのAnimationライブラリ導入(TweenMax)

アニメーションってかっこいいですよね。
かっこいいサイトって大体めっちゃ動きますよね。
ということでAnimationライブラリを使う練習してみます。

TweenMaxとは

今回はTweenMaxというライブラリを使います！
凄く高機能らしいのですが、ファイルサイズがめっちゃ重いみたいです（113KB)
こちら曰く、

TweenMaxは113KBと容量が大きいものの、モジュールを分解して読み込むことが可能。TweenMaxの兄弟であるTweenLiteだとわずか28KBです。パッケージマネージャーnpmやTypeScriptでの利用も、他のライブラリと比べて一歩進んでいます。詳しくは記事「ES Modules対応のgsapの使い方 - Qiita」を参照ください。

とのこと。
ファイルサイズを軽く扱う方法についても習得していければと思います。
(あとで参考にしそうなサイトたち）
https://blog.yuhiisk.com/archive/2016/10/05/create-tweenlite-animation1.html
https://qiita.com/manabe_66/items/42fec3e488190a0146f8

TweenMax扱う方法

https://rfs.jp/sb/javascript/03js/greensock.html
http://un-tech.jp/tweenmax-started/
今日はこちらのサイトを参考に。

公式サイトでダウンロード可能です。
CDNを利用する場合は、

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

これをHTMLに貼り付けるだけでオッケーらしいです。
軽量化等はひとまず置いて、今回はこれでやってみます。

TweenMax書き方

メソッドたくさんあるようですが、主要なものだけ。

メソッド 効果
set プロパティの値のみ
from 設定した値から初期値にアニメーション
fromTo 初期値を再設定・設定した値から初期値にアニメーション
to 初期値から設定したアニメーション
stagger 配列化されたセレクターを順にアニメーション 
TweenMax.to('.c-kirby',2,{x: 700,repeat:-1,yoyo:true});

これはメソッドtoですね。
{}の中は順に
動かす要素の指定 プロパティ指定 アニメーションの秒数 繰り返し設定(-1は無限リピート) 繰り返し方法（yoyoは0-100%-0%の順で繰り返す）
色々な指定ができるので、詳しいのは公式を見るかhttp://reiwinn-web.net/2017/06/07/tweenmax/
このサイトが良さげです。

読み込むとちゃんと動きました！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T14:13:25+09:00

oclif (JS)で Command Arguments をする

JavaScriptを使用した (not TypeScript) oclif で、 Command Arguments を使用して躓いた時のメモです。

oclif って？

Webサイト: https://oclif.io/
Heroku が主体となって開発している Node.js の CLIフレームワーク です。
他のCLIフレームワークと比べて機能が豊富で柔軟性があるのが特徴です。（個人の感想）

Command Arguments？

oclif の機能の一つに、 Command Arguments というものがあります。flag(--hoge <data>) と違い、コマンド名の後ろにそのまま引数を入力する事ができます。 (例: mycli hogecommand arg1)

これについて、詳しい事は 公式ドキュメント に書いてあるのですが、これをJSで使用すると、 Parse Error になり読み込めません。
書き忘れなのかなー...と思い、 example-multi-js を確認してみましたが見当たりませんでした。

なお、 TS版のExample example-multi-ts には Command Arguments のコードが入っています。

解決策

一か八か下記のように書いてみたら上手くいきました。(!?)

HogeCommand.args = [
  { name: 'arg1' },
  ...
];

全文
const { Command } = require('@oclif/command');

class HogeCommand extends Command {
  async run() {
    const {args} = this.parse(HogeCommand);

    // args.arg1 を使う処理...
  }
}

HogeCommand.args = [
  { name: 'arg1' }
];

HogeCommand.description = `hoge piyo`;

module.exports = HogeCommand;

最後に

CLI作りたのちい?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T14:03:27+09:00

WebPackのlibraryTargetによる出力結果の違いと、TypeScriptで吐いた.d.tsの悲しみ

WebPackのlibraryTargetによる出力結果の違いと、TypeScriptで吐いた.d.tsの悲しみ

　WebPackでライブラリを作成する際、他のプロジェクトからWebPack経由でモジュールとして出力する際は amd 、HTMLの<SCRIPT>から非モジュールとして呼び出す場合は global を使っていました。ぶっちゃけていうと、内容をよく理解せずに使っているわけです。これではまずいので、 libraryTarget の設定でどう出力内容が変わるのかを確認してみることにしました。

出力内容

library の設定を JWF という名前にした時の結果をまとめました。

libraryTarget 一行目
var var JWF =
assign JWF =
this this["JWF"] =
window window["JWF"] =
self self["JWF"] =
global window["JWF"] =
commonjs exports["JWF"] =
commonjs2 module.exports =
commonjs-module module.exports =
amd define("JWF", [], function() { return
amd-require require([], function() { return
umd (function webpackUniversalModuleDefinition(root, factory) {
umd2 (function webpackUniversalModuleDefinition(root, factory) {
jsonp JWF(/******/ (function(modules) { //
system System.register("JWF", [], function

　設定によってwindowのプロパティになったりグローバル変数になったりしています。WebPackから使う場合はモジュールの体を成していれば上手くやってくれますが、<SCRIPT>から直接呼び出すライブラリとして使う場合は、自分できちんと対処する必要があります。とりあえず動いていたので気にしていませんでしたが、もっと早く確認すべき内容でした。

おまけ：TypeScriptの悲しみ

　TypeScriptで開発したコードをWebPackで非モジュールのライブラリを生成した場合、問題になるのがTypeScriptの定義ファイルである .d.ts です。WebPackでモジュールとして開発し、<SCRIPT> から直接呼び出す形に libraryTarget を var や global 変更しても、.d.ts はモジュールの形式のままとなります。各機能のインスタンスが変数に入っているのに、それを利用したコードを書いても、開発環境の入力補完に対応せず、コンパイル時もエラーの山となります。

　これの対処法を色々と調べたのですが、有用な情報はなぁんにも見つかりませんでした。これで困っている人は人っ子一人いないようです。無いものは作る、有るものですら作るが心情なので、結局自分で変換プログラムを作りました。やっていることはモジュール定義を全て削除、そのかわりnamespaceをlibrary名で作成し囲むというものです。TypeScriptのCompilerAPIを使えば、どこに何の定義があるかを簡単に調べられるので、普通に字句解析するより簡単に作ることが出来ました。欲しい人がいるならWebPackからすぐに使える形にしてnpmに登録することも可能です。しかしニッチすぎて需要は無いでしょう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T13:19:14+09:00

lightgallery.js : 軽量、マルチデバイス対応、高機能画像ギャラリー 作成【導入編】

サイトにフォトギャラリーを作成するときに「lightgallery.js」を利用してみました。
cssとjsを少し修正するだけで簡単にカスタマイズができ、非常に使いやすかったので利用方法を下記に紹介します。

lightgallery.jsとは

lightgallery.jsは軽量のjQuery非依存のlightbox系のプラグインです。
画像や動画、(YouTube/Vimeo),iframeなどを使用でき、レスポンシブ対応、マルチデバイス対応、アニメーションなどのカスタマイズが簡単で高機能なスクリプトです。
DEMOページで動作が確認できます。

lightgallery.jsの特徴

  • レスポンシブ対応
  • 豊富なモジュールの追加・削除が簡単
  • タッチデバイス対応
  • カスタマイズ簡単
  • アニメーションのサムネイル
  • YouTube Vimeo対応
  • 20種類以上のアニメーション
  • ダイナミックモードの設定
  • ズーム、フルスクリーン
  • HTML5動画対応
  • SNSシェア
  • 画像の読み込み高速化
  • レスポンシブ画像
  • ギャラリーの画像に固有のURLを指定可能

lightgallery.jsの利用方法

まずはTopページの真ん中にある「View on github」をクリックしてgithubページにいってください

githubの「Clone or download」ボタンをクリックし「Download ZIP」をクリックしてソースをダウンロードしてください。

ダウンロード後、ファイルを解凍すると以下のようなファイルやデータがはいっています。
スクリーンショット 2019-07-18 13.32.59.png

この中に「dist」と書かれたフォルダがあります。
このファイルを開くと４つのフォルダがあります。
スクリーンショット 2019-07-18 13.39.30.png
プラグインを使用するのに必要なファイルになります。

lightgallery.jsの読み込み

まず<head>ドキュメントの中にlightgallery.cssを追加します。

<head>
    <link type="text/css" rel="stylesheet" href="css/lightgallery.css" /> 
</head>

次に、lightgallery.jsを追加します。
lightgalleryプラグインを含めたい場合は、lightgallery.jsの後に追加することができます。

<body>
    ....

    <script src="js/lightgallery.js"></script>

    <!-- lightgallery plugins -->
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>
</body>

※とくに中身をカスタマイズしないのなら軽量の'lightgallery.min.css'、'lightgallery.min.js'をお使いください。

プラグインの追加

lightgalleryのjavascriptは機能ごとに別れているので、使いたい機能があればそのプラグインを追加してください。
スクリーンショット 2019-07-18 13.56.24.png

マークアップ

lightgalleryのマークアップには以下のような記述が推奨されています。

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

プラグインの呼び出し

プラグインを呼び出しギャラリーを起動させます。

<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery')); 
</script>

以上で基本的な導入の仕方です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T12:22:36+09:00

NodejsでHTTPSクライアントの実装 




/**
 * nodejsで任意のサーバーにHTTPSでリクエストを行う
 *
 *
 */


// 各種モジュールの読み込み
var http = require("https");
var fs = require("fs");
var server= http.createServer();
var webclient = require("request");

webclient.post({
  url: "https://sample.com/index/login",
  headers: {
    "Access-Token": "senbiki_test"
  },
  body: JSON.stringify({foo: "bar"})
}, function (error, response, body){
  console.log(body);
});

var  options = {
    host: "nasse.com",
    port: 443,
    method: "POST",
    path: "/api/toyota/v1/authenticate/login",
    headers: {
        "Access-Token": "my-uesr-test"
    }
};


var accessTokenSecret = null;
var request = http.request(options, function (response) {
    console.dir("~~~~")
    console.dir(response);
    for (var prop in response)
    {
        console.dir(prop)
    }
    console.dir(response.statusCode);
    console.dir(JSON.stringify(response.headers.Response.access_token_secret))
    response.setEncoding("UTF-8");
    response.on("data", function (chunk)
    {
        console.dir("Response: " + chunk);
    })

    response.on("end", function (chunk)
    {
        console.dir("Response End");
    })
})




request.write("");
request.on("error", function (e)
{
    console.dir("~~~~~~~");
    console.dir(e);
    console.dir("error: " + e.message)
})
request.end();

options = {
    host: "sample.com",
    port: 443,
    path: "",
    method: "get",
    headers: {
        "Access-Token-Secret": "任意のアクセストークン"
    }
}


server.on("request", function (request, response)
{
    // console.dir(request);
    // console.dir(response);
    response.writeHead(200, { "Content-Type": "text/html;charset=UTF-8" });
    response.write("マルチバイト文字列");
    response.end();
    var f = fs.readFileSync("./index.js", {encoding: "UTF-8"});
    // console.dir(f);
})
server.listen(3000);
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T11:19:22+09:00

【JavaScript修行】初めてのライブラリ:Moment.jsを使う環境を整えたい

日付指定で取得できるAPIを使ってあれこれやってたら
Dateオブジェクトの面倒さにぶつかりました。

moment.jsを使うと簡単に日付加工ができる！
と聞いたのでやってみます。

package.jsonってファイルがあった

人から頂いた環境で作業をしてて、まだまだ環境についてはからきしです。
https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847
これをみてpackage.jsonファイルについてだいたい掴んでおきました。
--saveコマンドを打つとpackage.jsonにバージョンを記述してくれると。ふむふむ

moment.jsインストール

 npm install --save moment

このコマンドでインストールできました。
でも。。
「package.json」「package-lock.json」の２つのファイルができてしまいました。

https://tsuyopon.xyz/2019/02/11/what-is-the-package-lock-json/
ここでpackage-lock.jsonについて学習。
なるほど、バージョンがガチッと固定されるんですね。

ところで日付といえば、お国によって色々dですよね。
分から書き始めるとことか、表記が特殊な物とかとかとか....
moment.jsには全部がマルっと入ってる。ということは、ファイルがめちゃくちゃ重いらしいです。
日本のだけでいいのにー
ということで、日本語以外の表記の排除に挑戦してみます。

moment.jsの軽量化作戦

https://qiita.com/ksk1015/items/9ca85ec09dd74f70548e
これを見ると、プラグインで無視すればいいとか。プラグインって？
https://qiita.com/R-Yoshi/items/30282dee7b6d5ddd6622#ignoreplugin
ここのIgnorePluginの項目がちょうどいい感じです。
そんなこともできるんですね。

webpack.configって何だろうか。。
というかそもそもwebpackについてよく知らないなあ。
ということで、昨日ざっと勉強しました。

IgnorePluginの構文
new webpack.IgnorePlugin(requestRegExp, [contextRegExp])

requestPlugin・・・作成したくないモジュール名を正規表現で記述
contextRegExp・・・対象とするディレクトリ（オプション）

plugins: [
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],

ロケールのファイルをこれで除外できます。

moment.js使ってみよう

https://www.yoheim.net/blog.php?q=20180201
ここをみつつ学習。

momentjsの準備
const moment = require('moment');
//or
import moment from 'moment'

これをjsファイル内に記述することで使えるようになります。また、
日本のロケールを有効にするには

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

をjsファイル内に記述します。

const moment = require('moment');
const thisYear = moment().year();
console.log(thisYear);   //2019

ちゃんと使えてますね！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T10:55:12+09:00

曜日ごとに日替わり画像を表示する

準備

日替わり画像にidを指定する

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">

日替わり画像を挿入するjsを書く

<script>
    (function() {
        "use strict";
        var target_id = "daily_image"
          , image_list = ["sun.jpg", "mon.jpg", "tue.jpg", "wed.jpg", "thu.jpg", "fri.jpg", "sat.jpg"]
          , target = document.getElementById(target_id)
          , weekday = new Date().getDay();

        target.src = image_list[weekday];
    }());
</script>

完成形

<!doctype html>
<meta charset="utf-8">
<title>日替わり画像のテスト</title>

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">
<script>
    (function() {
        "use strict";
        var target_id = "daily_image"
          , image_list = ["sun.jpg", "mon.jpg", "tue.jpg", "wed.jpg", "thu.jpg", "fri.jpg", "sat.jpg"]
          , target = document.getElementById(target_id)
          , weekday = new Date().getDay();

        target.src = image_list[weekday];

    }());
</script>

実験

完成形を読み込むと

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">

の部分が

<img id="daily_image" src="wed.jpg" alt="日替わり画像">

に変換される
※この記事を書いた日が水曜日であるため、wed.jpgとなっております。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T10:21:25+09:00

たった5分で自分だけのFitbit Clock Faceを作る

はじめに

数年位前からFitbitの活動量計を愛用しております。
Fitbit Charge HRからはじまりFitbit Charge 2と買い替え、最近Fitbit Versa（と体重計のAria2）を購入しました。

Charge HR/2は画面のカスタマイズはあまりできなかったのですが、Fitbit VersaはスマートウォッチらしくClock Faceのカスタマイズが結構自由にできます。
開発環境の準備から実機インストールまでがとても楽だったことに感動したのでそのご紹介です。

Fitbitってなぁに？という人は公式サイトへGo
https://www.fitbit.com/jp/home

目的

5分以内で自分だけのFitbit Versa Clock Faceを作成し、実機で確認する。

準備するもの

  1. Fitbit Versa
    Wifiの設定はしておいてください。
    （Fitbit Versaセットアップ時にやるのでかかる時間は0秒とします）

  2. Fitbitのユーザアカウント
    (Fitbitの利用者なら既にあるはずなのでかかる時間は0秒とします）

  3. CSSの知識
    （身に着けておいてください。0秒。）

作業開始！

Fitbit Studioへのアクセス（所要時間1分）

https://studio.fitbit.com
Top.png

右側のStartからFitbitのユーザアカウントでログインしてください

Projectの作成（所要時間30秒）

List.png
New Projectを押下し、

Create.png
Nameに適当な名前をいれて、
TemplateはDigital Clockを選び
Createを押下

ide.png

こんな画面がでてきたらOK！!

テンプレートとWebのIDEが準備されているのですごく楽ですね

自分だけのClock Faceを作る（所要時間30秒）

css.png

時間がないのでresources/styles.cssのbackgroundのviewport-fillを適当に変えましょう！
redからblueに変えてみました。

実機にインストールする(所要時間3分）

Fitbit Versa実機の設定にあるDeveloper Bridgeを押下し、
[Disconnected]から[Connecting to Server]を経て[Connected to Server]になるまで待つ

Connected to Serverになったら、Web IDEの画面上部のデバイス選択部分から[Versa]が選択できるようになるので、
Versaを選択して[Run]を押下！！！！

install.png

十数秒かかるので気長に待ちましょう。

完成！

おつかれさまでした。
手元のVersaにはあなたオリジナルのClock Faceが表示されていることでしょう。

（イメージ画像）
クリップボード01.png

まとめ

  • テンプレートが用意されていて楽！
  • WebのIDEが用意されていて楽！
  • 実機にインストールするのもボタン2つくらいで楽！
  • （完成のところでチラッとみせた）Fitbitのシミュレータもあるので検証が楽！

簡単に作れるからキミも作ろう！

To be Continued...?

上記をベースに某ゲームに登場するハンドヘルド端末風なClock Faceを作りました。（著作権とかｺﾞﾆｮｺﾞﾆｮなので非公開）
開発をしていく中でFitbitならではのできること、できないことがわかってきたのでTIPSとしてまとめるかもしれません。

image.gif

それではよきFitbitライフを

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T07:15:56+09:00

【Programming News】Qiitaまとめ記事 July 23, 2019 Vol.9

筆者が昨日2019/7/23(火)に気になったQiitaの記事をまとめました。昨日のまとめ記事はこちら。

2019/7/15(月)～2019/7/20(土)のWeeklyのまとめのまとめ記事もこちらで公開しております。

Python

Java

Swift

Kotlin

Rails

JavaScript

jQuery

Vue.js

Angular

Laravel

CakePHP

TypeScript

Google Apps Script

Go言語

R言語

VBA

Nim

MySQL

PostgreSQL

Oracle

Azure

AWS

Docker

IoC

Git

UML

Raspberry

Develop

更新情報

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-24T00:07:19+09:00

Quarkを使ったデスクトップアプリでHello World

私はJavaScript、Electron勉強中の者です。
この投稿に書いてあることは公式をgoogle翻訳しながら気合いで読んだ内容となります。
間違っていたら指摘お願いします。m(_ _)m

詳しく知りたい方は公式を参考にし、本投稿は読まなくて問題ありません。

Quarkとは

Quarkとはデスクトップアプリを作成するための統合開発環境（IDE）とJavaScriptランタイムが付属されているソフトウェアツールです。
Quark上のIDEでコードを書き、プロジェクト構築のボタンを押すだけでデスクトップアプリを作成することができます。

ここが良さそう

  • QuarkはElectronで構築されており、アプリを作成する際にElectronの機能を使うことができる

  • Electronと同じく、HTML、CSS、JavaScriptでデスクトップアプリが作成できる

  • Electronと同じく、クロスプラットフォームでMac、Windows、Linuxで実行できる

  • 作成したデスクトップアプリを複数起動する場合はElectronよりもメモリを使用しない

    • Quarkでプロジェクトを作成すると、「ダブルクリック」でアプリを起動できる単一の出力ファイルを生成できます。 (※このファイルを"sketch"と言います。) このsketchを複数作り、同時に起動したとしても、共有のJavaScriptランタイムを使うため、使用されるリソースはElectronアプリ1つ分で動作できます。

  • VS Codeで使用されているMonaco Editorが組み込まれている

※使い勝手はVS Codeの方がずっと良かったです。

Install

https://quarkjs.io/download/

Screen Shot 2019-07-23 at 22.25.41.png

Hello World

公式のまんまですが、Hello Worldしてみます。

https://quarkjs.io/guide/hello-world-app.html

インストールしたQuarkを立ち上げるとこのような画面になるため、「Start a new project」をクリック

Screen Shot 2019-07-23 at 22.59.33.png

プロジェクト名を記入してCreate

Screen Shot 2019-07-23 at 23.00.13.png

「Open Project」をクリック

Screen Shot 2019-07-23 at 23.00.23.png

エディタが立ち上がる

Screen Shot 2019-07-23 at 23.01.04.png

setup.jsが元からあるのでその内容を変更します。
index.htmlとindex.cssも作成します。

setup.js
import html from './index.html';
import './index.css';

const element = quark.util.createElementFromHtml(html);
const view = quark.views.createTabsView('Hello World', element);
view.focus();

quark.util.setAppTheme({
    "background.dark": "#0D0A0B",
    "on.background.dark": "#ffffff",

    "background.default": "#0D0A0B",
    "on.background.default": "#ffffff",

    "background.light": "#1D1A1B",
    "on.background.light": "#ffffff",

    "background.divider": "#4D4A4B",

    "primary.default": "#25d55f",
    "on.primary.default": "#000000",

    "secondary.default": "#ff7246",
    "on.secondary.default": "#000000"
});
index.html
<div class="hello-container">
    <div class="hello-world">
        <div> Hello World. I'm Quark! Yayyy!!!</div>
        <div class="emoji">?</div>
    </div>
</div>
index.css
.hello-container {
    font-weight: 900;
    display: block;
    height: 100%;
    background: #000000;
}

.hello-world {
    font-size: 50px;
    background-color: #000000;
    height: 100%;
    text-align: center;
    padding-top: 260px;
}

.emoji {
    font-size: 110px;
    animation: rotation 2s linear;
    animation-delay: 1s;
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

「Build」を押して「Run」を押します

jvTFOeWXvM.gif

公式のHello Worldをただ実行しただけの投稿でした。読んでいただいてありがとうございました。m(_ _)m

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
JavaScriptの最新記事を毎日チェックされたい方はフォローお願いします。

日付別

タグ一覧