MENU

JavaScript

Software Design 2020 年 9 月号 あなたはどこから学ぶ[ステップアップ式]Vue.js 講座 JavaScript フレームワークの潮流がわかる を読みました

みなさん、こんにちは。 半年以上待ち続けた 3D プリンタが届いたので、最近の週末は 3DCAD ソフトばかり触ってるおっくんです。 今回は、Software Design 2020 年 9 月 号の感想を共有していきたいと思います。 虎の穴ラボでは、福利厚生として技術書の購入…

暴動(Riot)を始めよう ~ 「Riot.js で簡単 Web アプリ開発」を読みました ~

みなさんこんにちは。 ずっと見ないふりをしていた自宅のエアコンの故障疑惑を、認めざるをえなくなった虎の穴ラボのおっくんです。 みなさん、熱中症にはお気をつけください。 今回は、桑原 聖仁さん(@kuwahara_jsri)が書かれた、「Riot.js で簡単 Web アプ…

バーコード を読めるようになりたかったので ~ Shape Detection API を使ってみる~

皆さん、こんにちは。 とらのあなラボのおっくんです。 「バーコードを見れば、なんとなくは読める」となんてことを言う友人がいます。 詳しく聞くと、すべてではないけれど一次元バーコードであれば目で見てなんとなく読めるんだそうです。 言うからには「…

Web NFCを試してみました 〜 動作確認とアプリケーション作成 〜

皆さんいかがお過ごしですか?ラボのおっくんです。 気温が高い時期になってきました。室内にいても気が付くと脱水から熱中症になることもあるそうですので、お気を付けください。 今回は、Web NFC を試してみましたので、そちらをレポートします。 最終的に…

ボタンで閉じられる jQueryツールチップの作り方

こんにちは!そろそろ推しのアイドルのライブが恋しくなってきた、虎の穴ラボのS.Sです。 jQueryを使って簡単にツールチップを実装することが出来ますが、これに一手間加えて、ボタンで開閉ができるツールチップを作ってみましたので、今回はその作り方をご…

Puppeteerを使ってWebサイトの自動テストツールを作ってみた

こんにちは。虎の穴ラボのH.Hです。 今回はWebサービスの自動テストを試作したので、作ったアプリケーションについて書こうと思います。 なぜ作ろうと思ったか 虎の穴ラボでは、とらのあな通販やFantiaなど多くのWebサービスの開発を行っています。 日々様々…

新幹線の車内ニュースに思いを馳せて - CSSアニメーション -

こんにちは、虎の穴ラボのおっくんです。 昨今の COVID-19 関連ニュースの裏で、去る 3月13 日にひっそりと東海道新幹線車内のニューステロップの提供が終わってしまいました。 toyokeizai.net 特別な思い入れがあるわけではないのですが、そこに在ったもの…

ローカル環境でストリーミングをとりあえず試したい

こんにちは、虎の穴ラボのおっくんです。 これまで虎の穴開発室ブログで、AWS Elemental MediaConvert を使った動画ストリーミングについての記事を2件公開しています。 toranoana-lab.hatenablog.com toranoana-lab.hatenablog.com 今回は、もっと手軽にお…

Googleスプレッドシートに書き込まれたらSlackに通知する

こんにちは、最近はサウナにハマってるS.Sです。今回は、Googleスプレッドシートに書き込みがったあった時に、Google Apps Script (以降、GAS)を使って、Slackに通知する方法をご紹介します。 サンプルで用意しました以下のスプレッドシートを使って説明し…

Tone.jsとp5.jsで音の発生を可視化する

こんにちは、年末年始に新しくWindows10の自作PCを組んだ虎の穴ラボのおっくんです。 昨年から、Web audioを取り扱うライブラリとしてTone.jsを使って、 ブラウザで音を鳴らしたりということをしていたのですが、一歩進んで再生する音を可視化したいと思いま…

Chart.jsでいい感じの色を自動で割り当てる!

こんにちは、虎の穴ラボのH.Kです。 今回はChart.jsで可変の表示要素に対していい感じの色を割り当てる方法をご紹介します。 この記事で解決する課題 取得したデータによって比較対象に当たる要素数が可変になるようなグラフ(Chart.js)に綺麗に色をつける …

WebAssemblyで遊んでみるその4〜WebAssemblyで非同期通信して脱衣(仮)ブロック崩しにする〜

皆さんこんにちは。虎の穴ラボのY.Fです。 前回は番外編として、WebWorkerを使ったCanvas描画について書きました。 (前回の記事) toranoana-lab.hatenablog.com

WebAssemblyで遊んでみる番外編〜Web Workerを使う〜

こんにちは、Y.Fです。 前回までは、Rustを使ったWebAssemblyの作成と、JavaScript側との協調などについて書いてきました。 前回の記事はこちら toranoana-lab.hatenablog.com 今回は、少しWebAssemblyから離れて、Web WorkerによるCanvas描画及び、Worker内…

WebAssemblyで遊んでみるその3〜RustとTypeScriptの分業〜

こんにちは、Y.Fです。 (前回の記事はこちら) toranoana-lab.hatenablog.com 前回はweb_sysを使ってDOM操作までRustで行っていましたが、以下の理由から分離したいと思います。 web_sys に OffscreenCanvasRenderingContext2d のラッパーが無い WebWorkerで…

WebAssemblyで遊んでみるその2〜web_sysでブロック崩し〜

こんにちは。とらのあなラボ所属のY.Fです。 前回のWebAssemblyの記事ではチュートリアルを通して環境構築&JavaScriptとWebAssemblyを連携する方向でアプリケーションを作成しました。 (前回の記事はこちら) toranoana-lab.hatenablog.com 今回は、web_sysと…

WebAssemblyで遊んでみる〜Rust+wasm-pack環境構築編〜

こんにちは。とらのあなラボ所属のY.Fです。 最近情報収集していると俄にWebAssemblyの盛り上がりを感じます。 私はフロントエンドベースにして、Web周りを何でもやるエンジニアとして働いているのですが、 フロントエンドやるにあたってWebAssemblyについて…

Ionicでアニメ情報を取得するスマホアプリを作ってみた

こんにちは、虎の穴ラボのS.Sです。普段は、WEBエンジニアをやっている私ですが、 今回は、Ionicを使って、簡単にスマホアプリを作ってみましたので、 その内容をご紹介させていただきます。 Ionicとは Ionicとは、Google社のAngularというアプリケーション…

AWS CloudFront API を使ったキャッシュ削除ツール

こんにちは、虎の穴ラボのS.Sです。季節の変わり目でもあり、最近は朝晩が少し肌寒くなりましたね。さて弊社の通販サイトでは、画像のキャッシュサーバーにAWS CloudFrontを利用していますが、 キャッシュしている画像をリンクはそのままに、今すぐに新しい…