投稿

11月 19, 2018の投稿を表示しています

Node-RED で WebSocket を使った HTTP server push (1) ブラウザ表示更新

イメージ
Node-RED で WebSocket を使った HTTP server push (1) ブラウザ表示更新 : 目標 サーバからのきっかけでブラウザの表示を更新する 知識材料 Push技術(Wikipedia) Node-RED(Node-RED 日本ユーザ会) 利用環境 IBM Cloud ライト・アカウント(無料) IBM Cloud Node-RED (v0.19.4) (IBM Cloud の特別なノードは使用していないので、npm でインストールした Node-RED でも大丈夫です) 前提条件 Node-RED でフローが作成できる 今回のゴール サーバきっかけで、任意の文字列をブラウザに表示させる。 実践 Node-RED のフローと、ブラウザで表示する HTML と作る。 Node-RED フロー 使用ノード [input] inject ブラウザに表示したい文字列を Payload に入力する。 [output] websocket クライアントとなるブラウザ側が接続する URL を path に入力する。 ブラウザで表示するHTML 参考(MDN:WebSocket クライアントアプリケーションの記述) url 変数を、 [output] websocket の path で入力したURLと合わせる index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>WebSocket 試す1</title> </head> <body style="color: #000000; background-color: #ffffff; font-size: 100%"> <script type="text/javascript"> // 接続先URI var uri = "ws://" + "your.ho

Vue.extend() 使用時に data の中身を推論するには computed, methods あるいは props 定義が必要っぽい (2018 年 11 月時点)

Vue.extend() 使用時に data の中身を推論するには computed, methods あるいは props 定義が必要っぽい (2018 年 11 月時点) : Vue.extend() 使用時の data 推論には computed などの定義が必要っぽい Type Vue without TypeScript の JSDoc による戻り値などの型指定をやっていたところ $data についてつまづいたので Visual Studio Code により Vue CLI 3 や Nuxt.js 2 などで試しました。 Vue.extend() による $data の推論に必要と思われる options は・・・ computed と methods Vue Forum の投稿の Vue2.5 でthisが推論されない の computed のあたりを参考にしました。 data-inferred-by-computed-and-methods <script> import Vue from 'vue'; export default Vue.extend({ data() { return { name: 'taro', }; }, // computed は中身が通常の関数、アロー関数どちらでも問題なし // ただし定義をしない、あるいは空にすると $data 配下が any 扱いに computed: { [Symbol()]() { return 0; }, // [Symbol()]: () => 0, }, mounted() { // (property) name: string this.name; }, // methods は空でも定義があればよく、 // 中身の定義をする場合でも通常の関数、アロー関数どちらでもよい methods: { test: () => 1, exec() {}, }, }); </script>

HTML5/CSS3のニュースやTIPSなどのまとめ (2018年11月20日)

HTML5/CSS3のニュースやTIPSなどのまとめ (2018年11月20日) : 書籍:Bootstrap4ファーストガイド - CSS設計の手間を大幅に削減! 円や棒や折れ線などのグラフ毎のルールや作成法など、ダイアグラムを学べる「Diagrammm」 (かちびと) グーグル、画像圧縮ウェブツール「Squoosh」公開 (CNET) クレジットカード番号がログに残らないようにする「fluent-plugin-pan-anonymizer」をリリースしました (Hiroaki Sano) コードを最適化するためのフロントエンドフレームワーク10選 (UX MILK) head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール「Meta Tags」 (コリス) セキュリティエンジニアに必要なのは「言語化する力」徳丸浩 x メルカリ八木橋対談 (メルカン) 自動テストツールのヘッドレス化 (スターフィールド) CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン (Webクリエイターボックス) JavaScriptのArrayを知る、大きな目標への小さな一歩 - Array.prototype.filter編 (LIG) デザインにインパクトを持たせるクリエイティブなフリーディスプレイフォント (DesignDevelop) 詳細を読む

グーグル音声入力で記事を書くとこんな感じ - 節約系ミニマリスト0.5

イメージ
グーグル音声入力で記事を書くとこんな感じ - 節約系ミニマリスト0.5 : グーグル音声入力で記事を書くとこんな感じ - 節約系ミニマリスト0.5 どうも、万年厄年、節約系ミニマリストのルパン座3です。 私は繰り返し、ブログ記事は音声入力で書くべしと書いています。 なぜなら、執筆スピードが3~5倍速になるからです。 でも、なかなかみんなやってくれない! こんなに便利なのに~ といつも思っています。 それでいて、音声入力をせずに、ブログを書く時間が...

生産性を高める秘密兵器「タイムブロッキング」。その仕組みとは?

イメージ
生産性を高める秘密兵器「タイムブロッキング」。その仕組みとは? : 一日を効果的にスケジュールする方法を探している? それなら、タイムブロッキングを試してみてください。生産性が50%も向上するかもしれない(とくに困難なタスクにおいて)と聞けば、このハックを試す誘惑に抗うことは困難です。 オリジナルのエンクロージャ:

Firefox Quantum向けのWebExtensionsアドオンを作ってみる0

Firefox Quantum向けのWebExtensionsアドオンを作ってみる0 : Firefox 57から古き良きアドオンたちが使えなくなったので、 とりあえず手始めにマウスジェスチャーを作りました。 このページではとりあえず基本的な準備まで。 0. はじめに 使用言語は生JavaScript。ライブラリは使ったら負け。 Firefox 57以降向けに書いていくので、ES6も7もasync/await含めごりごり使っていきます。 そもそもWebExtensionsとは https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions 昔のアドオン (Legacy Add-on) に比べてセキュリティが強化された(らしい) W3Cで標準化されているらしく、ChromeやEdgeにもコードが使い回せる(らしい) 開発環境 Windows 10 x64 Visual Studio Code(使いやすい!) 基本的なファイル構造 src/ manifest.json アドオンの基本情報を書く。ファイル名もこの通りじゃないとダメ。 background.js バックグラウンドで動くスクリプト。つまりブラウザを起動すると一緒に動き始める。 全WebExtensions APIが使えるが、各ページにはアクセスできない。 content.js それぞれのタブ(ページ)で動くスクリプト。コンテンツスクリプトを言うらしい。 WebExtensions APIのうち runtime , i18n , storage くらいしか使えない。 1. マニフェストを書く https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json manifest.jsonにアドオンの基本情報を書きます。JSON形式だがコメントも書けるらしい。 manifest.json { "manifest_version": 2, // 必ず2 "name": "アドオンの名前&q

FirebaseのRealtimeDatabaseに保存したデータを配列にいれて連番を振る方法

FirebaseのRealtimeDatabaseに保存したデータを配列にいれて連番を振る方法 : はじめに エンジニアの養成学校に通い、プログラミングの勉強をはじめて6週間、FirebaseのRealtime DBとJavaScriptをつかってちょっとしたアプリ(マリオメーカーっぽいの)を作っていたところ、チャットを作ってた際はすごい便利だと思ってたFirebaseのRealtime DBの使い勝手さが想像以上に悪く、グーグル先生に頼っても解決できそうになかったので、自分なりに方法を考えてみたら上手くいったので、アウトプットの意も込めて、プログラミング超初心者ですが、Qiita初投稿します。 今回したかったこと 一度保存した特定のデータを引っ張りだすために、それぞれのデータに連番をつけたいと思い、色々試してみました。(複数のクライアントがデータを保存しても対応可) push()メソッドの特徴 複数のクライアントがデータを保存していく際はpush()メソッドがどうやら適している模様です。 push() メソッドを使用して、マルチユーザー アプリケーションでリストにデータを追加します。指定したFirebase 参照に新しい子が追加されると、そのたびに push() メソッドは一意の ID を生成します。この自動生成されたキーをリスト内の新しい各要素に使用することで、書き込みの競合を伴わず、複数のクライアントが同時に子を同じ場所に追加できます。push() によって生成される一意の ID がタイムスタンプに基づいているので、リストのアイテムは自動的に時系列で並べ替えられます。 抜粋 Firebaseドキュメント ただここで一つ問題点になるのが、与えられるユニークidがランダムに生成されるため、特定のデータを引っ張り出そうと思っても、引っ張り出せないこと。しかもたくさん調べた結果どうやらFirebaseには、自動で連番を生成(オートインクリメント)する方法がないみたい。ということで、色々試してはコンソールで確認をしてという作業を繰り返し他に抜け道がないかを考えました。 child_addedの特徴 自分が色々試す中で気づいたのがpush()が一つ一つデータを送信してるのに対して、child_addedはイベントが起きるたびに保存したデータ全

Keras で Amazon SageMaker を使用する

イメージ
Keras で Amazon SageMaker を使用する : (個人的には主客が逆で「Amazon SageMakerでKerasを使用する」の方がしっくりくるのですが、 公式がこの順 なのでそれに倣いました。) 概要 TensorFlowもKerasもたいして詳しくない私が、Amazon SageMakerの力を借りて、自前のモデルで画像分類を行うAPIを作成するまでに苦労した点の共有です。 SageMakerの日本語での情報はほとんどがビルトインアルゴリズムを使った方法についてのもので、対応フレームワークを使ってカスタムコードを利用したサンプルは少ないです。さらにKerasを使ったものは英語を含めても、ほとんど見当たらない状況です。 そんな状況なので、私のただの苦労話でも誰かの役に立つかもしれない。もしくはキチンとした知見のある人から適切なツッコミを受けられるかもしれない。というモチベーションでこの文章を書きました。 ちなみに結論から言うと、SageMaker使ってもTensorFlowやKerasの知識不足は補えません。結局、フレームワークについて知識が無いなら、大人しくビルトインアルゴリズムを使った方が良さそうです。 一方で、(矛盾するようですが、)ビルトインアルゴリズムも決して分かり易くはなく情報も少ないので、それなら開き直って情報がたくさんある有名フレームワークを勉強して使う、という選択もアリかもしれません。 SageMakerやKerasについては一通り知っている、という方は前置き飛ばして 本文 から読んで下さい。 また、手っ取り早くソースコードだけ読みたい方は 最後にまとめました ので、そちらを参照下さい。 前置き Amazon SageMakerとは 一言で言い表すのはなかなか難しいサービスですが、 AWS公式の言葉 を借りるなら、 Amazon SageMaker は、開発者やデータサイエンティストがあらゆる規模の機械学習モデルを短期間で簡単に構築、トレーニング、デプロイできるようにする完全マネージド型プラットフォームです。Amazon SageMaker を使用すると、通常、開発者による機械学習の足手まといになるような障壁をすべて取り除きます。 とのことです。 大量データの学習をしようと思ったら

[JavaScript]クラスの書き方(クラスの継承・メソッドのオーバーライド)

[JavaScript]クラスの書き方(クラスの継承・メソッドのオーバーライド) : この記事を書く目的 ・JavaScriptのクラスの書き方に慣れる ・忘れた時に確認する JavaScriptのクラス sample.js class Sample{ constructor(a,b){ this.a = a; this.b = b; } getA(){ return this.a; } getB(){ return this.b; } //クラスの継承  class Subsample extends Sample{ constructor(a,b,c,d){ super(a,b); this.c = c; this.d = d; } getC(){ return this.c; } getD(){ return this.d; } } } サンプル sample.js class Product{ constructor(name,price){ this.name = name; this.price = price; } info(){ console.log(`商品名:${this.name} ${this.price}円`); } } //フード class Food extends Product{ constructor(name,price,calorie){ super(name,price); this.calorie = calorie; } info(){ console.log(`商品名:${this.name} ${this.price}円 ${this.calorie}kcal`); } } //ドリンク class Drink extends Product{ constructor(name,price,amo

[ITmedia Mobile] 20代は「家族」「お金」よりも「インターネット」を重視 動画視聴利用意向の高さも明らかに So-net調べ

イメージ
[ITmedia Mobile] 20代は「家族」「お金」よりも「インターネット」を重視 動画視聴利用意向の高さも明らかに So-net調べ : インターネット接続サービス「So-net(ソネット)」が、11月21日のインターネット記念日に合わせて「インターネットに関する意識調査」実施。結果を公表した。「家族」「お金」よりも「インターネット」を重視するなど、特に20代ではインターネット依存度が高いことが明らかとなった。

タイムラインに絶対パスが表示される理由 - 阿久津良和のWindows Weekly Report

タイムラインに絶対パスが表示される理由 - 阿久津良和のWindows Weekly Report : Windows 10のタイムライン機能で、腑に落ちない動作がある。OneDriveフォルダーのドライブ文字が異なるPC間で、正しく参照できないケースがあるのだ。日本マイクロソフト担当者に聞いた内容と、筆者の検証結果をご報告する。

イーロン・マスクのトンネル掘削会社がDIY時計台キットを販売へ!?廃土をレゴブロック化

イメージ
イーロン・マスクのトンネル掘削会社がDIY時計台キットを販売へ!?廃土をレゴブロック化 : 地下トンネル計画を進めるボーリングカンパニーだが、総コストの15%以上を作業から出た泥の運搬に使うという。同社を率いるイーロン・マスクは、この泥を製品化して資金の循環を図ろうとしているようだ。 マスクの画策は、泥を材料とするレンガで時計台を建てようというもの。掘削地の周辺でレンガを消費すれば運搬コストはかからず、利益がトンネル掘削に還元できて2度おいしい。 ・DIY時計台キットの全製品ラインを立ち上げ 最近のTweetでマスクは、DIY時計台キットの全製品ラインを立ち上げていることをほのめかした。 Boring Co is launching a whole product line of DIY watchtowers. You get bricks & a picture. — Elon Musk (@elonmusk) 2018年11月15日 一見、ジョークにも捉えられかねないこの発想だが、株価に左右されない資金を得たいと望むマスクは、突飛なアイデアを実際に製品化ししまう商魂の逞しさをもっている。 これまでも火炎放射器やキャンディなど、本業からはかけ離れたところでの商売を展開し、世間を驚かせている。 今回も、なぜ時計台なのかは不明だが、製品化がうまくいけば他の建造物のDIYキットも製作可能だろう。 ・打ち上げイベントでDIY時計台キットの全貌が明らかに レンガの生産システムに関しては、すでにボーリングカンパニーがトンネル掘削技術の研究を進めるホーソーンで開発されているとの話もあり、今年の初めには同システムで作られたレゴのようなレンガの映像が公開されている。 同社は、レンガがコンクリートブロックよりもしっかりとしていると主張しており、もしこれが本当なら同社のブランド力もあいまって製品価値は十分なものだろう。 当時から、建造物のキットを作りたいと言っていたマスクだが、それ以来レンガの商用化計画を温めてきたようだ。 12月10日には打ち上げイベントがおこなわれる予定となっていて、ここではDIY時計台キットのさらなる詳細が明らかになることが期待される。 参照元: Elon Musk’s Boring Company is launching D

日産のクーデター?救世主ゴーン氏逮捕「私的流用が判明」日本で外国人経営者は成功しないというジンクス(木村正人) - 個人 - Yahoo!ニュース

イメージ
日産のクーデター?救世主ゴーン氏逮捕「私的流用が判明」日本で外国人経営者は成功しないというジンクス(木村正人) - 個人 - Yahoo!ニュース : 日産のクーデター?救世主ゴーン氏逮捕「私的流用が判明」日本で外国人経営者は成功しないというジンクス(木村正人) - 個人 - Yahoo!ニュース 過少申告額は億単位[ロンドン発]日産自動車(本社・横浜市)のカルロス・ゴーン会長が有価証券報告書に自らの報酬を過少に記載した金融商品取引法違反容疑で東京地検特捜部に逮捕され、世界中に激震が走りました。 過少申告した金額は億単位にのぼるそうです。 社長兼最高経営責任者(CEO)から退いたゴーン氏の日産で...

Amazon Rekognitionのテキスト検出を利用して、新しいアーキテクチャアイコンのサービス名を取得してみた

イメージ
Amazon Rekognitionのテキスト検出を利用して、新しいアーキテクチャアイコンのサービス名を取得してみた : はじめに AWSチームのすずきです。 Amazon Rekognition、AWSの画像認識サービスでは、画像ファイルに含まれるテキスト文字を抽出する事が可能です。 当機能を利用して、新しいAWSアーキテクチャアイコンの […]

Amazon RDS for MySQL 8.0のデフォルト認証プラグインはmysql_native_password

イメージ
Amazon RDS for MySQL 8.0のデフォルト認証プラグインはmysql_native_password : MySQL 8.0 になって、デフォルトのユーザー認証方式が新規に導入された caching_sha2_password に変わりました。 クライアント(libmysqlclient)も caching_sha2_pas […]

日産のゴーン会長を事情聴取、報酬過少申告の疑い - ロイター発 World&Business

イメージ
日産のゴーン会長を事情聴取、報酬過少申告の疑い - ロイター発 World&Business : NHKなど国内メディアは19日、東京地検特捜部が日産自動車のカルロス・ゴーン会長を金融商品取引法違反容疑で事情聴取を始めたと報じた。自らの報酬を過少に申告した疑いがあるという。

疑惑のゴーン氏、年収19億円でも「日産CEOの報酬は低い」と力説 - inside Enterprise

イメージ
疑惑のゴーン氏、年収19億円でも「日産CEOの報酬は低い」と力説 - inside Enterprise : 仏ルノー・日産自動車・三菱自動車の会長を兼務するカルロス・ゴーン氏が自らの報酬を過少申告した疑いがあるとして、東京地検特捜部が金融商品取引法違反の容疑で事情聴取を始めたとの報道が出ている。容疑が固まり次第逮捕する方針という。過少に申告した金額は億単位にのぼるとされる中、ゴーン氏の高額報酬について「週刊ダイヤモンド」が2018年7月に報じた記事を再掲する。

ゴーンCEO解任へ、注目の後継候補はミシュランの「後輩」 - 『週刊ダイヤモンド』特別レポート

イメージ
ゴーンCEO解任へ、注目の後継候補はミシュランの「後輩」 - 『週刊ダイヤモンド』特別レポート : 仏ルノー・日産自動車・三菱自動車の会長を兼務するカルロス・ゴーン氏が自らの報酬を過少申告した疑いがあるとして、東京地検特捜部が金融商品取引法違反の容疑で事情聴取を始めたとの報道が出ている。実際に、逮捕となれば後継人事に焦点が当たることは必至。ここでは「週刊ダイヤモンド」が2018年4月に後継候補について報じた記事を再掲する。

自動運転車の中身はスタートアップの塊だった

イメージ
自動運転車の中身はスタートアップの塊だった : 自動運転車の中身はスタートアップの塊だった   日本経済新聞 Full coverage

ゴーン日産会長を逮捕へ 金商法違反の疑い

イメージ
ゴーン日産会長を逮捕へ 金商法違反の疑い : ゴーン日産会長を逮捕へ 金商法違反の疑い   日本経済新聞 Full coverage

ゴーン日産会長の解職提案 報酬を減額し記載

ゴーン日産会長の解職提案 報酬を減額し記載 : ゴーン日産会長の解職提案 報酬を減額し記載   日本経済新聞 Full coverage

【タイGDP】7-9月期は前年同期比+3.3%増~純輸出の悪化で5期ぶりの3%台成長に鈍化

イメージ
【タイGDP】7-9月期は前年同期比+3.3%増~純輸出の悪化で5期ぶりの3%台成長に鈍化 : 2018年7-9月期の実質GDP成長率は前年同期比3.3%増 1 と、前期の同4.6%増から低下し、Bloomberg調査の市場予想(同4.2%増)を大きく下回る結果となった(図表1)。 実質GDPを需要項目別に見ると、主に純輸出の悪化が成長率低下に繋がった。 民間消費は前年同期比5.0%増と、前期の同4.5%増から更に上昇した。財別に見ると、たばこの物品税増税を背景に非耐久財(0.8%増)が鈍化する一方、自動車販売が好調な耐久財(16.7%増)やサービス(7.7%増)、半耐久財(4.3%増)が加速した。 政府消費は同2.1%増(前期:同2.0%増)と、ユニバーサル・ヘルスケア・カバレッジの支出拡大により僅かに上昇した。 投資は同3.9%増と、前期の同3.7%増から小幅に上昇した。投資の内訳を見ると、まず民間投資は同3.9%増(前期:同3.2%増)と上昇した。民間設備投資(同3.4%増)と民間建設投資(同5.4%増)がそれぞれ改善した。また公共投資は同4.2%増(前期:同4.9%増)と低下した。公共建設投資(同4.2%増)こそ拡大したものの、公共設備投資(同4.1%増)が鈍化した。 在庫変動の成長率寄与度が+5.8%ポイントと、非貨幣用金の輸入が増加して前期の+1.4%ポイントから大きく増加した。 純輸出は実質GDP成長率への寄与度が▲7.6%ポイントと、前期の▲0.5%ポイントから悪化した。まず財・サービス輸出は同0.1%減(前期:同6.8%増)とマイナスとなった。うち財貨輸出が同0.2%減(前期:同7.4%増)、サービス輸出が同0.2%増(前期:同4.9%増)と、それぞれ低下した。また財・サービス輸入は同10.7%増(前期:同8.3%増)と更に拡大した。うち財貨輸入が同9.4%増(前期:同7.2%増)、サービス輸入が同16.9%増(前期:同13.3%増)と、それぞれ上昇した。供給項目別に見ると、農業と製造業、観光関連のサービス業の鈍化が成長率低下に繋がった(図表2)。 農林水産業は前年同期比4.3%増と、前期の同10.2%増から低下した。農業・林業(5.0%増)は堅調な拡大を維持したものの、好天に恵まれて産出量が大きく伸びた前期(同11.4%

第一生命、2018年度上半期の業績を報告

イメージ
第一生命、2018年度上半期の業績を報告 : 新契約は伸び悩み、保有契約はほぼ横ばい 第一生命保険株式会社(以下「第一生命」)は11月14日、2018年9月30日までの上半期の業績結果を発表した。 今季の販売成果を反映する新契約は1年間の保険料に換算すると460億円で、前年同期比84.5%に留まった。うちわけでは大部分を占める個人保険が前年同期の80.6%、全体の5分の1弱を占める個人年金保険は前年同期を上回る110.5%だった。医療保険や生前給付保障などの商品は前年同期比76.5%だった。 保有契約の年換算保険料は個人保険が微減で個人年金保険は微増、合計2兆1360億円で2017年度末の99.5%に留まった。 収益増ならびに経費減で利益は大幅に増大 中間損益の計算では、経常収益が前年同期より増加したことに対して経常費用が減少、経常利益は1791億6300万円で前年同期と比べて約13%増加、中間純利益も940億7500万円で約30%増加した。 新契約が伸び悩んだため基礎収益は前年同期をやや下回ったが、有価証券の売却益などキャピタル収益が加わり、経常利益の増加に貢献した。 第一生命は利益増大で資産を積み上げソルベンシー・マージン比率も向上、2018年度の中間点を折り返した。 (画像は第一生命公式ホームページより) ▼外部リンク 第一生命 リリース http://www.dai-ichi-life.co.jp/ ●この記事に関連したニュースカテゴリ: その他 (記事提供:スーパー・アカデミー) オリジナルのエンクロージャ: 20181119190004.jpg

19年度の専攻医1次登録は「順調」-専門医機構・寺本理事長

イメージ
19年度の専攻医1次登録は「順調」-専門医機構・寺本理事長 :  日本専門医機構の寺本民生理事長は19日の記者会見で、2019年4月に専門研修を開始する専攻医の1次登録(募集)の数が順調に増えていると述べた。1次登録の締め切りは11月21日。

全自病病院、7対1からの移行は一部-「看護必要度II」は2割が選択

全自病病院、7対1からの移行は一部-「看護必要度II」は2割が選択 : 全国自治体病院協議会(全自病)はこのほど、2018年度診療報酬改定の影響についての調査結果(第1報)を公表した。有効回答が得られた会員559病院のうち、18年3月1日時点で7対1一般病棟入院基本料を2...

地域医療支援病院、「自らの努力では承認困難」-茨城県が検討会で報告

イメージ
地域医療支援病院、「自らの努力では承認困難」-茨城県が検討会で報告 :  自らの努力では承認を受けることが困難な病院が存在している―。人口10万人当たりの医師数が全国ワースト2の茨城県で、地域医療支援病院を目指す医療機関の前に承認要件が「高い壁」となって立ちはだかっている。1...

Alteryx2018.4新機能紹介:Publish to Tableau Server Toolが新しくなってConnectors(コネクタ)カテゴリから選べるようになりました

イメージ
Alteryx2018.4新機能紹介:Publish to Tableau Server Toolが新しくなってConnectors(コネクタ)カテゴリから選べるようになりました : こんにちは、にいのです。 Alteryxの新バージョン、2018.4が2018/11/15にリリースされました!新機能についてご紹介するAlteryx 2018.4 新機能紹介シリーズのひとつとして、少し新しくなったPu […]

[Amazon Connect] エージェントイベント(データストリーミング)について

イメージ
[Amazon Connect] エージェントイベント(データストリーミング)について : 1 はじめに こんにちは、AIソリューション部の平内(SIN)です。 Amazon Connect(以下、Connetc)では、下記のような各種の記録を残すことができるようになっています。 問い合わせフローログ( 通話録 […]

Amazon自然言語サービスの力を借りて外国語音声を翻訳する

イメージ
Amazon自然言語サービスの力を借りて外国語音声を翻訳する : 旅行中や生活の中で、外国語の音声を理解しなければいけないときがあります。 例えば、自動音声ガイダンスです。 カジュアルに一度限りの翻訳したいときは、Google 翻訳に音声を流すのが一番お手軽です。 それとは別に、システ […] オリジナルのエンクロージャ: filename.mp4

AWS IoTの「モノのクエリ」でNoSQLインジェクションしてみた

AWS IoTの「モノのクエリ」でNoSQLインジェクションしてみた : はじめに サーバーレス開発部@大阪の岩田です。 AWS IoTのフリートインデックスを使う機会があったので、NoSQLインジェクションやエスケープ処理について調べてみました。 このブログに掲載しているソースコードは脆弱性 […]

CSSとプレーンJSだけで簡単なアニメーションの開始と停止を制御できる話

CSSとプレーンJSだけで簡単なアニメーションの開始と停止を制御できる話 : やりたかったこと 画面に時間指定で減っていくゲージを作りたかった。 (ゲームで出てくる時間制限のゲージみたいな) 実際調べるとクラスを与えたりだとか、jQuery使おうだとかいろいろある。 だけど、 単純な機能しか求めないんだから、単純なコードで書きたい。 とりあえずプレーンなJSでの書き方がわかれば、この記事を読まれた優秀な皆さんは簡単に応用できるだろうし。 そもそも基本的なことができてない自分こそ、いろいろ調べて実装方法に迷ったというのは内緒 他にいい方法があったら教えてください m(_ _)m デモとコード See the Pen CSSとプレーンなJSでのタイマー表示 by Uichi60 ( @uichi60 ) on CodePen . 解説 というほどでも有りませんが。 アニメーションさせたい要素にtransitionを設定したのが、今回の要です。 transitionを設定した要素のパラメータにJavaScriptで変更を加えることで、 設定された時間(今回は10秒)の間にゲージが減っていきます。 参考 【CSS3】Transition(変化)関連のまとめ

DOM要素のスクリーンショットを撮る(1)html2canvas

イメージ
DOM要素のスクリーンショットを撮る(1)html2canvas : DOM要素のスクリーンショットを撮る(DOM要素を画像に変換する)には幾つかの方法があるようですが、まずhtml2canvasを試してみました。 結論を先に書いておくと、 html2canvasは使えませんでした 。 DOM要素 スクリーンショットを撮りたいDOM要素は下のようなものとします。 <div class="fitch"> <div class="box"> <div class="prem"> <div class="background-white" style="height: 208px;"></div> <div class="index">(1)</div> <div class="rule">仮定</div>( P<sub>1</sub> → ( P<sub>2</sub> → P<sub>3</sub> ) )</div> <div class="preming"> <div class="prem"> <div class="background-black" style="height: 208px;"></div> <div class="index">(2)</div> <div class="rule">仮定</div>P<sub>2</sub></div> <div class=