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 ↦ Published 2023/01/20 はじめまして、Arganoの池田です。
本記事ではバリデーションライブラリZodについて紹介します。
Zod とは ZodはTypeScript-firstなスキーマ定義とバリデーションを提供するライブラリです。Zodは他のバリデーションライブラリと比べてTypescriptとの相性が非常に良く、依存パッケージが無いことやバンドルサイズが小さいといった特徴があります。Zodの利用方法などについて紹介しながらTypescriptとの相性の良さについて見ていきます。
基本動作 TypescriptでZodを利用する際の一例を以下に示します。Zodのスキーマ定義は例として以下のように記述することができます。
import { z } from 'zod' const user = z.object({ name: z.string(), email: z.string().email(), }) Zodではスキーマ定義からバリデーションのインターフェースをTypeScript型で生成することができます。スキーマ定義がより複雑化した際にこれらの型定義に悩まされなくて良いという点で非常に便利な機能でTypescriptとの相性の良さが表れています。
type UserInput = z.input<typeof user> type UserOutput = z.output<typeof user> バリデーションはuser.parseによって実行され上記の型情報にある通り入力はUserOutput型にパースされて帰ってきます。また、バリデーション失敗時にはエラーの詳細を含んだZodErrorオブジェクトがthrowされます。
try { const parsed = user.parse({ name: "name", email: "email", }) } catch (e) { if (instanceof ZodError) { console.log(e) // ZodError: [ // { // "validation": "email", // "code": "invalid_string", // "message": "Invalid email", // "path": [ // "email" // ] // } // ] } } 利用例 基本的な使い方は以上です。次はより複雑なスキーマを定義してみます。以下のようなユーザー情報がフォームに入力され、これを元に入力を検証しながら出力を適当な型に変換するような場合を想定します。
Continue reading ↦ Published 2022/12/17 Arganoの渡部（@nabeix）です。
Cloud Funcitons (2nd gen) で利用できるフォントを調べました。
Node.js 16のランタイムで調査しましたが、他のランタイムでも同じだと思われます。
/usr/share/fonts/truetype/tlwg/TlwgTypo-Bold.ttf: Tlwg Typo:style=Bold /usr/share/fonts/truetype/tlwg/TlwgTypewriter-BoldOblique.ttf: Tlwg Typewriter:style=Bold Oblique /usr/share/fonts/truetype/tlwg/Garuda.ttf: Garuda:style=Regular /usr/share/fonts/truetype/freefont/FreeSansBold.ttf: FreeSans:style=Bold,получерен,negreta,tučné,fed,Fett,Έντονα,Negrita,Lihavoitu,Gras,Félkövér,Grassetto,Vet,Halvfet,Pogrubiony,Negrito,gros,Полужирный,Fet,Kalın,huruf tebal,жирний,Krepko,treknraksts,pusjuodis,đậm,Lodia,धृष्ट /usr/share/fonts/truetype/freefont/FreeSans.ttf: FreeSans:style=Regular,нормален,Normal,obyčejné,Mittel,µεσαία,Normaali,Normál,Medio,Gemiddeld,Odmiana Zwykła,Обычный,Normálne,menengah,прямій,Navadno,vidējs,normalusis,vừa,Arrunta,सामान्य /usr/share/fonts/truetype/liberation/LiberationSansNarrow-Italic.ttf: Liberation Sans Narrow:style=Italic /usr/share/fonts/type1/gsfonts/n021024l.pfb: Nimbus Roman No9 L:style=Medium Italic /usr/share/fonts/truetype/kacst/KacstFarsi.ttf: KacstFarsi:style=Medium /usr/share/fonts/truetype/freefont/FreeSerifBoldItalic.ttf: FreeSerif:style=Bold Italic,получерен курсивен,negreta cursiva,tučné kurzíva,fed kursiv,Fett-Kursiv,Negrita Cursiva,Lihavoitu Kursivoi,Gras Italique,Félkövér dőlt,Grassetto Corsivo,Vet Cursief,Halvfet Kursiv,Pogrubiona kursywa,Negrito Itálico,gros cursiv,Обычный Курсив,Tučná kurzíva,Fet Kursiv,ตัวเอียงหนา,Kalın İtalik,huruf tebal kursif,жирний курсив,Polkrepko Pežeče,treknais kursīvs,pusjuodis kursyvas,nghiêng đậm,Lodi etzana,धृष्ट-तिरछा /usr/share/fonts/opentype/ipafont-mincho/ipam.ttf: IPAMincho,IPA明朝:style=Regular /usr/share/fonts/truetype/kacst/mry_KacstQurn.ttf: mry_KacstQurn:style=Regular /usr/share/fonts/truetype/tlwg/TlwgTypist.ttf: Tlwg Typist:style=Regular /usr/share/fonts/truetype/kacst-one/KacstOne-Bold.
Continue reading ↦ Published 2022/12/15 はじめまして、Arganoの渡部（@nabeix）です。
Arganoの技術ブログ第一弾としてGCPのCloud Run Jobsの機能と、実運用する際のちょっとしたポイントを解説したいと思います。
※ 記事執筆時点でpre-GAEとして公開している機能を含みます
Cloud Run Jobs とは Cloud Run JobsとはGCPのコンテナ実行サービスであるCloud Runのジョブ実行環境です。
Cloud RunはWebサーバの実行環境のみでしたが、このCloud Run Jobsの登場によりバックグラウンドでのタスク処理を行う仕組みを気軽に構築できるようになりました。
定期実行を行う場合はCloud Schedulerを用いてスケジューリングします。
ジョブの実行時間は最大1時間となっており、この点を考慮したロジック実装が必要となります、
1時間以上掛かるジョブの実行が必要な場合は以下の方法を検討してみても良いと思います。
1時間以上の処理を実行する方法 1回のジョブ実行時間を1時間以内に収めつつ、自身のジョブを再帰的に呼び出すことで結果として1時間以上のタスク処理を実現しました。
ジョブを呼び出しはWeb APIによって行います。
エンドポイントは以下の形式のものが割り当てられており、POSTメソッドを用いてコールします。
https://{region}-run.googleapis.com/apis/run.googleapis.com/v1/namespaces/{project-name}/jobs/{job-name}:run 参照: ジョブを実行する
このときあ、アクセストークンが必要ですが、このトークンはメタデータサーバから取得します。
メタデータサーバとは、GCEやCloud Run内部から利用できるGCPプロジェクトの各種認証情報を取得できるサーバです。
以下のようにリクエストを送ることで、アクセストークンを取得できます。
function getToken() { $tokenUrl = 'http://metadata.google.internal/computeMetadata/v1/instance/service-accounts/default/token'; $ch = curl_init(); curl_setopt_array($ch, array( CURLOPT_URL => $tokenUrl, CURLOPT_HTTPHEADER => ['Content-Type: application/json', 'Metadata-Flavor: Google'], CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, )); $res = curl_exec($ch); curl_close($ch); $decoded = json_decode($res); return $decoded->access_token; } 取得したトークンを利用してジョブのエンドポイントにPOSTリクエストを送ることで、ジョブを再実行することができます。
Continue reading ↦