Vue3<script setup lang="ts">知見
はじめに 先日、仕事で参加させてもらっているプロジェクトでVueを3系にバージョンアップしました。 続いて、TypeScriptが入っていなかったので入れたのですが、なかなか<script setup lang="ts">の知見がネットになかったのでここに軽く共有できたらと思います。 前提 Vueは3.2系（<script setup>が使えるのは3.2系から） TypeScriptは4.5.5(vue-createするとこれが入る) webpacker... ts-loader 有用なドキュメント集 おそらく<script setup>自体は簡単に書けるようになってすぐ慣れると思うのですが、TypeScript対応が結構癖があって困ります。 なのでこれらの公式ドキュメントをよく読むようにしましょう。 SFC<script setup>TypeScript のみの機能 https://v3
VSCode に WakaTime を導入してコード編集時間を可視化する - Qiita
WakaTimeとは？ WakaTimeは、エディタと連動してコード編集の作業時間を可視化できるサービスです。 編集したコードのプロジェクト（リポジトリ）、言語、ブランチを自動的に検出してダッシュボード化してくれます。 エディタ操作が一定時間止まると自動的に計測停止してくれます。自分でタイマー開始・停止する必要はありません。 たいていのエディタは対応しています。 https://wakatime.com/plugins この記事では、VSCode に WakaTime を導入してダッシュボード確認するまでの手順を説明します。 WakaTimeアカウント登録 https://wakatime.com/signup からサインアップしてください。 APIキー発行 https://wakatime.com/settings/account からAPIキーを発行できます。 VSCode と Wak
安心して利用できる図書館データの紹介 - Qiita
先日、私が公開しているWebサイト 図書館施設データポータル について紹介した以下のQiitaの記事 が、はてなブックマークにて、200を超えるブックマークをいただき、TwitterなどSNS等でも多数の共有をいただけたようで、多くの方に私の公開するWebサイトを知っていただきとてもうれしかったです。 また、私の想像よりも図書館が持つデジタルデータに興味を持っている方々がたくさんおられるのだなと思いました。その反面、過去の騒動の影響か図書館のデータの利用に不安を持たれている方も少なからずおられるようでした。 図書館施設データポータル で使用しているデータは、先のQiitaの記事でも書いていますが、各館のWebサイトをスクレイピングしたものではなく国立国会図書館が公開する「図書館及び関連組織のための国際標準識別子（ISIL）」試行版LODのデータセットをダウンロード・加工して使用しています。
TEPRA Lite ではじめる BLE リバースエンジニアリング / tepra-lite-ble-reverse-engineering
第54回 情報科学若手の会 #wakate2021
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
Deno 1.12 へのアップデートと変更事項まとめ - 虎の穴開発室ブログ
皆さんこんにちは、暑い中ですがお元気ですか？おっくんです。 去る 2021 年 7 月 13 日に Deno 1.12 がリリースされました。 今回も、リリースノートを参考に 変更事項の気になるところを紹介したいと思います。 実行環境 macOS Catalina 10.15.7 Docker イメージ denoland/deno:centos(確認時点では Deno 1.12.0 でした) Deno 1.12 Deno 1.12 での変更事項をDeno 1.12 リリースノートを元に確認します。 deno.com Web Crypto API の対応メソッドが増えました Deno 1.12 では、 以下のWeb Crypto APIの 3 つの実装が追加されました。 crypto.subtle.generateKey キー生成 crypto.subtle.sign 署名 crypto.s
「Conformityを利用する事で簡易に継続的なセキュリティコンプライアンス対応状況の確認ができる！」を登壇しました。 | DevelopersIO
「Conformityを利用する事で簡易に継続的なセキュリティコンプライアンス対応状況の確認ができる！」を登壇しました。 こんにちは、コンサル部＠大阪オフィスのTodaです。 先日「AWS コンサルティングパートナーがお伝えする最先端のクラウドセキュリティ対策–S3のファイルは安全ですか？AWSの設定は安全ですか？」で Cloud One Conformityの内容について登壇をいたしました。 登壇内容についてご紹介したいと思います。 登壇資料 設定管理の重要性 AWSやAzureなどクラウドサービスではインフラストラクチャの展開、設定が簡単におこなえるため設定時には注意を払う必要がございます。 ただ、人による操作は100％ミスをなくすことは難しいと考えておりますのでシステムによる設定の監視と可視化をおこなう、クラウドセキュリティポスチャマネージメント(CSPM)のソリューションがサードパ
家のポストに荷物が投函されたらSlackに通知が来るIoTやってみた - Qiita
概要 最近は家にいることが多くQOLを上げていきたいと常々考えております。家のポストに荷物やチラシが投函されたら、Slackに通知が来るIoTをやってみました。 仕様 ① エントランスのポストのフタが開いたらCloud Functionsをコールする ② コールされたCloud FunctionsがWebHookでSlackに通知を送る どうやって実現するか？ 仕様は簡単です。ただ「ポストのフタが開いた」ことをトリガーとするデバイスが、ネットワークに接続している状態でなければ実現ができません。マンションのエントランスにあるポストから、自分の部屋のWifiを接続することはできません。 その課題を解決するためにSORACOMが販売している「SORACOM LTE-M Button Plus」を購入して実現することにしました。 SORACOM LTE-M Button Plus とは？ SORA
Googleが誇る自然言語処理モデル「BERT」のAIを簡単に作れるWebアプリを作ってみた - Qiita
#AIメーカー でGoogleが誇る自然言語処理モデル「BERT」のAIをweb上で誰でも気軽に作れるようにしました🎉 ①AIに学習させるテキストのラベルを設定 ②学習データはツイッターから自動で収集 ③AIがデータから学習 の３ステップで簡単！ みんなもAIを作って遊んでみてね！🙌https://t.co/Vnf0QITH1v pic.twitter.com/mUbImOff6j — 2z / AI MAKER (@2zn01) December 27, 2020 こんにちは。 趣味でWebサービスの個人開発をしている、2z（Twitter： @2zn01 ）と申します。 ノーコードで誰でも簡単にAIを作れる「AIメーカー」というサービスを運営しています。 AIメーカー https://aimaker.io/ 今回作ったもの 今回は「AIメーカー」でGoogleが誇る自然言語処理モデ
サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング（SSR）の導入によってSSRFが発生する問題を見つける機会があったため、本記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング（SSR）とは？ 本記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjspのようなテンプレートからHTMLを出力するのとは異なり、一般的には以下のようにクライアントサイドレンダリング（CSR）の文脈で使われることが主です。 近年のVue.jsやReactを代表するようなWebフロントエンドフレームワークはブラウザ上で動的にDOMツリーを構築して画面を描画（CSR）するのが主流となっています。これによってページ遷移を挟まずユーザ体験のよいシングルページアプリケーション（SPA）が作ることができるというメリットがあります。 ただ、単純なSPAにはデメ
Java 16正式リリース。JavaアプリをWin/Mac/Linuxのインストール形式にするパッケージャ登場、OpenJDKソースコードがGitHubへ移行
Java 16正式リリース。JavaアプリをWin/Mac/Linuxのインストール形式にするパッケージャ登場、OpenJDKソースコードがGitHubへ移行 オラクルは、Java 16の正式リリースを発表しました。 Javaは6カ月ごとに「フィーチャーリリース」と呼ばれるメジャーアップデートが行われています。Java 16は昨年9月に登場したJava 15に続くメジャーアップデート。 そして今年9月にリリース予定のJava 17は、Java 11から3年ぶりの長期サポート版となる予定です。 Java 16 is now available! #Java16 #JDK16 #OpenJDK Download now: https://t.co/Oxz17jtyEy Release notes: https://t.co/jj3xvsCxFh API Javadoc: https://t.c
API Gateway + Lambda + Rust で開発する (2021-01) - eagletmt's blog
まとめ netlify_lambda を使う Lambda の Docker イメージサポートを利用する aws-lambda-rie-gateway を使う この構成で Slack の interactive message や block kit で遊んだサンプルがこれ https://github.com/eagletmt/misc/tree/master/rust/slack-slash-command-sample Rust 向けの Lambda Runtime lambda-runtime という準(?)公式の crate がある https://github.com/awslabs/aws-lambda-rust-runtime が、リリースが滞っている。 現在リリースされている中での最新版では async/await の対応すら入っておらず、現在の Rust では正直使い物
CSS Layout API で Masonry Layout | blog.jxck.io
Intro Pinterest でおなじみの Masonry Layout を CSS の標準にする作業と実装が進んでいる。 Masonry Layout 以下のように画像を敷き詰めるタイルレイアウトのことを Masonry (石工やレンガ造りの意味らしい) Layout という。 上の例の場合は、 Height が不揃いの画像を並べる上で、左から敷き詰め、折り返したら既にある画像の高さに合わせて二列目が始まるというロジックになる。 これを実現するには、割と複雑な CSS を書く必要があり、様々なサイトで CSS ライブラリや、 Grid などを用いて再現する方法が紹介されている。 これをそのまま CSS の標準にする作業が Layout API の文脈で行われており、既に一部が(主に Firefox で)実装されている。 grid: masonry; 仕様は以下だ。 CSS Grid L
Web 技術の調査方法 | blog.jxck.io
Intro 「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。 確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。 やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。 スコープとしては、ライブラリ、ツール、フレームワークなどではなく、 Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。 Scope 従来からあり、広く認知された API については、情報も多く調査の敷居はそこまで高くないため、今回は議論が始まって
Vue.js 3 の TSX を TypeScript Compiler だけで動かす方法について
先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残しておこうと思います。 ちなみに Vue 3.0 beta が出た頃に既に検証し終えているコードは以下にあります。 https://github.com/potato4d/vue-next-tsx-only-tsc TL;DR Vue 3 にて、render function の h 関数が分離された h 関数の分離に伴い、 API が React のに近いインターフェースとなった この2点によって tsc だけで Vue TSX が動くようになったが、 近いだけで微妙に違う仕様によって実用は難しい 具体的には children のとり方が VNode[] か ...VNode かの違いがある Vue
面白Web API 100連発 - pastak-pub
エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
認証・認可基盤に Keycloak を使って開発生産性を上げた話
クラメソの監視サービスがその基盤に Mackerel を採用した話
Next.js 10のnext/imageによる画像最適化を試してみた
まちにまった Vue.js 3
