Published 2024/04/26 Argano の松田です。 この記事では Vite で作成したプロジェクトを AWS の S3 と CloudFront を使用して公開する方法について紹介します。 サンプルでは React を使用しますが、Vue や Svelte でも同様の手順で公開できます。
※ AWS アカウントが存在すること、Node.js がインストールされていることを前提としています。
Vite プロジェクトの作成 まずは Vite のプロジェクトを作成します。
npm create vite@latest my-react-app -- --template react-swc-ts cd my-react-app npm install npm run dev # 開発サーバーを起動 npm run build # プロダクションビルド npm run preview # プロダクションビルドしたものをローカルで確認 Git で管理します。後々 Github Actions を使用するため、Github にリポジトリを作成してください。
git init git add . git commit -m "Initial commit" S3 バケットの作成 ビルド結果を格納する S3 バケットを作成します。
Continue reading ↦ Published 2023/04/28 Arganoの小副川です。 今回の記事では、OAuth2.0 について書きたいと思います。
OAuth2.0 とは OAuth2.0 は、情報リソースの所有者に代わって、そのリソースにアクセスをするための認可を与えるプロトコルです。 このプロトコルを利用することによって、複数のWebサービスやアプリケーション間でユーザー情報等を共有することができるようになります。
例) Facebook のアカウント情報を使って Instagram のサービスを利用する。
用語の定義 OAuth2.0 を理解する上でかかせない用語について解説します。
リソースオーナー
あるサービスやアプリケーションを利用しようとするユーザーを指します。とどのつまり私達です。
リソースサーバー
リソースオーナーが保護したい情報が格納されているサーバーです。
クライアント
保護されている情報にアクセスをするサービスやアプリのことです。Instagram や Twitter がこれに該当します。
認可サーバー
リソースサーバーが信頼を置いているサーバーです。Facebook や Google がこれに該当します。ここでリソースサーバーへアクセスするために必要な鍵(アクセストークン)を発行することができます。
アクセストークン
リソースサーバーに保護されている情報へアクセスするために必要な鍵のことです。
認可コード
認可サーバーに対して、アクセストークンを発行してもらうために必要な証明書になります。
認証と認可の違い 最初にも述べましたが、OAuth2.0 は認可をするためのプロトコルです。認証をするためのものではありません。認可と認証についての違いは下記のとおりです。
認可(Authorization) リソースへアクセスすることに対して、権限を与えることを示します。OAuth2.0 のプロトコルでは、リソースオーナーが認可サーバーに対して情報提供の同意をする部分に該当します。
認証(Authentication) 通信相手が誰であるかの検証をすること。普段、私達がWebサービスを利用する際に、IDやパスワードを使ってログインをしているのが認証に当たります。
OAuth2.0 を認証の代わりに使うことは、セキュリティリスクが伴うため推奨されていません。リスクについて気になる方はこちらの記事に詳しく書かれているので、一読してみて下さい。
認可の流れ プロトコルを利用して認可をするまでの一例を見てみましょう。
Continue reading ↦ Published 2023/03/31 Arganoのイジェソンです。 今回はJS DOM Eventのbubblingとcapturingについて調べてみました。
bubbling 이란? 어느 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 가장 최상단의 조상의 요소를 만날 때 까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 bubbling이라고 합니다.
좀 더 짧게 말하면 document 혹은 window 객체를 만날 때까지 상단을 향해서 이벤트가 전파되는 현상을 말합니다.
몇몇 이벤트를 제외한 거의 모든 이벤트는 버블링이 됩니다. (focus 이벤트 등은 전파되지 않는다.) (MDN event reference)
아무것도 설정하지 않은 경우 기본적으로 버블링이 발생합니다.
Continue reading ↦ Published 2023/03/24 Arganoの池田です。前回の記事に引き続き今回の記事もZodについての記事になります。今回はZodをフォームのバリデーションなどに利用する際に必要になるエラーハンドリング関連の機能について調査した内容を書いていきます。
本記事を執筆時点でのZodのバージョンはv3.21.4です。
エラー内容の捕捉 Zodはスキーマのparseメソッドを呼び出すことでバリデーションを行うことができますが、バリデーションの結果として入力に不備があればこのメソッドはエラー内容を情報として含んだ例外を投げます。
import { z, ZodError } from "zod" const user = z.object({ name: z.object({ first: z.string().min(1), last: z.string().min(1), }), email: z.string().email(), }) try { const parsed = user.parse({ name: "", email: "" }) } catch (e) { if (e instanceof ZodError) { // ここでエラーのハンドリングを行う } } 上記のコードを実行するとparse実行時に次の様なエラーオブジェクトが例外として投げられました。
{ issues: [ { "code": "too_small", "minimum": 1, "type": "string", "inclusive": true, "exact": false, "message": "String must contain at least 1 character(s)", "path": [ "name", "first" ] }, { "code": "too_small", "minimum": 1, "type": "string", "inclusive": true, "exact": false, "message": "String must contain at least 1 character(s)", "path": [ "name", "last" ] }, { "validation": "email", "code": "invalid_string", "message": "Invalid email", "path": [ "email" ] } ] } ドキュメントによるとバリデーションの失敗時に投げられるエラーオブジェクトはZodErrorでありZodErrorはエラーの詳細情報をZodIssueの配列で保持していることがわかります。
Continue reading ↦ Published 2023/02/24 はじめまして、Arganoの小副川です。
この記事では、AndroidでTelecomフレームワークを利用して電話を発信するアプリの実装方法について紹介します。
言語にはJava、IDEにAndroid Studioを利用する前提で進めていきます。Android Studioの環境構築に関しては触れておりません。
Telecomフレームワークとは Telecomは、音声通話やビデオ通話の状態をAndroid OSに伝える役割を担っており、他の通話アプリと通話状態が競合しないように管理するためのフレームワークです。
今回は、Telecomフレームワークが提供する TelecomManager クラスの placeCall メソッドを使って電話を発信するだけのシンプルなアプリを実装していきます。
プロジェクトの作成 Android Studioに用意されている[Empty Activity]テンプレートを利用してプロジェクトを作成します。
File>New>New Project を選択します。 [Phone and Tablet]タブの[Empty Activity]を選択して、[Next]をクリックします。 [Name]にプロジェクト名を入力、今回は CallApp とでもしておきます。 [Package name]と[Save location]はそのままにします。 [Language]は[Java]を選択します。 [Minimum SDK]は[API 30]を選択、こちらは開発環境によって適宜変更してください。 [Finish]をクリックして、Gradleのビルドが終わるのを待ちましょう。 EditTextとButtonの配置 プロジェクトの作成が完了しましたので、電話番号の入力と発信に使うボタンの準備に取り掛かります。
res/values/strings.xml を開き、画面に表示させる文字列を記述していきましょう。
<string name="phone_input">電話番号入力</string> <string name="call_button">発信</string> 次に、res/layout/activity_main.xml を開きます。レイアウトエディタを使用せずにコーディングしていきますので、[Design]が選択されている場合は[Code]に切り替えてください。
androidx.constraintlayout.widget.ConstraintLayout とその中身は使用しませので削除しましょう。代わりに、 LinearLayout の中へ EditText と Button を配置してきます。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="20dp" android:paddingLeft="20dp" android:paddingRight="20dp" android:orientation="vertical"> <EditText android:id="@+id/phone_input" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/phone_input" android:inputType="phone" /> <Button android:id="@+id/call_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/call_button" android:onClick="call" /> </LinearLayout> LinearLayout の android:orientation はウィジェットを配置していく方向を指定します。vertical として縦方向に配置していきましょう。 android:padding はお好みで。
Continue reading ↦ Published 2023/02/19 Argano の松田です。 先日、[Android] React Native で JavaScript からネイティブコードを呼び出す方法という記事を書きました。 本記事では iOS 版をご紹介したいと思います。
Native Module Native Module は、Objective-C、Swift、Java、Kotlin、C++ クラスのインスタンスを JavaScript オブジェクトとして公開し、それによって JavaScript の中から任意のネイティブコードを実行できるようにするものです。 今回は React Native アプリケーション内の JavaScript から ネイティブのメソッドを実行してみます。 最終的には、JavaScript から MyModule.log('Test'); を呼び出し、ネイティブにログ出力できるようにします。
Native Module の作成 環境構築は終わっている前提で進めます。iOS の Native Module を作成するには Objective-C か Swift を選ぶことができますが、今回は Objective-C を使用します。 まず、Native Module のヘッダーファイルと実装ファイルを作成します。
ヘッダーファイル RCTMyModule.h の内容
#import <React/RCTBridgeModule.h> @interface MyModule : NSObject <RCTBridgeModule> @end 実装ファイル RCTMyModule.m の内容
#import "RCTMyModule.h" @implementation RCTMyModule RCT_EXPORT_MODULE(); @end Native メソッドを JavaScript に書き出す React Native は、明示的に指示されない限り、Native Module 内のメソッドを JavaScript に公開することはありません。公開したい場合 RCT_EXPORT_METHOD マクロを使用して行うことができます。
Continue reading ↦ Published 2023/02/10 こんにちは、Arganoデザイナーの村田です。
Arganoは2022年12月に自社サイトのリニューアルを行いました。 その際にLottieと呼ばれるライブラリを使用してアニメーションを実装しました。
この記事ではLottieの使い方について紹介いたします。
目次 Lottieとは Lottieを使用するメリット アニメーション作成からReactでアニメーションを描画するまでの流れ Bodymovinのインストール手順 After Effectsから書き出し Reactで描画する よくある実装パターンと応用 まとめ Lottieとは LottieとはWeb・iOS・Android・React Nativeなどでアニメーションを簡単に実装することが可能なライブラリです。
Adobe After Effectsで作成したアニメーションをjsonファイルとして書き出し、そのファイルをLottieコンポーネントが呼び出すことでアニメーションが描画されます。
Lottieを使用するメリット svgで作成されるため、解像度を気にする必要がない デザイナーとエンジニアのコミュニケーションコストが減る ファイルのサイズが軽量 実装のコストが大幅に減る 実装する際の自由度が高い マルチプラットフォームに対応している アニメーション作成からReactでアニメーションを描画するまでの流れ アニメーション作成から画面に描画するまでには下記の手順を行う必要があります。
手順
Illustratorで素材を作成(簡易的なアニメーションの場合不要) Illustratorから素材を取り込み、After Effectsでアニメーションを作成 After EffectsのエクステンションのBodymovinでjsonファイルに書き出す Lottieコンポーネントでjsonファイルを呼び出す 手順1と2についてはIllustratorとAfter Effectsの使い方の説明になってしまうので今回は説明を省きます。
After Effectsでのアニメーション作成する際にはLottieでは対応していない機能があるので注意してください。
対応していない機能についてはこちらからチェックしてください。
またエンジニアの方や実装から入りたい方はLottieFilesより無料でLottie用のjsonファイルをダウンロードして使用することが可能です。
Bodymovinのインストール手順 アニメーションが作成できたら、jsonファイルに書き出すためにBodymovinをAfter Effectsにインストールする必要があります。
Bodymovinのインストールの方法は「Adobeからダウンロードする」か「Githubからダウンロードする」か大きく分けて2通りあります。
今回はGithubからダウンロードする手順を紹介します。
まずは下記のサイトから「ZXP Installer」をダウンロードしてください。 こちらのアプリはAfter Effectsにエクステンションを追加する為に必要なインストーラーです。
ZXPInstaller
次にBodymovinをダウンロードします。
Github
Bodymovinがダウンロードできたら、ZXPInstallerを開きファイルをドラッグ＆ドロップするとAfterEffectsでBobymovinが使えるようになります。
After Effectsから書き出し [ウィンドウ]→[エクステンション]→[Bodymovin]を選択します。
Continue reading ↦ Published 2023/02/04 はじめまして。Argano の松田です。 本記事では、React Native で JavaScript からネイティブコードを呼び出す方法を紹介します。
Native Module React Native でアプリを作成する際、次のような要望が出てくるかもしれません。
Apple や Google Pay にアクセスするためのネイティブ API など、JavaScript ではデフォルトで利用できないネイティブプラットフォーム API にアクセスする必要がある 既存の Objective-C、Swift、Java、Kotlin、C++ ライブラリを JavaScript で再実装せずに再利用したい 画像処理などのために高性能なマルチスレッドコードを記述したい そんな時に React Native の Native Module をいう機能を使用できます。 Native Module は、Objective-C、Swift、Java、Kotlin、C++ クラスのインスタンスを JavaScript オブジェクトとして公開し、それによって JavaScript の中から任意のネイティブコードを実行できるようにするものです。 今回は React Native アプリケーション内の JavaScript から ネイティブのメソッドを実行してみます。 最終的には、JavaScript から MyModule.log('Test'); を呼び出し、ネイティブにログ出力できるようにします。
Native Module の作成 環境構築は終わっている前提で進めます。Android の Native Module を作成するには Java か Kotlin を選ぶことができますが、今回は Java を使用します。 ます、android/app/src/main/java/com/your-app-name/ フォルダ内に、MyModule.
Continue reading ↦ Published 2023/02/03 こんにちは。Arganoの長澤です。
今回はZoho CRMのカスタム関数＆ワークフロールールの活用事例を紹介します。
Webフォームを利用して顧客情報の自動更新を実現する方法 ややピンポイントな事例ではありますが、日本語での情報があまりないようですので、Zoho CRMのカスタム関数やワークフロールールについて知りたい方、自動化を進めたい方の一助になれば幸いです。CRMを検討している方、Zohoが気になっている方の参考にもなれば幸いです。
Zoho CRMのWebフォームは、CRM内の項目と紐づけてデータを取得できる便利なものですが、既存データの上書きができません。そのまま使用すると新規データとしてのみCRMに取り込まれます。
しかしながら今回の事例同様、既に取得している顧客データの上書きがしたい、というケースも多いかと思います。
解決策 解決策は次の通りです。
Webフォームを作成する 取得した情報を既存データに上書きするカスタム関数を作成する カスタム関数を発動するワークフロールールを作成する 順に解説します。
Webフォームを作成する 例えばこのようなものです。取得したい情報を項目として設定します。
取得した情報を既存データに上書きするカスタム関数を作成する CasesDetail = zoho.crm.getRecordById("Cases",CasesId); CasesEmail = CasesDetail.get("Email"); ContactsDetail = zoho.crm.searchRecords("Contacts","(Email:equals:" + CasesEmail + ")"); Contacts = ContactsDetail.get(0); updateMap = Map(); updateMap.put("favorite_city",ifnull(CasesDetail.get("favorite_city"),"")); updateMap.put("why_i_fell_in_love",ifnull(CasesDetail.get("why_i_fell_in_love"),"")); updateMap.put("the_day_i_fell_in_love",ifnull(CasesDetail.get("the_day_i_fell_in_love"),"")); update = zoho.crm.updateRecord("Contacts",Contacts.get("id"),updateMap,{"trigger":{"workflow"}}); このように記述します。
「Cases」はWebフォームから送信された情報が新規データとして取り込まれるタブ（モジュール）です。
「Contacts」は「顧客」タブを表します。
Webフォームから取得する各項目のAPI名は次の通りです。
好きな街: favorite_city 好きになった理由: why_i_fell_in_love 好きになった日: the_day_i_fell_in_love 今回はCases、Contactsの両タブにおける同名項目（今回で言えば好きな街、好きになった理由など）のAPI名を同名に設定していますが、タブごとにAPI名が異なる場合もありますので注意が必要です。
これにて、「Webフォームから取得した情報がCasesに入った際、メールアドレス（Email）が既存顧客と同じ場合、その顧客データの項目（取得した項目: 好きな街他）を更新する」関数の完成です。
カスタム関数を発動するワークフロールールを作成する ワークフロールールはこのように設定します。一部英語的な表現でわかりづらいですが、Casesが作成された際、メールアドレスが空でなかった場合に、作成した関数が発動する、というワークフローです。
これで新たに取得した情報を既存の顧客データに手動入力する、という手間から解放されました。
おめでとうございます。
以上
Published 2023/01/27 はじめまして、Arganoのジェソンです。 postMessageを利用する機会があったので、パフォーマンスについて調べて見ました。
postMessage란? postMessage는 크로스 도큐먼트 메세징(Cross Document Messaging)이라고도 불립니다. 일반적으로 스크립트는 same-origin policy에 의해 protocol, domain, port 중 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없습니다. 하지만 이름에서도 알 수 있듯이 postMessage()를 사용하면 origin이 다른 윈도우와 통신할 수 있습니다.
사용방법은 아래와 같습니다.
송신방법 window.postMessage(data, targetOrigin, [transfer]); data: 다른 스크립트에 전달할 메세지(data는 string형태로만 전달된다.) targetOrigin: 타겟 도메인, 즉 메세지를 수신받는 도메인을 지정한다. 대상이 특정 도메인이 아니라면 "*"료 지정한다. transfer 객체를 전송할 수 있다.
Continue reading ↦