JavaScript

React Native Expo CLI で始めるクロスプラットフォーム開発 はじめの一歩編

completed

こんにちは。

エクスペリエンスデザインセンター、略して EXDC の sgi-chang です。

今日は、React Native の Expo CLI で、Web も Android も iOS も、

複数のプラットフォームのアプリも同時に作れちゃう、

夢のようなクロスプラットフォーム開発のはじめの一歩に挑戦したいと思います。

以下の流れで進めていきたいと思います。

  • クロスプラットフォーム開発とは
  • React Native とは
  • Expo CLI とは
  • クロスプラットフォーム開発を体験してみよう

なお、今回の「はじめの一歩編」では、開発環境の構築と、

ひとつのコーディングで We bとモバイル (Android) とでアプリを動かしてみるところまでをやってみます。

(実際の各プラットフォームのビルド展開はまたの機会に…)

続きを読む

ようこそ!2020年、Webフロントエンドの世界へ

こんにちは、UXデザインセンターのsgi-changです。

ついに2020年。

数字だけ見るとものすごく未来を感じてしまうのは私だけでしょうか。

今回は、とても魅力的なWebのフロントエンドの世界(以下、Webは略)をご紹介したいと思います。

当記事の対象は、

社内でフロントエンドエンジニアが不足している。

いきなりフロントエンドやれと言われた。

サーバーサイドしか知らない。

SPAって何?

モダンWebって何?

どうしていいか分からない。

といった今までフロントエンドとはあまり縁がなかったけど、

急に関わることになった方を対象にしています。

開発を進める上で参考になれば嬉しいです。

続きを読む

WebGL、Three.jsでワクワクしてみた2019、ひとりハッカソン編

(この記事は「CRESCO Advent Calender 2019」12日めの記事です)

こんにちは、UXデザインセンターのsgi-changです。

今年もAdvent Calendarに参加させて頂くことになりました。

ちょうど一年前「WebGL、three.jsでワクワクしてみた」を書いたのですが、

何を書こうかと色々迷った挙句…私の中で最近ますますホットな3DCGの記事が書きたくて、

もうすぐクリスマス、そしてもうすぐ1年も終わるし、

せっかくAdvent Calendarだし、

今年もやっぱりThree.jsでワクワクしてみたいなと思い、

Three.jsでひとりハッカソン(※)に挑戦してみることにしました。
(しつこくてすみません。)

続きを読む

【PWA】プログレッシブウェブアプリケーションを作成してみる

この記事は 『CRESCO Advent Calendar 2019』  10日目の記事です。

はじめに

はじめまして。SEC(システムズエンジニアリングセンター) の odashima です。

今回、所属の勉強会メンバーからのご紹介があり Advent Calendar の執筆をさせていただくことになりました。

普段から個人で開発はするものの、記事にするほどのネタもなくテーマに悩みましたが

今回は PWA についてまとめてみようと思います!

PWAってなに?

PWAとは、Progressive Web Application の略で、2015年ころに Google が提唱した新しいウェブアプリケーションの形です。

プログレッシブウェブアプリは、デスクトップとモバイルの両方でインストール可能なアプリと同等の体験を提供し、ウェブ上で直接構築・配信される高速で信頼性の高いウェブアプリです。

はじめてのプログレッシブウェブアプリ(developers.google.com)

続きを読む

Tableauのテスト自動化をSeleniumだけでやりたかった(が、Tableau JavaScript APIも必要でした)

この記事は 『CRESCO Advent Calendar 2019』7日目の記事です。

みなさんこんにちは。データアナリティクスチームの飯村北海です。

今年度も変わらず[PR]データ分析をやっていて、データ分析に関するセミナーを組織として2つ、「データ分析仕事はじめ」と「データ分析基礎 Tableauハンズオン」を開催することができました。

この準備などに追われてしまい、今年に入ってエンジニアブログを全く書いていない…ということに気づきました。ということで頑張って12月のアドベントカレンダーで何本か書きたいと思います!

書きましたので2本目です。さて、今日はTableauのテスト自動化について書きたいと思います。

続きを読む

Web Push通知の受信を、Firebase Cloud Messaging(FCM)+Service Worker +Notificationで受信側でコントロールしてみた

こんにちは、UXデザインセンターのsgi-changです。

今日はドライブレコーダーの続き…ではなく、Web Push通知について記事を書いてみました。

Web Push通知と聞いて、皆さんはどんな仕組みを思い浮かべますか?

Web Push通知と言えば、モバイルのネイティブアプリで受け取れるPush通知を、Webブラウザでも同様に受け取れる、

そんなモバイルライクなUXを提供するProgressive Web Apps(PWA、以下同)の機能の一つとされています。

今回は、Firebase Cloud Messaging(FCM、以下同)経由で、PWAとも関わりの深い、Push通知を受信するために必要な技術、

Service Workerや、Notification APIを使って、

Web Pushの受信時に、FirebaseのSDK(以下、SDK)任せにしないで、受信側で通知をコントロールすることにあえて挑戦してみました。(需要はあるのだろうか…)

続きを読む

Vue×Firebase×Web Speech APIでお手軽にText to Speech、Speech to Textなアプリを作ってみる

こんにちは、もうすっかり令和ですね。UXデザインセンターのsgi-changです。

今日はVue.jsFirebaseWeb Speech APIを使って、

文字(text)を入力して、音声にする。(speech)

音声(speech)を文字(text)として閲覧できる。

こんな感じのSpeech To Text←→Text To Speechなアプリを作ってみようと思います。
お手軽さ、

所要時間:2時間~半日ぐらい

でできます。

コンセプトは、

  • 文字を入力しないでも、できなくても音声・発話でコミュニケーションが取れる。(clientアプリ)
  • マイクやスピーカーがなくても、音声を聞くことができなくても、文字と文字入力だけでコミュニケーションが取れる。(hostアプリ)

というアクセシビリティに配慮したアプリです。

続きを読む

WebGL、three.jsでワクワクしてみた

この記事は 『CRESCO Advent Calendar 2018』 19日目の記事です。

こんにちは、UXデザインセンターのsgi-changです。

2018年もあと少し、気持ちも慌ただしくなってきた師走にちょっとワクワクしてみたいなと思い、

気軽にブラウザで3Dコンピュータグラフィックス(以下3DCG)を実装できる、WebGL、three.jsの記事を書いてみました。

とりあえず、今日はテキストエディタだけあればコピーandペーストで実装できる超簡単3DCGを実装してみます。

WebGL、three.jsとは?

実装の前にざっくりとWebGL、three.jsについて説明します。

続きを読む

React Hooks API をふんだんに使ってみた

この記事は 『CRESCO Advent Calendar 2018』 10 日目の記事です。

こんにちは。スマート・テクノロジー・オフィスの benishouga です。

今回は 10 月下旬ぐらいから React 界隈で少し話題になっている React Hooks API を実験的に自分の作っているアプリに適用してみたのでその紹介をしたいと思います。

React Hooks API とは

React Hooks API とは Facebook が公開している React という UI コンポーネントを作るためのライブラリ に追加予定の新しい API 群で、従来の API 群では状態を保持するコンポーネントを作成するには class を使って実装していたところを単純な function で扱えるようにするものです。

続きを読む

GAS(Google Apps Script)業務利用の事例

こんにちは。ひでデス。

早速ですが、社内業務でのGAS利用事例をご紹介します。
なんと、業務が稼働している本物のコードを、赤裸々に公開しちゃいます!

  • GASとは、Google Apps Scriptの略称で「ガス」といいます。G Suiteのスプレッドシートやフォームを自動化させることが可能なスクリプトです。
  • G Suiteとは、Googleが提供する有料の法人向けクラウドグループウェアです。Gmail、googleグループ、googleドライブ、googleサイト、googleスプレッドシート、googleフォームなどが含まれます(※これ以降では、接頭辞としてのGoogleは省略します)。
  • GASはG Suiteの基本機能に含まれていますので、使わないと損です!

なお、GASの導入、権限やトリガーの設定、ログ確認などの詳細については、親切なサイトがたくさんありますので、そうしたサイトをご覧ください。

これから紹介する事例は、「プロジェクト専用フォルダの申請」を受付けるという、実際の業務です。
それでは、順を追って説明します。

続きを読む