Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。

はじめに Pythonを使ったWeb開発を始めるにあたり、まずは快適なデバッグ環境を整えようと考えました。Web上では、Docker gunicorn+Django VSCodeのすべての要素をカバーした情報がうまく見つからなかったので、備忘録として残します。 構成の概要 クライアント側 VS Codeに、Python extension for VS Codeをインストールして、ポート3000番経由で、サーバー側で起動しているデバッグサーバーにアクセスします。 サーバー側 ptvsd (Python Tools for Visual Studio debug server)を gunicorn から呼び出し、デバッグサーバーを立ち上げます。デバッグサーバーはポート3000番でクライアントの接続を待ち受けます。 各種バージョン Mac OS 10.14.6 Visual Studio Co

HTMLとCSSでWebサイトを作って、「さあ公開しよう！」と思った時にレンタルサーバーの登録だったり、ドメインの取得だったり面倒な作業がたくさん発生すると嫌になってしまいますよね。 すでにレンタルサーバーに登録している人であれば、比較的簡単に公開することができますが、登録していない人はそれだけで数時間使ってしまうことだってあります。 そんな時におすすめの方法が、「Firebase」というGoogleが提供するサービスを使ってWebサイトを公開する方法です。 個人のポートフォリオサイトなど、ちょっとしたサイトを手軽に公開する手段としてはFirebaseはとても便利です。 今回は、Firebase Hostingを使ってWebサイトを公開する全手順をご紹介したいと思います。 Firebaseとは Firebaseとは、Googleが提供するバックエンドサービスです。Baas（Backend

はじめに こんにちは、ABEJAの大田黒(おおたぐろ)です。最近は、一ヶ月100kmを目標にランニングしたり、POとユカイな仲間たちと一緒に小売店舗向けのIoTxAI活用サービスの開発を進めているエンジニアです。前回の記事からだいぶ間が空いてしまいましたが、久しぶりにTech Blogを執筆しようと思います！ ちなみに前回は、IoTを活用したインフルエンザ注意報を作って社内展開をしていた様子等を書いてました。 tech-blog.abeja.asia 今私は、小売店舗向けのIoTxAI活用サービス であるABEJA Insight for retailの開発チームリーダーをさせていただいております。先日、我々のチームで研究＆開発している技術を活用し、顔認証でマイニング＆簡易決済が可能な仮想コイン(仮想通貨ではない)を個人の冬休みの自由研究として作りました。(詳しいコンセプトや仕組みは後述し

どうも！大阪オフィスの西村祐二です。 2019年9月12日に2年ぶりに Developers.IO 2019 in Nagoya が開催されました。 そこで「サーバーレスで作ったIoTのバックエンドシステムで遭遇したエラーと対処法」という題名でお話しさせていただきました。 登壇資料 さいごに サーバーレスなシステムを運用していて遭遇したエラーと対処法、そこから学んだことを発表させていただきました。サーバーレスの運用について考えている人のお役にたてたら幸いです

渡辺です。 そろそろ冬籠もりの準備をする季節です。 Developers.IO Cafe のインフラはLambdaを軸としたサーバレスアーキテクチャです。 Lambdaはサーバレスの中核として非常に使い勝手の良いサービスですが、制限と上手く向き合うことも必要です。 特にコールドスタートはパフォーマンスに直結する大きな課題です。 本エントリーでは、カフェのバックエンドLambdaで実施したパフォーマンスチューニングについて解説します。 コールドスタートとLambda Lambdaを扱う以上、 コールドスタート は避けられない問題です。 一般的に、サーバレスアーキテクチャでは、サービスが利用されていない時間帯は、コンピュータリソースを使わないように設計されています。 言い換えると、サービスが最初に利用される場合、サービスをスケールする場合、サービスがアップデートされた場合などに、 サービスが都

Vue.jsだけで作る基本的なチャットアプリ機能のサンプルコードと概要説明です。 Vue.jsの概要説明とプロジェクト設定はこちら： www.katonobo.com www.katonobo.com Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsのサンプルコード コードの説明 Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsだけで作っています。そのため、メッセージはリロードしたり画面遷移したらデータは消えますので実用レベルではありませんが、むしろ無駄を一切削ぎ落としたコードなのでチャットアプリの基本的なロジックを理解するのに役立つはずです。 今回の機能は、自分のメッセージの送信と相手のメッセージの送信を分けて、自分のメッセージは「赤色」相手のメッセージは「青色」になり順番に表示されるようになっています。 実際の動作はこちらのサイトで確認してくださ

ある日、学校から帰ってきた息子が唇を震わせていた。 小学2年になった息子は学校でのことをあまり家で話したがらないが、その日は様子が違ったので「何かあったの？」と聞いてみた。 「仮面ライダー幼児って言われた。仮面ライダーが好きなのは赤ちゃんか幼稚園児だって。」 マジか、そんな超くだらないこと1ミリも気にしなくていいじゃん、と内心思ったが息子はひどく傷ついていた。 「あなたは仮面ライダーが好きなんでしょ。じゃ別にいいじゃない。誰にバカにされようが。そもそも仮面ライダーのストーリーは難しいんだよ。子どもでは本当の仮面ライダーの良さは理解できない。＜強さとは何か＞＜力とは何か＞を教えているんだ。特にジオウなんて力を持って悪い未来を呼び起こしてしまうことをどう阻止するかをつたえ」と力説している途中で息子が割って入ってきた。 「嫌だ！バカにされるのは嫌だ！僕をバカにしたやつらを見返したい！！」 と。

A錠@公務員 @qik_komujyo 結局、本当に一番タチ悪いのは、仕事やらないおっさんとかじゃなくて、常に「無駄なことを丁寧なこと」と勘違いして仕事を増やすやつだよな。 2019-09-10 20:40:32

Laravel公式で用意されているLaravel 5.2 基本のタスクリストはLaravel5.2とかなり古く、ディレクトリ構成も異なるし、ルーティングファイルの配置も変わってますし、HTMLタグのtrが抜けてたり、idの指定が異なっていたり、インデントが崩れていたり、old関数が抜けてたり、そのままチュートリアル通りに進めてもハマりどころが多く、初心者の挫折ポイントになってました。 そこで今回の記事では、Laravelに入門する方を対象に基本のタスクリストのチュートリアルをLaravel 6.0で行う手順に補足を追加しつつ紹介します。 特に問題なさそうな箇所はそのまま引用して紹介します。 アジェンダ 1. 前準備 2. Laravelをインストール 3. データベースの準備 4. Eloquentモデル 5. Tinker（REPL） 6. ルート定義 6.1. 全タスクをリスト表示する

「あるある」じゃないです はじめに これは、筆者が周りの非エンジニアの方々に 「エンジニアの人って◯◯なんでしょ？」 と言われて、「いやそんなことないですよ笑」と答えた話をまとめました。 この回答が、同じような質問を受けた人が 「ないない。実際はこうなんだよ」 と答える参考になれば幸いです。 （どんな時だよ！） 自分の経験値だけで語っているので、 「俺の場合はあるあるだよ！」 とかあるかもしれません。ご了承ください。 色んな「ないない」 ハッカーって銀行に侵入して口座の金額増やせるんでしょ？ ないです。 振込はネットでもできますが、トランザクションの登録だけであり、 実際の金額の操作はネットワークから分離されています。無理です。 インターネットからできるのはキューの登録だけです。 基幹システムでチェックされるので、例え不正な振込データを送信できたとしても 実際に反映される時に弾かれます。残

The Biden Administration opens $285 million funding for ‘digital twin’ chip research institute

「Pulumi」がバージョン1.0に到達、正式版に。インフラの状態をJavaScript、Python、Goなどで記述可能。個人向けサービスは無料で提供 かつてサーバの設定や起動、ネットワークの構成といったインフラの構築は、それぞれの設定ツールやコンソールから運用担当者がマニュアル操作で行ってきました（いまでもそうしている組織は少なくないでしょう）。 しかし仮想化基盤やクラウドなど最近のモダンなインフラでは、APIや設定ファイルを通じてプロビジョニングやコンフィグレーションが可能です。 このようにソフトウェアでインフラの状態の表現が可能になることを、いわゆる「Infrastructure as Code」（コードとしてのインフラ）と呼びます。 Infrastructure as Codeの利点は、インフラの状態をコードで記述することによって、誰でも確実に間違いなく実行できて手作業によるミス

Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 Node.jsをうまく活用できている企業は、どのような方法でベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポートチームに、同社の実施を紹介してもらいました。 Node.jsは「イベントループモデルで、ノンブロッキングI/Oを使用している」「問題発生時にHTTP/TCPやPOSIX APIなど低レイヤーの知識を求められる」といった特徴を持つ言語です。開発者が習得すべき技術領域が広いため、Node.jsらしい書き方の学習難易度は高いと言えます。 それでは、Node.jsをうまく活用できている企業は、どのような方法でNode.jsのベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポート

競争が激化するインターネット業界で大きな動きです。ヤフーが、国内最大級のファッション通販サイトを運営するＺＯＺＯに対してＴＯＢ＝株式の公開買い付けを行い、傘下に収める方向で最終的な調整を進めていることが分かりました。ＺＯＺＯの前澤友作社長も賛同しみずからが保有する株式を売却する意向です。 ＺＯＺＯの創業者で、およそ35％の株式を持つ前澤友作社長もＴＯＢに賛同し、株式を売却する意向だということで、ヤフーの取得金額は数千億円規模に上るとみられます。 ヤフーはネット検索をはじめとするさまざまなインターネットサービスを手がけていますが、アマゾンや楽天に加え、フリマアプリのメルカリが急成長するなど、厳しい競争のなかにあります。このため、年間の購入者が800万人を超えるＺＯＺＯを傘下に収めることで顧客を拡大し、その物流網も生かしたい考えです。 ＺＯＺＯとしてもヤフーとの連携によって顧客をさらに増やした

LINE Botをリマインダ的に活用して生活に役立てるのが流行っていますね。特に、LINE BotのMessaging APIとGoogle Apps Script(通称GAS)との相性が良くて、とても簡単にBotが作れるみたいです。 本記事では、LINE Messaging APIとGASを使って、何でも通知してくれる便利なLINE Botを作ってみたいと思います。 追記 2019/09/12 プログラミングに馴染みのない人が通知設定シートを編集することをイメージし、以下の機能追加と変更を行いました。 新たに「年」を指定できるようにしました。 毎日、毎時といった指定をしたい場合、「*」を入力するのではなく、セルを空白にすれば良いように変更しました。 列の並びを、より日常生活に馴染みのある「年、月、日～」の並びに変更しました。 2019/09/11 思ったよりもいいねが伸びたので、「本文」

対象読者 LLVMを勉強し始めたけど何からして良いのかわからない方 アセンブリがちょっとわかる 目標 LLVMの基本的な文法がわかるようになる 環境 Mac Mojave 10.14.6 LLVM 8.0.0 clang 8.0.0 (trunk 348837) LLVMってなに...? LLVMは一言で言えば、プログラミング言語を作成する為の基盤です。プログラミング言語はコンパイラによってバイナリに変換され実行することができます。それを言い換えれば、自分が考えたプログラミング言語のコンパイラを作ることで自作プログラミング言語を作れます。 そして、コンパイラは通常フロントエンド、ミドルエンド、バックエンドに分けられ、各プロセスで様々な処理をしています。特にミドルエンド、バックエンドでは中間言語や各アーキテクチャに対するたくさんの最適化を施さなければなりません。この最適化を預けてフロントエン

はじめに Vue.jsの「コンポーネント」をなんとなく理解できたので、まとめてみました。 Vue.jsの初歩的な知識はある前提です。 この辺↓が分かっていればとりあえずOKかと。 5分でわかるVue.js基礎の基礎 環境 Vue CLIを使います。 使ったことない方はインストールをお願いします。 ※参考：Vue CLI スタートガイド プロジェクトを立ち上げるとこんな感じの構成でファイルが作られていると思います。 基本的に編集していくのはApp.vueとcomponentsフォルダです。それ以外はデフォルトのまま触らなくて大丈夫です。 ターミナルで を実行すると開発用サーバが立ちます。 その状態でhttp://localhost:8080/にアクセスすると、下のような画面が表示されます。 vueファイルに変更を加えると、その変更内容がこのページに即座に反映されます。 試しにApp.vueの

こんなの作りました。 はじめに この記事は、TypeScriptを勉強し始めて、何か作ってみたいなと思っている方（まさに私）を対象にしていますので、勉強のための開発環境構築から、コンポーネントへの分割、機能実装という順で記述しています。 順を追って開発していくと、上で作ったものが完成していきます。（※スタイルは省略しています。） 開発環境整備 勉強のために簡単に環境を整えたかったので、Create Next App を使うことにしました。（挑戦） Create Next App を使うとSPAの雛形を簡単に用意することができます。

(落ちの無い話です) [追記] IETF107 (2020/03/25)において、Googleでの利用例が共有されました。それについて、記事最後に追記しました。 公式な情報はまだないが、GoogleがQUICコネクションをVPNとして利用する「QUIC as a VPN (QBone)」なるものを作ってるのは窺い知ることができる。 2017年6月に、GoogleでQUICの開発に携わっているIan Swett氏より「QUIC Messages」という提案書が出ている。この提案書の、提案背景の章で「QUIC as a VPN (QBone)」は登場する。 Today, most production QUIC traffic is HTTP. However, developers are actively working on running WebRTC over QUIC (aka Q

若い頃、趣味でFlashサイト/ゲームを作って友達に見てもらい意気揚々と感想を聞くと、 「どうしたら良いかわからない」 「変わったデザインだね」 といった評価をもらい、「あんなの飾りです。偉い人にはそれが分からんのですよ。」という名言を思い出しながら憤りを感じつつも落ち込んでました。 言われてみると当たり前なんだけど慣れていない人だと結構失敗するかもしれないと思い、今回投稿してみました。 デザインにおける「わかりやすさ」とは 迷わないこと 何が起きるのか予想ができること 安心できること デザインにおける「わかりやすさ」を説明するとこんな感じでしょうか。 では、WEBやアプリでは具体的にどういったことを考えれば良いのでしょうか。 ユーザーの行動から順を追って考えてみます。 PCであればこんな行動をします。 画面を見る マウスを動かす クリックする それでは「画面を見て、次の動線までマウスを持

こんにちは、臼田です。 皆さん、セキュリティ意識してますか？(挨拶 今回はお客様宛にAWSのセキュリティベストプラクティスについて補足・解説したものを汎用化して共有します。 公式のドキュメントだと少し硬くて読みづらいみたいなイメージもあるかと思いますので、こちらの記事を参考に感覚を掴んでいただければと思います。なお、いろいろ簡潔にしたりするためにすべてのことについて説明していませんのでご了承ください。 熟読いただきたい資料 AWSのセキュリティベストプラクティスの資料は本当は熟読していただきたいです。しかしながら、最初はとっつき辛いと思うのでこの先の内容を見ていただいて、余力があればこちらのセキュリティベストプラクティスを見ていってください。 https://d1.awsstatic.com/whitepapers/ja_JP/Security/AWS_Security_Best_Prac

Slides for Webエンジニアが使う身近な Kubernetes 2019/09 https://m3-engineer.connpass.com/event/143295/

2019年9月9日にPayPayを騙るSMSが届いたと複数の人がTwitterへ投稿しています。SMSからフィッシングサイトへ誘導されるもので、2019年9月12日12時現在フィッシングサイトは稼働中です。ここでは関連する情報をまとめます。 「PayPaySMS」から届くSMS PayPay使ってないんだけど、こんなの来た。 無視してええんかなー？？ pic.twitter.com/rM1sI58OrW— ちかもにょ。@鶯丸で昇天。 (@chikamonyo) September 9, 2019 「銀行の登録情報と一致しない」とメッセージが届く。 PayPayの公式サポートも注意を呼び掛けている。 PayPayに提供されたお支払い情報が、お客様の銀行に登録されている情報と一致しない。既存のお支払い方法を更新、または削除するには、次の手順に従ってください：<フィッシングサイトへ誘導するURL

サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

これは何？ 前回記事 の続き。SkyWay IoT SDK の MQTT relay機能 を使って、グローバルな MQTT ブローカーを使わずに、P2P でブラウザから宅内 MQTT に pub/sub してみる。 今回の記事は、それのおさわり 概要 普通、宅内のMQTTクライアントをリモートからpub/subするためには、AWS IoTなんかを使ってグローバルな MQTTブローカー over WebSocket なんかを使ってやると思うんだけど、これを WebRTC を使って、グローバルブローカー使わずに P2P でやっちゃおうというもの。これを使うと、簡単・安価に宅内MQTTをふがほげできちゃう。 アーキテクチャーとしては、ssg がローカルのMQTTブローカーに接続し、MQTTクライアントと、ブラウザの間のMQTTデータを WebRTC でリレー中継してくれるというもの。1 プロセス

普段はIoTな製品開発をメインにしているため、JSも王道の斜め横くらいの使い方で楽しんでいる今日このごろ。そんななかで、なかなか触る機会がないであろうWeb Bluetoothをゴリゴリいじくり倒して実戦投入すると意外と使えたので、そのときにわかったことのメモをまとめておきます。Android Chromeがサポート環境だったため、そっち寄りのまとめになります。 なかなかチュートリアル以上のネタがネット上になかったので、他に同じ心境の方が出てきたときの助けになれば... Web Bluetoothの仕様とか参考にしたところ W3C Document GitHub: WebBluetoothCG / web-bluetooth GitHub: WebBluetoothCG / Demos ドキュメントは意外と更新頻度高いので、実装時期によっては意外とできなかったことができてたりします。 対応

はじめに Moffの社内勉強会用に話した内容を一部抜粋して記事を書いています。 勉強会では、JavaScript、Python、C#(Unity)、Swiftなどに強いエンジニアがBLEを理解するための助けになればという位置づけでお話しました。 Web BluetoothはmacとMoffBandさえあればすぐにセンサーデータを受信するものを作って目に見れるので、アプリやサーバサイドのエンジニアにとって、Web Bluetoothは初学にはよいと思いました。 Bluetoothについて 最初に、Bluetooth規格のバージョンについて主な特徴を抜粋します。 5.0 データ転送速度向上(最大2倍)、通信範囲拡大(最大4倍) 4.2 転送速度を向上（最大2.5倍） 6LoWPAN対応 4.1 IPv6対応 4.0 省電力化。 正式には、Bluetooth Smart。いわゆるBLE（Blue

Webにおいて双方向通信を低コストで行うための仕組み。プロトコルの一種。 WebSocketの必要性 Web通信といえば HTTP。 主にHTMLで書かれた文書を転送するためのプロトコル。 HTTPの規格が制定された当時のWebは、遠隔地にいる人同士が知識を共有するためにあった。 Webの用途は変わってきた SNS等の登場によって、リアルタイムなやりとりが求められるようになった。 だれかのアクションがリアルタイムで他のユーザーに伝わり、ほかのユーザーもリアクションすることができる。 このリアルタイムなやり取りを実現するには、サーバ上の情報の更新が行われたらクライアントの画面等を更新する必要などがある。 これをHTTPで実現しようとすると難しい。 HTTPのボトルネック 1つのコネクションで1つのリクエストしか送ることができない リクエストはクライアントからしか送ることができない サーバーか

IoTにおけるソフトと特徴 Arduino イベント駆動 MQTT 軽量プロトコル publish/subscribe型のMQ Arduinoとは 無償で使えるマイコン用プログラム作成アプリ マイコン毎にアドオンがある(ex, ESP8266) スケッチ(=プログラム)はsetup/loopで構成 setup: 電源入り後一度だけ呼ばれる loop: (電源切るまで)繰り返し呼ばれる 提供されているスケッチ例を改造して動かす MQTTとは Message Queuing Telemetry Transport 非常に軽量なプロトコル 2000年代初めに登場し標準化 TCP/IP上で動く publish/subscribe型のメッセージ転送 IoT/モバイルに適する センサーデバイス Facebook Messengerで使われている HTTPよりも 軽量（ヘッダが最小2バイト）1・優れた処

WebSocket についてはぜんぜん調べたことなくて、HTTP の上に構築された双方向通信プロトコルやろ、とか思ってました。 Golang で WebSocket サーバを作ったのがきっかけで、きちんと WebSocket の仕様を調べてみたところ、その理解が根底から覆されました。 RFC 6455 - The WebSocket Protocol とキャプチャ結果をもとにして、ちょっと WebSocket を追ってみます。 WebSocket 概観 ハンドシェーク 開始 確立 データ通信 マスキングについて追記 WebSocket 概観 WebSocket は、TCP の上でブラウザベースの双方向通信を実現しようというプロトコルです。 テキストとバイナリ転送の双方に対応しており、これらの情報は「フレーム」という単位でやりとりされます。 このフレームにはデータフレームと制御フレームがあり

竹澤です。 先日、テック系PodcastのRebuildで 「もし世界中の人工物が壊滅した場合（人々の知識レベルはそのまま）、インターネットを復活させるには何から手を付けたらいいか」 というTV（？）の話をされていました。とても面白そうだったのでググってはみたものの、その映像は見つけられませんでした。代わりに「この世界が消えたあとの 科学文明のつくりかた」という本を見つけたので、それを今読んでいます。コンセプトは似ていて、 「パンデミックで人口が1万人ぐらいに減少したときに再び元の社会に戻るためには何から手を付けていくべきか」 というような内容で、当然ですが最初は水や食料からはじめてやがて電気やラジオといった方向に進んでいくのですが、そう考えるとインターネットを復活させるためにはずいぶん長い時間が必要なはずで、インターネットがあるこの世界は膨大な過去の遺産の積み重ねであることに気づかされて

はじめに 最近、Raspberry Pi 3 と CSI 接続の標準カメラモジュールを入手しました。 せっかくカメラも入手したので、カメラで撮影した動画をリアルタイムで、できれば遅延を減らして高fpsでブラウザから閲覧したいなと思って色々方法を試してみたので、まとめてみます。 なお Raspberry Pi 3 の OS は Raspbian Jessie が前提となります。 $ uname -a Linux raspberrypi 4.4.45-v7+ #954 SMP Fri Jan 27 19:06:40 GMT 2017 armv7l GNU/Linux

GitHub Actions の登場により GitHub Pages へのデプロイがとても簡単になりました。手順を書いた YAML ファイルを Push するだけでビルド・デプロイの CI/CD を構築できます。この記事では GitHub Actions を用いて GitHub Pages へのデプロイを自動化する方法を紹介します。 Hugo のブログ・サイトの場合 具体的には以下のような YAML ファイルをデフォルトブランチに .github/workflows/gh-pages.yml として Push するだけで GitHub Pages へのデプロイが始まり、サイトが公開されます。 name: GitHub Pages on: push: branches: - main # Set a branch name to trigger deployment pull_request

axios-mock-serverとは フロントエンドの開発体験を向上させ、生産性を格段に高めるために作られたTypeScript製のモックサーバーです。 axios専用ではあるものの、JSON Serverよりも遥かに手軽にRESTfulなモック環境を構築出来ます。 GET/POST/PUT/DELETEのAPIエンドポイントを数行で作成できる サーバーを立てないので静的なJSファイルに出力してブラウザ単体でも動かせる TypeScript対応 Node環境のaxiosでも動く Nuxt.js同様のオートルーティング機能でパス記述が不要 IE11対応(>= v0.13.1) axios-mock-server - GitHub この記事はやたら長いので以下の入門記事から読むのをおススメします。 秒でaxiosをモックするnpmモジュールの入門サンプル Nuxt.jsのaxiosを秒でモッ

はじめに Visual Studio Codeを使用してJSDocコメントを自動生成する方法について書きます。 JSDoc自動生成方法 Document Thisのインストール VSCodeの拡張機能ボタンをクリックした後、Document Thisをインストールする。 なお、Document ThisはJavaScriptだけでなく、TypeScriptにも対応している。 JSDocコメント生成 インストールが完了したら、JSDocコメントを作成したい関数にカーソルを合わせて、Ctrl+Alt+Dを2回実行するとコメントを生成してくれる(Mac book proとかだとAltキーはないのでOptionキーになる)。

はじめに このドキュメントは、gRPCを用いてサーバからクライアントへのPUSH通知を実現した事例をまとめたものです。 ここでいう PUSH 通知とは、通常のクライアントからサーバへのリクエストではなく、何かしらの契機によりサーバからクライアントへ送信される通知を指します。 例えばチャットツールでよくあるように、誰かのメッセージが入力されたらチャット参加者全員に通知されるというものです。 gRPCを利用してみた事例は現時点でも多く存在しますが、サーバ側からの通知の実現方法を述べた情報は調べた限りでは多くありませんでした。 本ドキュメントは、gRPC での PUSH 通知をどのように実装するのか？、そして、その時の課題にどのようなことがあるのか？という情報を提供することを目的としています。 TL;DR サーバからの PUSH 通知を、gRPC の Server Streaming RPC と

構想から半日の爆速でリリースしたネタ全振りWebサービス「キモツイ」の構成技術とその基本的なセッティング部分の解説です。 作ったサイトはこちら キモツイ 「クソツイ」じゃない「キモツイ」だ！ 「キモツイ」は「クソツイ」とは違う新たな概念です。ちょっとキモい感じが漂うツイートを「キモツイ」と私たちは愛を込めて呼びます。 当サイトは、キモいツイートを誰でも投稿・シェアできるサービスです。 お気に入りキモツイには「キモ投票」ができ、100票集まると殿堂入りします。 ぜひお気に入りのキモツイを投稿・シェアしてみてください。 ブログに遊び方書いています。ブログ Vue.js + Firebase + Buefy(Bulma)のお手軽三点セット 気軽な個人開発ではもうおなじみの、フロントは「Vue.js」バックエンドはサーバレスの「Firebase」という構成です。加えてUIも楽したいのでBulmaベ

Raspberry PiでGreengrass Lambdaを実行する Greengrassを使用して、Raspberry PiでLambdaを実行させてみます。以下の手順で行なっていきます。 事前にAWS IoTで証明書を作成する AWS IoTで証明書を作成しておきます。証明書の作成はマネージメントコンソール上から行います。 Iot Coreコンソールに移動します。 安全性メニューの証明書メニューを選択します。 作成ボタンを押します。 1-Click証明書作成（推奨）の証明書の作成を押します。 モノの証明書、パブリックキー、プライベートキーがダウンロードできるようになるため、すべてダウンロードして自PC上に保管します。 有効化を押します。 完了を押します。 これで、デバイス証明書の作成ができました。この証明書を後ほど、Raspberry Piに設定します。 AWS CDKのインストール

はじめに 瀬田@大阪オフィスです。最近、IAMの泥濘で溺れています。 概要 CloudWatchEventsから呼び出されるLambdaは、CloudWatchEventsのRuleを指定して呼び出し権限を付与する必要があります。ひとつのルールから呼び出すだけであれば問題ないのですが、Lambdaを呼び出すRuleが毎回変わる場合、トリガが大量に増殖することになります。これを防ぐために汎用的な権限を付与する方法をご紹介します。 困った状態 マネージメントコンソールからトリガを追加してみるとRuleを固定でしか登録できないことがわかります。 このLambdaは呼び出されるRuleが毎回変わるので困ってしまいました。 解決 マネコンがダメならCLIということで、以下でトリガ登録してみます。source-arnでワイルドカード使えばいけるだろうという皮算用。 aws lambda add-per

iOS13のGMやiOS13.1のベータ3、Xcode 11のGMから、Appleが開発を進めていると噂の拡張現実（AR）メガネ型端末に関する記述を、開発者が発見しました。 iPhoneで描画した映像をARメガネに出力？ Appleが開発者向けにリリースしたiOS13のGMから、先日に引き続き、ARメガネ型端末に関する記述を発見した、と著名開発者のスティーブ・トラウトン-スミス氏がTwitterで報告しています。 StarBoard frameworks on iOS 13 now. StarBoard is Apple’s system shell for stereo augmented reality apps (headset). Guess secrecy is out? pic.twitter.com/XTnlqQgpHh — Steve Troughton-Smith (@s

プライベートでカレンダー共有アプリTimeTree をよく使っていて、デザインも良くとても気に入っています。 そんなTimeTreeがAPIを公開 したとのことで、Slackから予定の追加ができたら便利なのでは？と思い作ってみました。 開発環境 Node.js: 10.15.0 @slack/bolt: 1.2.0 Bolt Slackが公式で出しているSlackアプリを作成するためのNode.jsフレームワークです。 どのようなものなのかサクッと試したい方は公式で入門ガイド がありますので、そこから試すことができます。 TimeTree API TimeTreeでは最近APIが公開され、プログラムからTimeTreeへのアクセスが可能となりました。 でたばかりなのでまだまだできることは少ない(2019年9月8日現在)ですが、予定作成はできるようなので使ってみようと思います。 作成したSl

最近ウィルキンソンの炭酸水にハマっている もこ@札幌オフィスです。 HashiConfにて、Terraform Cloudが5人まで無料で使えるようになったとのことですので、早速使ってみました！ 実際の利用する方法、おすすめの運用方法などもまとめてレポートします！ Workspaceを作成 Terraform Cloudのアカウント作成方法などは省略させていただきます。 アカウント作成が終わった画面で"Create a new Workspace"が表示されます。 GitHub, GitLab, Bitbucketなどの主要Gitサービスとインテグ出来るそうです。 今回は個人のGitHubアカウントでPrivateリポジトリを作成し、インテグしてみます。 コードをGitHubにPush、環境変数を設定 リポジトリをTerraform Cloudと連携させるためには、リポジトリが空の状態だと

by Charles 広告やスポンサーコンテンツを検索結果に影響させないようにするためや、リンク先へのページ評価の受け渡しを無効化するためのnofollow属性が進化するとGoogleが発表しました。新たに「sponsored」「ugc」という2つのリンク属性も発表されています。 Official Google Webmaster Central Blog: Evolving “nofollow” – new ways to identify the nature of links https://webmasters.googleblog.com/2019/09/evolving-nofollow-new-ways-to-identify.html nofollow属性は、もともとスパムに対抗する手段であり、信頼できないサイトへのリンクに対してnofollowを設定することで検索エンジン

Vice President of Ad Product 前田俊太郎 「A/B Test機能におかしいところがあるのでみていただきたいです」 「どなたか、この現象の原因がわかるエンジニアさんいますか？」 「これストップしてください」 このような表現で、エンジニアに仕事を依頼してしまったことはありませんか？ 目の前の仕事で手一杯になっているときは特に、普段よりもコミュニケーション不全を起こしがちです。 テック企業に務める従業員ならば、より高い成果を出していくため、職種を横断して協力し合いたい気持ちは同じはず。エンジニアとビジネスサイドの従業員のように、異なるプロフェッショナル領域を持つ人同士が、スムーズにコミュニケーションをとって業務を推進していくには、どのようなことに気をつければ良いのでしょうか。 エンジニアとの円滑なコミュニケーションの実現を目指して、今回はVice President

【追記：2019/9/17】 記事で誤りがあった部分を修正いたしました。 またサンプルも正しいものに修正しておりますので、是非ご確認ください。 【追記:2019/9/10】 コメントでもご指摘を頂いておりますが、一部誤った内容が含まれております。 すぐに修正に取り掛かりますが、内容の修正まで今しばらくお待ち頂けますようお願いいたします。🙇‍♂️ また、今回多くの方に誤った内容をお伝えしてしまったこと、深くお詫び致します。 （多くのいいねを頂いており、ストックに登録して頂いている方もいらっしゃると思いますので、非公開にせず修正又は内容の削除で対応致します。） 先日インターンでソシャゲ用のAPIを作った時に、サーバーサイド未経験ながらGolang＆クリーンアーキテクチャ（的な）のAPIを構築しました。 特にインターンで用意されていた内容というわけではなく、個人の課題としてクリーンアーキテクチ

おはようございます、もきゅりんです。 突然ですが、システムの設計って、とても大事ですよね。 設計者は設計するにあたって、何かしらの指針に沿って考えているかと思います。 熟練者であれば、経験と実績によって状況に応じた適切な指針が培われてきており、それを礎として設計するでしょう。 しかし、わたしは熟練者である、と自信をもてない方はどうしたら良いのでしょう。 近くに熟練者がいればまぁコバンザメのようにくっついてなんとかなるかもしれません。 あるいは、お金を払ってコンサルタントを雇うのも手段かもしれません。 思い切って勘と気合でやってしまうのも漢らしいです。 何にせよ、コストはそれなりにかかってしまいますよね。 幸いなことに、AWSでは、AWS Well-Architected Framework(以下、W-A)として、 そのような設計の指針(以後、柱と称します)を5つ提示してくれています。 その

こちらでVue.jsのプロジェクトを作成しておいてください。 今回のレッスンの全体像 今回のレッスンは、Vue.jsとFirebaseを連携させることが目的です。 Vue.jsとFirebaseが連携できれば、Vue.jsで作成した画面から、データをFirebaseに保存したり、引き出したり、消したり出来るようになります。 つまり、皆さんが想像する一般的なウェブサービスを作れます。 Firebaseとは？ Firebaseとは、Googleが提供するモバイル・Webアプリケーション開発プラットフォームです。 様々な便利なサービスを提供してくれていますが、今回はFirestoreと言う、データベースのサービスを利用します。 Firebaseのプロジェクトを作成 まずはFirebaseのアカウントを作成してください。 Firebase アカウントができたら「プロジェクトを追加」をクリックします

ここでいうおじさんSEとは、主にSIerに生息する、 ・30歳以上で ・モダンな技術を知らない ・レガシーな技術しか知らない ・主に設計書などのドキュメント類を弄っており、コーディングをしない ・現状から変わる気がない（キャリアアップに対し具体的なアクションがない） 人たちを指す。 決して単に妙齢のエンジニアを一括りにしているわけではない。 「おじさんSE」より良い呼び方があれば、ぜひご提案いただきたい。 第1章　おじさんSEの仕事内容 おじさんSEは、コードを書くことはほぼ無い。 これは現場にもよるので、全く無いというわけではないが、 多くのおじさんSEはコーディングはしない。 ではおじさんSEは何をやっているのかというと、 ・内部設計書、外部設計書、詳細設計書の記述 ・結合試験以降の試験項目票の作成 ・試験結果のレビュー 大抵はこの3つになる。 99.9％はウォーターフォール型である。