IT音痴オーバーフォーティーおやじのストック記事倉庫

Firebaseで「いいねボタン」を実装してみよう！ : Qiita でも無くてはならない「いいねボタン」をフロントだけで実装する方法です。 また今から紹介する内容は下記公式ドキュメントを元に紹介させていただきますので、予めご了承ください。 認証について : https://firebase.google.com/docs/auth/web/anonymous-auth?hl=ja DB操作について : https://firebase.google.com/docs/database/web/read-and-write?hl=ja Firebaseは料金プランそれぞれに認証やDBの接続数などが決まっていますので、気になる方は下記から参照してみてください。 https://firebase.google.com/pricing/?hl=ja 対象者 ・下記仕様を承諾の上で、Firebaseで「いいねボタン」を実装したい方。 仕様 「いいねボタン」を押すのにユーザーはログインする操作は必要はなし ※今回匿名認証を用いており、ユーザーはログインする操作はしませんが裏ではログインを行ってます。 「いいねボタン」を各種ブラウザ１日に１回しか基本押せない ※「いいねボタン」を押したかどうかの情報は localStorage に保存します。 ※ localStorage を意図的に消したり書きかえたりするとまた「いいねボタン」を押すことができます。 ※ブラウザごとにlocalStorage は保存される為、ブラウザを変えてまた「いいねボタン」を押すことが出来ます。 実装の大きな手順 Firebaseで匿名認証の設定 JSの実装 1. Firebaseで匿名認証の設定する。 匿名認証について Firebaseは認証設定なしでもデータを操作することは可能です。 ただし認証なしのデータ操作は不正アクセスに対して対策が出来ておらず、「いいねボタン」を実装するのみであっても何かしらの認証があった上でデータを操作したほうが安全です。 そこで Firebase では様々な認証方法を用意してあるのですが、その中で匿名認証を用いて今回は実装します。 まず匿名認証について前述したように、ユーザーがログイン操作を行っていなくてもJ

生のJavaScriptで、マウスの座標を取得する : VanillaなJavaScriptを練習していた際に、 マウス座標を取得するのに戸惑ってしまったので、メモとして残します。 絶対位置取得 const getMousePos = (e) => { let posx = 0; let posy = 0; if (!e) e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { x : posx, y : posy } }; x座標とy座標を返す関数です。 ブラウザ間で取得できる数値が微妙に異なるらしく、 それをnormalizeするにはどうしたらええねん？という調査になかなか時間がかかりました。 相対位置取得 先ほどの関数を使用し、下記のように記述 // マウス座標を変数に格納 const mousepos = getMousePos(e); // スクロール量を取得、変数に格納 const docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop}; const bounds = (対象DOM).getBoundingClientRect();//対象要素の情報取得 const relmousepos

Node.jsでAmazon CloudFrontの署名付きURLを生成する : やりたいこと 認証が必要なWebアプリケーションをAWS上に構築する Amazon S3 で画像ファイルを管理する 画像ファイルには認証済みユーザーのみがアクセス可能 独自URLで公開する 当然SSL化する いろいろとググったところ、 Amazon CloudFront の 署名付きURL (signed url) を使うと目的を達成できそう。 環境整備が面倒くさかったので手順を整理しておきます。 この記事では 署名付きURL の作成方法について取り上げます。Webアプリケーションの構築については範囲外です 手順 リソース管理用のS3バケットを準備する 画像ファイルを格納するS3のバケットを作成します。 今回は cloudfront-private-content という名前にしました。 テストのために cat.jpg と dog.jpg をバケットにアップロードします。 CloudFrontでS3バケットを公開設定する CloudFrontを迂回してアクセスできないように設定します。 Step 2: Create distribution の画面で以下の設定を行います。 Origin Settings 項目 設定値 Origin Domain Name 作成したS3バケットを指定 Restrict Bucket Access Yes Origin Access Identity Create a New Identity Grant Read Permissions on Bucket Yes, Update Bucket Policy Default Cache Behavior Settings 項目 設定値 Viewer Protocol Policy Redirect HTTP to HTTPS コンソールの CloudFront Distributions にて status が In Progress から Deployed に変わるまで結構時間がかかります。 ゆっくりコーヒーを飲む時間くらいはかかるので、余裕

脳動脈瘤、AI補助で放射線科医の読影精度向上-大阪市立大の研究グループがアルゴリズム開発 : 大阪市立大大学院医学研究科（放射線診断学・IVR学）の研究グループは、AI（人工知能）による脳動脈瘤の自動検出アルゴリズムの開発と検証を行った。放射線科医がこのアルゴリズムの補助を受けた場合、単独の読影...

東京の風疹患者数、前回流行以降で最多-ワクチン接種歴「なし」「不明」が9割超 : 　東京など首都圏で風疹の流行が本格化している。東京都内の15日から21日までの1週間の患者報告数は、前回流行した2013年以降で最も多かった。ワクチン接種歴については、「なし」と「不明」が全体の9割超を占...

「LINEほけん」発売記念で、無料でもらえる保険「おまもりシリーズ」プレゼント : 無料でもらえる保険「おまもりシリーズ」プレゼント LINE株式会社は10月16日、子会社で金融関連サービスを提供するLINE Financial株式会社が、同日からサービスを始めた「LINE」アプリ上で損害保険に加入できる保険サービス「LINEほけん」の発売を記念し、国内の「LINE」ユーザー向けに、無料でもらえる保険キャンペーンを開始したと発表した。 キャンペーンは、この10月16日から12月12日までの申込期間（各保険で申込期間は異なる）中に、「LINEほけん」公式アカウント（@linehoken）を友だち追加したユーザーのうち、希望者に無料でもらえる保険「スマホのおまもり」「自転車のおまもり」「年越しのおまもり」のうちの1つをプレゼントするというもの。 「スマホのおまもり」は、「LINE」ユーザーにとって身近なスマートフォンを落とした時の液晶割れなどの破損事故を1万円まで補償する。 「自転車のおまもり」は、自治体の自転車保険加入義務化の広がりを背景に損害保険商品の中でもニーズが高まっている。また、「年越しのおまもり」は、カウントダウンや初詣の際のケガなどを補償するユニークな保険だ。 無料でもらえる保険対象は18歳以上69歳以下限定 なおキャンペーンへの参加には、「LINEほけん」公式アカウント（@linehoken）を友だち追加し、「スマホのおまもり」「自転車のおまもり」「年越しのおまもり」の保険のうちの1つを選択して、「LINEほけん」のユーザー登録を行う必要がある。 さらに事前申込期間の保険を選択すると、申込期間がくると「LNEほけん」の公式アカウントから通知される。ただし、無料でもらえる保険対象者は、加入者本人が被保険者となり、保険始期時点での年齢が18歳以上、保険期間末日時点での年齢が69歳以下である必要がある。 （画像はプレスリリースより） ▼外部リンク LINE株式会社 プレスリリース https://prtimes.jp/main/html/rd/p/ 「LINEほけん」 https://linecorp.com/ja/pr/news/ja/2018/2412 ●この記事に関連したニュースカテゴリ： その他 （記事提供：スーパー・ア

メディカルノート、アフラックの保険加入者向け健康サービスアプリを開発 : アフラックの保険加入者向け健康サービスアプリを開発 株式会社メディカルノートは、アフラック生命保険株式会社が提供する「アフラックの健康応援医療保険」の加入者向けに、健康増進をサポートする機能を搭載したスマホアプリ「ココカラダック」を開発し、医療情報と医療相談サービスの提供を開始したと発表した。 このアプリは、同社とアフラックの業務提携の一環として、2017年5月に発表した開発したもの。 ヘルスケアプラットフォーム「メディカルノート」（同社運営）が提供する、最新の症例や治療例、臨床経験に基づく情報など信頼性の高い医療情報を同アプリにて提供するほか、気になる症状について、スマホからオンライン上で24時間いつでも医師・専門家に相談できるサービスや歩数計測機能を備えている。 デジタルヘルスにより人々の健康寿命延伸に貢献 同社では、今後もより利便性の高いサービスを提供するため、サービスやコンテンツを拡充するとしている。また両社は、デジタルヘルスにより人々の健康寿命延伸に貢献することを目指すとしている。 また同社は、保有する技術と信頼性の高い医療情報をもとに、今回の両社間での取り組みとともに、保険会社を含めた異業種企業との連携を通じて、医師と病院および患者をつなぐヘルスケアプラットフォームのさらなる成長に努め、あらゆる人の医療ニーズに応えるサービス提供を実現させるという。 （画像は株式会社メディカルノートHPより） ▼外部リンク 株式会社メディカルノート　プレスリリース https://medicalnote.co.jp/news.html ●この記事に関連したニュースカテゴリ： その他 （記事提供：スーパー・アカデミー） オリジナルのエンクロージャ:

税務署から資料せんやお尋ねといった書類が送られてくることがるんだけど、これ提出した方が良いの？しなきゃいけないの？ : 税務署から資料せんやお尋ねといった書類が送られてくることがるんだけど、これ提出し ... Copyright © 2018 生命保険おすすめ比較ニュースアンテナ waiwainews All Rights Reserved.

AWSのboto3を使ってサーバのコマンド結果をメールに飛ばしてた。 : やりたいこと AWS上のEC2(Linux)で一定時間毎に自動的にコマンドを叩く。 コマンドの標準出力をメールで飛ばす。ついでにSQSにも連携しとく。 方法 pythonのboto3を用いて、SNSでメールを飛ばす。 SQSへはSNSのサブスクリプションで連携する。 前提 EC2を立てる(ここでのサーバはRHEL系を想定してます。) EC2にaws cli、python3、boto3のインストール。 aws configureでユーザ認証。 SNSでトピック及びサブスクリプション作成。 SQSでキュー作成。 コード EC2上で以下のスクリプトを作成。 実行するコマンドやSNSのトピックはXXXXX表記ですので、適宜置き換えて下さい。あと、変数はテキトーです（笑）。 ### send_msg.py ### import boto3 import subprocess import shlex import time # SNSのトピックのARNを記載 sns = boto3.resource('sns') topic = sns.Topic('arn:aws:sns:ap-northeast-1:XXXXXXXX:topic-name') # 出力させたいコマンドを指定 cmd = "XXXXXXX" sos = subprocess.Popen(shlex.split(cmd), stdout=subprocess.PIPE) # 標準出力の場合 tenpura = sos.stdout.read() # 文字コードを「UTF-8」に指定 sushi = tenpura.decode("UTF-8") response = topic.publish( Message = sushi) print(response) #ループ処理（ここでは1分毎に定期実行） while True: response = topic.publish( Message = sushi) print(r

S3からAuroraへのデータインポート : 背景 Athenaで処理していたデータをAuroraで管理するような仕様ができたので、S3からAuroraへのデータインポートを考え始めた。 データインポート Auraoの公式ドキュメントを参照すれば大体いけます。 Amazon S3 バケットのテキストファイルから Amazon Aurora MySQL DB クラスターへのデータのロード - Amazon Relational Database Service ↑のドキュメントを簡単にまとめると、以下のことです。 IAM policy作成（S3へのアクセス許可） IAM Role作成（AuroraからAWSへのアクセス許可） Auroraのparameter group設定 クラスターのparameter group（各インスタントの設定が同じなら、クラスターだけを設定すればOK） 各インスタントのparameter group Amazon Aurora MySQL から AWS の他のサービスへのネットワーク通信の有効化 - Amazon Relational Database Service ハマったところ Amazon Aurora MySQL から AWS の他のサービスへのネットワーク通信の有効化 - Amazon Relational Database Service ↑はわかりませんでしたので、無視した。そしたら、全然S3とつながらなかった。それはそうですね。Auroraはprivate vpcに置いてあるため、そのまま外のS3へのアクセスは不可能です。 対策 endpointを作成 VPC -> エンドポイント -> エンドポイント作成 結果 以下のようにテストしました。 テストデータ テーブルの作成 mysql> create table users_01( -> userid integer not null primary key, -> username char(8), -> firstname varchar(30), -> lastname varchar(30), ->

オラクルがERP用の音声UI、「全SaaSにAIを組み込む」とエリソン会長 : 　米オラクルのラリー・エリソン会長兼CTOは2018年10月24日（米国時間）、「Oracle OpenWorld 2018」の基調講演で、同社のすべてのSaaSに機械学習ベースのAI（人工知能）を組み込む方針を語った。ERP用の音声ユーザー・インタフェースなどをデモした。

今治タオルの伊織で不正アクセス、延べ2145人分のクレカ情報が流出 : 　今治タオルの販売を手掛ける伊織は2018年10月24日、同社の通販サイト「伊織ネットショップ」が不正アクセスを受けたと発表した。延べ2145人分のクレジットカード情報が流出した可能性がある。

【まずは基本から】Webマーケティングに必要な「UXデザイン」ってなんだ？　 (1/3)：MarkeZine（マーケジン） : 【まずは基本から】Webマーケティングに必要な「UXデザイン」ってなんだ？　 (1/3)：MarkeZine（マーケジン） Webマーケティングを行う上で避けて通ることはできない「UXデザイン」。重要であることは理解していても、何をすると効果的なのかを理解・実践できている担当者は少ないのではないでしょうか。本連載では、「そもそもWebマーケティングにおけるUXデザインってなに？」「何から始めればいいの？」という疑問について考え...

[ITmedia Mobile] カードレス後払いサービス「atone」が実店舗決済に対応　まず「UNiCASE」が導入 : スマートフォンアプリを使ったカードレス後払いサービス「atone（アトネ）」が、実店舗におけるコード決済に対応。まずはCCCフロンティアのスマートフォンアクセサリーショップ「UNiCASE」（一部店舗を除く）が10月25日から順次導入する。

楽天と西友が「楽天西友ネットスーパー」を正式オープン――最短4時間で配達、楽天IDとの連携も | TechCrunch Japan : 楽天と西友が「楽天西友ネットスーパー」を正式オープン――最短4時間で配達、楽天IDとの連携も | TechCrunch Japan 楽天と西友は10月25日、協働で運営するネットスーパー事業「楽天西友ネットスーパー」をグランドオープンした。 同サービスは強固な会員基盤（楽天ID数は約9900万）やECの知見を持つ楽天と、実店舗での生鮮食品の販売などスーパーマーケット運営のノウハウを持つ西友の強みを活用した事業。1月に楽天とウォルマートが発...

Node.jsのネイティブモジュールをフェイクしてみた : Node.jsで使うことのできるモジュール http fs とかを自分の好きなように置き換えられるようにしてみた． ちなみに，Node.js自体のバイナリは変更しない． フェイク被害を受けてもらうプログラム ~/index.js const http = require('http'); http.get('https://example.com/'); ここで， http.get() を本来の挙動ではないものにしてしまおう． require を置き換える require() で呼ばれる関数はどこ？ 見た1 見た2 見た3 自分の用意したモジュールを読み込むようにする． ~/require.js const overwrapNames = [ 'http', ]; module.constructor.prototype.require = function (id) { if (typeof id !== 'string') { throw new TypeError(); } if (id === '') { throw new TypeError(); } if (overwrapNames.some(name => name === id)) { return module.constructor._load(`${__dirname}/modules/${id}`, this, false); } return module.constructor._load(id, this, /* isMain */ false); }; フェイクされて読み込まれるモジュールはこんな感じ． 既にrequireは置き換わっているので，フェイクされたモジュール内で本物のモジュールを使うときは module.constructor._load() を直接呼んで読み込む． ~/modules/http.js const http = module.constructor._load('h

結核の院内感染、同一感染源と特定できない事例も-自治体が注意喚起、「結核念頭に置いた診療を」 : 　医療機関で結核の集団感染が相次いでいる。東京都福祉保健局は24日、「大田区保健所管内の病院で、結核に集団感染する事例が発生した」と発表。接触者健診の対象者が100人を超え、現在も保健所が健診を続けている...

[ITmedia News] スマホで“人工生命”を育成　ドワンゴ、「ARTILIFE」プロジェクト発表 : ドワンゴが、仮想空間で自律的に動く“人工生命”を観察・育成するプロジェクト「ARTILIFE」を発表した。強化学習を用いた人工生命のモーションを自動生成する技術を活用した。

AWSなどbitnamiで環境を整えたときにjavascriptがhtmlに展開される : 概要 下記のコードが index.html <script src="hoge.js"></script> ブラウザで見ると下記のようになっている。 index.html <script><![CDATA[ console.log("hoge") ]]></script> 開発用などのサーバでこれが有効だと javascript の変更が反映されるまで少し時間がかかって面倒い。 原因 bitnami の用意する httpd.conf に書かれた下記の中にあるっぽい。 httpd.conf Include conf/pagespeed.conf Include conf/pagespeed_libraries.conf パフォーマンスがいらないならコメントアウトすると良い。

Lambda@Edgeのデプロイが簡単になった : us-east-1リージョン(バージニア北部)でLambda関数を作成し、新しいバージョンを発行して・・とやろうとしてたらアクションメニューにこんな項目を発見 いつから追加されてたか知らないけどとても簡単にデプロイできるようになっている 従来であれば、us-east-1でLambda関数を作成し、新しいバージョンを発行し、CloudFrondディストリビューション作成時にLambda Function Associationsの項目に先ほどのバージョンのARNを貼り付けてやっていたものが、CloudFrontディストリビューションを作成し。Lambda関数をus-east-1で作成した後に、上記機能の項目をクリックして作成が可能になってる さらに関数を更新した際の処理も簡単になっている、LATESTで関数を更新し、アクションからLambda@Edgeへデプロイを選択、「この関数で既存の CloudFront トリガーを使用」を選びデプロイするだけだ

「巨人」から逃げろ！ タイトーがVRゲームを開発 : 「巨人」から逃げろ！ タイトーがVRゲームを開発   日本経済新聞 Full coverage

Qiita版TweetDeck！？カラム形式でQiita記事をウォッチできるサービス「QiitaDeck」をリリースしました！ : . @kazu_real20 と共同で「QiitaDeck」という"もっとQiitaで情報収集しやすく！"をコンセプトに「気になる人、気になるタグ、今のトレンド」をリアルタイムウォッチできるWebサービスをリリースしました�� https://t.co/yjl9nc2Qm4 @qiitadeck ぜひとも！ #プログラマに届け #拡散希望 #QiitaDeck pic.twitter.com/fzqbaNhOVU — ISSY! (@issy_s16) 2018年10月23日 「 Qiitaをもっと使いやすく 」をコンセプトに、Qiitaの記事をリアルタイムでウォッチできるサービス「 QiitaDeck 」をリリースしました Qiitaのアカウント１つ持っていれば、すぐにでも使い始めることができます！ 　 QiitaDeck - もっとQiitaで情報収集！ QiitaDeckでできること ウォッチできる記事の種類 トレンド記事 デイリートレンド記事をウォッチすることができます。 気になるユーザーのストック記事 気になるユーザーのストックした記事をウォッチすることができます。 気になるタグのついた記事 気になるタグのついた記事を新着順でウォッチすることができます。 その他機能 記事作成ページへの移動 「記事書きたい！」となったときでも、すぐに記事作成画面に移動することができます。 下書きページへの移動 下書き一覧ページへの移動もできます。 このように、 トレンド記事 、 気になるユーザーのストック記事 、 気になるタグがついた記事 の新着記事をリアルタイムで管理することができます。 開発するまでに至った経緯 プログラミングを本格的に始めて４ヶ月が経ったということで、今の技量で何か作ってみたいと思ったのと、同時期にエンジニアインターンとして働き始めたこともあり、インターン先の主要フレームワークである"Ruby on Rails"の勉強もしなければならないことから、「それならWebサービスを作ろう」と思い至りました。 そこで