[LIFF SDK]CDN版を使いながら、TypeScriptの型定義を利用する方法 | DevelopersIO
吉川@広島です。 npm版よりCDN版を選択する理由 LINEミニアプリやLIFFアプリの開発においてLIFF SDKを利用する際に、 CDNから読み込んで利用する npmパッケージとしてインストールして利用する の2択があります。 TypeScriptで開発する場合、型定義ファイルを利用したい都合からnpmパッケージをインストールしたいところです。 しかし、現時点（2021/9/3）においてnpm版は LIFFアプリを開発する | LINE Developers npmパッケージの試験公開 npmパッケージは、試験的に公開しています。今後、予告なく変更、または削除される可能性があります。 という位置づけのようなので、CDN版に寄せるという判断をすることがあります。 でもnpm版の型定義も利用したい CDNで読み込んだ場合、グローバルのwindowにliffオブジェクトが生えるので、それを
![[LIFF SDK]CDN版を使いながら、TypeScriptの型定義を利用する方法 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/282fb3217ad4059f9bd0462360450c5018904535/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Fline-eyecatch.jpg)
JavaScriptで性能テストやってみた〜K6編〜 | DevelopersIO
こんにちはMAD事業部のホンギです。 負荷テストや性能テストという言葉を聞いたことありますか。 プロダクトの性能をテストするためや大量のアクセスを受けた時どれだけのアクセスまで耐えられるのかなど プロダクトが持っている性能の限界を測るために行うテストです。 今日は数多い性能テストツールの中でJSで書けるk6というツールをご紹介します。 この記事を読み終わってからはk6でテストを実施できるようになるのが今回の目標です。 k6 k6の実行イメージ（k6 GitHub 抜粋） k6を一言で言うとJSで書けるツールでユニットテストみたいに性能テストすることを目指しいるOSSです。 なおk6コミュニティーではシナリオ作成を柔軟にするためPostmanやSwagger,OpenAPIなどで定義されているAPIも変換対応しています。 API実行でよく使われてるPostmanの場合postman-to-k
仕事の文章はもうChatGPTに任せたい | DevelopersIO
本来、エンジニアであれば実装の能力、デザイナーであればデザインの能力があればいい。 しかし仕事はチームで動くことがほとんどなので、こうした「専門的な力」にプラスして、コミュニケーション能力のような「普遍的な力」が求められる。これは、ポータブルスキル、ソフトスキルなどとも言われるものと同一である。 この「普遍的な力」の一つに、文章力がある。デジタルを活用しようとすると、メールやチャットなど、仕事の中で文章を書く機会は明らかに増える。リモートワークは文章が下手な人には不利な環境だ、という人もいるが、デジタル活用力と文章力は密接な関係にあることを示した発言だと思う。 ブログやソーシャルメディアによって、文章力がある人は、より一層、自分の価値を高めることができるようになった。 10の専門力+1の文章力で構成された人より、6の専門力+8の文章力で構成された人の方が、高く評価され、市場価値が高まり、い
SQLiteを分散データベースに変えるmvSQLite | DevelopersIO
Introduction 先日Githubに公開されたmvSQLiteですが、 「SQLite互換のスケーラブルなデータベース」とのことで話題になってます。 mvSQLiteの特徴は、SQLiteのストレージレイヤーをFoundationDBに分離しているところです。 これにより、DynamoDBのように際限のないスケーラビリティ、point-in-timeでの読み取り、 そしてRDBの厳密な一貫性を提供します。 作成者曰く、mvSQLiteの目標は 「SQLiteを分散データベースに変えること」 とのことです。 FoundationDBとは FoundationDBは大量の構造化データを処理するために設計された分散データベースです。 2015年にAppleが買収したことでもニュースになりました。 データをソート済みのKeyValueデータとして保管し、 すべての操作にACIDトランザクシ
[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO
[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた こんにちは、CX事業本部の若槻です。 Google Maps APIのReact向けライブラリは現在アクティブなものでもいくつか種類がありますが、そのうちのひとつに@react-google-maps/apiがあります。リポジトリやドキュメントは下記となります。 @react-google-maps/api - npm JustFly1984/react-google-maps-api: React Google Maps API React Google Maps Api Style Guide この@react-google-maps/apiは、前回の記事で紹介したものに比べてより頻繁にアップデートが行われているようです。 今回は、@react-g
![[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c4bbfc30d9c579c165e2970097d822f63f8c0aa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F02%2Fgoogle_map.jpg)
@react-google-maps/apiを使った地図アプリでマーカーとバルーンの位置関係をいい感じに表示する | DevelopersIO
こんにちは、CX事業本部の若槻です。 前回の記事では@react-google-maps/apiの基本的な動作をReactアプリを実際に起動して確認しました。 今回は、@react-google-maps/apiを使った地図アプリでマーカーとバルーンの位置関係をいい感じに表示する方法を確認してみました。 やりたいこと 下記のように指定の座標位置に配置されたマーカーの上部にバルーンを表示し、マップの拡縮をしてもマーカーとバルーンの相対位置が変わらないようにしたいです。 やってみる 環境作成 前回の下記記事で作成した環境があればそのまま利用可能です。 [React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO 未作成の場合は下記コマンドを実行してReactプロジェクト作成とパッケージイ
[React] よーし! いっちょReactやってみっか! #6 スタイル編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。 前回は、プロジェクトのデフォルト構成を一旦作り直してindex.jsの簡単な実装をしてみました。 今回はスタイルを当てる方法などをまとめてみたいなぁと思います。 スタイル直接指定 HTMLでstyle属性を直接書くように要素のスタイルを書くことができます。 あくまでJSXなのでHTMLとは仕様が違うところがあります。 大きな違いとしてはJavaScriptオブジェクトを渡すことと、その中身はCSSでおなじみのケバブケースではなくキャメルケースで渡すことです。 簡単に書いてみるとこんな感じです。 const Hello = (props) => { let style = { bac
![[React] よーし! いっちょReactやってみっか! #6 スタイル編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee41023e6f390843baace34a303c74b1767c52d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Freact.jpg)
ngrokを使ってローカル開発中のVueアプリをHTTPSで公開する | DevelopersIO
開発中のVueアプリをHTTPSで公開したい Vueアプリを開発中は通常、以下の流れで開発すると思います。 yarn serve で http://localhost:3000 で起動 ブラウザで http://localhost:3000 を開く 以降、変更内容がホットリロードされる 通常はこの流れでスピーディに開発できますが、ある事情によりHTTPSとして立ち上げなければならない場合があります。 LIFF（LINE Front-End Framework）などLINE上で立ち上げたい場合 (例) HTTPSのみ許可されるブラウザで起動したい場合 そんな時は ngrok を使って、ローカルで起動しているアプリをHTTPSで公開しましょう。 導入方法 今回は vue create などでVueアプリを作成している前提で進めます。 $ vue create ngrok-sample Vueア
リアルタイムにコンポーネントをプレビューできるReact Preview (beta) を試してみた | DevelopersIO
吉川@広島です。 Are you a React dev? Do you use Visual Studio Code? I just released the beta of React Preview for VS Code ?https://t.co/HnFpTpO9op pic.twitter.com/qU4sxTo30g — François Wouts (@fwouts) June 25, 2021 「お前らReactとVSCode使ってる？ React Preview for VS Codeのベータ版を出したぜ」 こちらのツイートが目に入り、「え、これすごくない？」ということで試してみました。 本記事ではReactアプリケーションの初期構築手順は割愛します。 環境 react 17.0.2 typescript 4.3.2 styled-components 5.3.0 VS
[iOS] AVFoundationを使用して、「ビデオ録画」や「連写カメラ」や「QRコードリーダー」や「バーコードリーダー」を作ってみた | DevelopersIO
[iOS] AVFoundationを使用して、「ビデオ録画」や「連写カメラ」や「QRコードリーダー」や「バーコードリーダー」を作ってみた 1 AVFoundation AVFoundationは、音声・動画などのメディアの再生や作成、編集を行うことの出来る巨大なフレームワークです。 入力側をデバイスと考えた場合、AVFoundationは、大まかに、次の３つの構成になっているといえます。 デバイス(AVCaptureDevice) セッション(AVCaptureSession) 出力(AVCaptureOutput) AVFoundationを使用するには、まずは、中心となるAVCaptureSessionをインスタンス化します。 そして、このAVCaptureSessionに対して、使用したいデバイスを入力として接続し、利用目的に合致したAVCaptureOutputを出力に接続するこ
![[iOS] AVFoundationを使用して、「ビデオ録画」や「連写カメラ」や「QRコードリーダー」や「バーコードリーダー」を作ってみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd616d43627770acf3d2af18695851272d60bed9/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F12%2Fios.png)
[iOS] AVFoundation(AVCaptureMetadataOutput)でQRコードリーダーを作ってみた | DevelopersIO
1 はじめに 本記事は、AVFoundationを使用したQRコードの読み取りを紹介するものです。 AVFoundationを使用する場合の共通的な処理については下記に纏めましたので、是非、ご参照下さい。 [iOS] AVFundationを使用して、「ビデオ録画」や「連写カメラ」や「QRコードリーダー」や「バーコードリーダー」を作ってみた 2 入出力 QRコードの読み取りを実装する場合、入力として、カメラ（今回は背面）を使用し、出力として、メタデータであるAVCaptureMetadataOutputを設定します。 下記のコードは、セッションを生成して、上記のとおり入出力をセットしている例です。 // セッションのインスタンス生成 let captureSession = AVCaptureSession() // 入力（背面カメラ） let videoDevice = AVCaptur
[iOS] AVFoundation(AVCaptureMetadataOutput)でバーコードリーダーを作ってみた | DevelopersIO
1 はじめに 本記事は、AVFoundationを使用しのバーコードの読み取りを紹介するものです。 AVFoundationを使用する場合の共通的な処理については下記に纏めましたので、是非、ご参照下さい。 [iOS] AVFundationを使用して、「ビデオ録画」や「連写カメラ」や「QRコードリーダー」や「バーコードリーダー」を作ってみた バーコードの規格も多数存在していますが、日本では、標準タイプ（13桁）と短縮タイプ（8桁）の2種類が主に利用されているようです。 本記事のサンプルでは、この２つを検出するため、対象のメタデータタイプをAVMetadataObjectTypeEAN13Code及び、AVMetadataObjectTypeEAN8Codeに設定しています。 2 入出力 QRコードの読み取りを実装する場合、入力として、カメラ（今回は背面）を使用し、出力として、メタデータであ
TSyringeの使い方とコンテナ登録方法ごとの評価タイミングについて | DevelopersIO
吉川@広島です。 TypeScriptのDIコンテナライブラリはInversifyJSとTSyringeが有名ですが、より機能がミニマムと思われる後者に興味が出たため使ってみました。 https://github.com/microsoft/tsyringe 一番メジャーなInversifyに比べるとTSyringeはやや情報が少ないのと、公式のREADMEもかなりあっさりとしていて使い始める際に戸惑いやすいと思いました。 本記事では、 基本的な使い方 コンテナに登録したクラスのインスタンスをいつ生成しているか を確認したので紹介します。 後者が気になった理由は、DIコンテナへの登録は遅延評価方式に寄せた方がアプリケーション起動時のパフォーマンスに有利に働きやすいと考えるためです。 環境 TSyringe v4.4.0 使い方 import 'reflect-metadata' impor
くらめその情シス：社内基幹のIdPをAzureADに切り替えたおはなし | DevelopersIO
はじめに どうも、情シスやってますアノテーションの徳道です。 社内のMDM移行もいろいろ目途がつき、2021年2月にGoogle WorkspaceやSalesforceなど社内基幹のシングルサインオンをAzureADに切り替えました。 1年近くほぼAzure関連の導入・運用検討をしつつ記事を書いてきましたが、ここが一つの区切りかな、というところです。 今回はXデーにAzureADをIdPとしたシングルサインオン設定の設定事例（主にハマったポイント）を紹介します。 Special Thanks：植木 和樹 基幹システムのシングルサインオンの構成 今回設定したシングルサインオンの構成を図で示します。SAML2.0認証が可能なSaaSについて今後追加されていくことになります。 IdPの設定準備 AzureADエンタープライズアプリケーションでSAMLによるシングルオン設定は以前の記事でも紹介し
node.jsのいろいろなモジュール35 – SuperAgentでHTTPリクエストを行う | DevelopersIO
軽量HTTPクライアント SuperAgentとは、柔軟性と読みやすさを兼ね備えた、軽量HTTPクライアントです。 シンプルな使い方から高機能な使い方まで、用途に応じて簡単に使用することができます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 Node.js : v0.10.4 npm : 1.2.18 npmを使用してモジュールをインストールしましょう。 % mkdir superagent % cd superagent % npm install superagent サンプルプログラム作成 superagentモジュールをrequireし、メソッドと宛先URLを指定するだけでリクエストを送信することができます。 end関数でコールバックを指定し、レスポンスを参照することができます。 var request = require('s
React向けの新しいAuth0 SDKが登場してました | DevelopersIO
Auth0 React SDKが登場して, Reactで作成したSPAへの組み込みがより簡単になりました. 認証や認可, ログイン処理はアプリケーション開発者の頭痛のタネであります. Auth0はそれらに対する解決を提供するプラットフォームであると同時にアプリケーションを簡単にベストプラクティスにそわせてセキュアに設計するためのSDKも提供しています. 様々な種別のSDKを提供しているのですが, SPAでAuth0を利用する場合はAuth0 Single Page App SDKが提供されています. これはどのようなライブラリやフレームワークを利用したSPAであってもうまく動作します. Auth0 React SDKはReact Custom HooksとHOCを提供しており, これを利用することでセキュアなアプリケーションがSPA SDKより少ないコードでかけます. SPA SDKとの違
Auth0 React SDKで保護されたルートを実現する | DevelopersIO
Auth0 React SDKが登場して, Reactを利用した開発に大きな風が吹き荒れています. 主に私の中でです. Auth0 React SDKの紹介は以前書きましたが, ルーティングについて触れていなかったので今回は保護されたルートの実現を試していきます. ReactでSPA作っていることを前提として書いていきますので, Reactについてはあまり触れません. TL;DL 結論だけをみたい方はここを参照にコードを書いていただければ幸いです. この記事では保護されたルートはAuth0 React SDKが提供するwithAuthenticationRequiredとReact Router v5で実現していきます. まず, 保護されたルートを下記のように定義します. /src/protected.tsx import { withAuthenticationRequired } fr
TypeScriptを動かす方法4選 | DevelopersIO
Introduction TypeScriptは直近１年で最も使われているプログラミング言語第4位で、 いまとても勢いのある開発言語です。 ご存知のとおり、TypeScriptはMicrosoftが開発した言語で、JavaScriptのスーパーセットです。 先ごろv4.1がリリースされ、今後さらに使われていくと思われます。 本稿では、TypeScriptに興味をもった人が簡単に動かしてみるための方法をいくつか紹介します。 Use Playground とにかくすぐTypeScriptを動かしたい場合、ブラウザでPlaygroundにアクセスすれば そのまま動かすことができます。 ブラウザ上で補完もきくし、ts configを細かく設定したり TypeScriptのバージョンも細かく指定できて便利です。 ※むかし自分で書いてた ちなみに、ここもPlaygroundとして使えます。（バージョン
「イオンモールの総賃貸面積ランキング」ダッシュボードをノンコーディングで作ってみた #tableau #alteryx | DevelopersIO
座右の銘は「大は小を兼ねる」、データアナリティクス事業本部ソリューション部・新納（にいの）です。 鉄板の会話ネタと言えば「今日の天気」が挙げられるかと思いますが、それと同じくらい頻繁に話題に上がるのが「イオンモールの大きさ」でしょう。登山をしたり海に出たりすると、自然の雄大さを前にして自分自身のちっぽけさを痛感し、悩みもなんだかどうでもよくなる…それと同じ感情をイオンモールに感じている方も多いのではないでしょうか。私もその一人です。 巨大なイオンモールに畏怖の念すら抱く我々にとって、「会話に困らないようにイオンモールの大きさランキングを知っておきたい」「でかいイオンモール（でっかイオン）に行きたい」という感情はごく自然に湧いてくるものです。 というわけで、AlteryxとTableauでイオンモールの大きさランキングをノンコーディングで可視化してみました。 前提条件 今回の検証で使用した環
VSCodeの秘伝のワザを大公開！ | DevelopersIO
こんにちは！CX事業本部の片岡です。 エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか？皆様ご愛用のことと存じます。 そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します！ よく使うショートカットの紹介 拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。 https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings 編集時によく使うショートカット 文字選択 Command + D ：文字を選択（入力するたび選択中の文字を複数選択できます） Command + U ：文字選択のUndo（選択前に一つ戻ります） Command +
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
