第2回Canvaトレース道場開催しました!

こんにちは、デザイナーの山﨑です。

7/7にエキサイト全体で二回目のCanvaトレース道場を開催しました!

前回の記事はこちら↓

tech.excite.co.jp

第二回目の参加者は6名でした!第一回目から参加してくれた方もいたので、今回はその方のリクエストで副業系のバナーを制作しました!

無事に終えることができたのですが第二回目は色々反省点があったので、簡単に3つにまとめたいと思います…😢

今回の反省点

時間甘く見過ぎて途中退出が!

30分ほど時間を取っていましたが、15分ほどオーバーしてしまい参加者が次のMTGで抜けてしまう事態が発生しました…!

解決策

バッファを取って1時間くらいに設定する。

お題のバナーがシンプル

お題に設定したバナーが文字+図形のみの構成だったので、初心者にはやりやすいのですがCanvaの多岐にわたる機能を紹介するには少し簡単すぎたかもしれない…!と思いました。

工程を教える際に「素材」から探す>大きさを変える>色を変えるの繰り返しになるので、参加者には少し単調な作業になっていたかもしれません。

解決策

適度に簡単+Canvaの機能を多く紹介できるバナーをお題にする。

参加者のテンポがズレる問題

前回のトレース道場からすでに生じていた問題なのですが、前からCanvaを使っている参加者と、初めてCanvaを触る参加者だとスキルの差によって作業のテンポがずれてしまうという問題がありました。

解決策

・Tandemという作業通話ツールの「Cross Talk」という「同じグループで通話しながら任意の人を選んでその人と内緒話ができる」機能を使い、「すでに作業が終わっている参加者にのみCross Talk機能で次の工程を教える」ことで解決する。

・クラスを上級者クラス・初級者クラスに分ける。

終わりに

今回の反省は次回のCanvaトレース道場に生かしていこうと思います!

最後に、エキサイトではクリエイティブ就業型インターン「Booost!!!」の募集を行なっております。興味がある学生はぜひ連絡ください!

recruit.jobcan.jp

Flutterにおけるin_app_purchaseを使用した課金実装においてiOSが購入アイテムが0件の場合にハンドリングできない問題について

エキサイト株式会社の奥田です。 今回は下記に掲載しているライブラリin_app_purchaseを使用した際に購入アイテムが0件の場合にハンドリングができなかった問題の解消方法について記載していきます。

pub.dev

問題点

in_app_purchaseを使用している際に購入アイテムが0件の場合にiOSに限りコールバックが返って来ずハンドリングができない問題が発生していました。

解決方法

in_app_purchaseのライブラリのバージョンを上げることで対応ができました。 下記のチェンジログを見ていただくとわかるのですがin_app_purchase 3.0.0からiOS側で購入アイテムがない場合に空のリストが返却されるようになりました。 下記の実装のように購入アイテムリストが空の場合にハンドリングができるようになりました。

if (details.isEmpty) {
  // 実装内容
  print('アイテムが存在していません'); 
}

pub.dev

Flutterはまだ日が浅いこともあり純正のライブラリでも頻繁にアップデートが行われています。定期的に確認するなどして変更点を確認する必要があります。

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。今回の記事を読んで少しでも興味が湧きましたら是非応募お願い致します!!

就業型インターンの募集情報です! www.wantedly.com

募集職種一覧はこちらになります!カジュアル面談からでも構いません。 www.wantedly.com

SpringBootでコンテナイメージの作成をする

エキサイト株式会社メディア事業部エンジニアの佐々木です。メディア事業部ではSpringBootで開発しています。SpringBootには標準でDockerFileなしでコンテナイメージを生成してくれる機能があるので、ご紹介します。

はじめに

環境は下記になります。

SpringBoot version: 2.6.3
Java version: 17
Gradle Version: 7.3.3

コンテナイメージ作成

コンテナイメージ作成はすごく簡単で、下記コマンドのみで作ることができます。

$ ./gradlew bootBuildImage \
    --imageName=example.com/excite-sample-app/front:v1


$ docker images | grep sample
REPOSITORY                            TAG        IMAGE ID       CREATED        SIZE
example.com/excite-sample-app/front   v1         7f2bccdd727d   42 years ago   280MB

とても簡単です。ちょっとイメージサイズを減らしたいのでビルドする元のイメージの変更をします。

$ ./gradlew bootBuildImage \
    --builder=paketobuildpacks/builder:tiny
    --imageName=example.com/excite-sample-app/front:v1

REPOSITORY                            TAG        IMAGE ID       CREATED        SIZE
example.com/excite-transfer/web       v1         e19f7b55bf63   42 years ago   207MB

--builderでコンテナイメージを生成するためのコンテナイメージを指定できます。shellすら動かないdistroless likeなイメージができあがるようです。

補足

デフォルトは、paketobuildpacks/builder:baseになります。これだと、少々コンテナのイメージサイズが大きくなります。

まとめ

DockerFileを作成せずにコマンド1行でコンテナイメージを作成できました。build.gradleに設定情報を書いておけば、オプション等は不要でGradleのタスクのみでコンテナイメージを作成できます。どこかでまとめたいと思います。

最後

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。

カジュアル面談はこちらになります! meety.net

募集職種一覧はこちらになります!(カジュアルからもOK) www.wantedly.com

IntelliJで例外ブレークポイントを発生させる

こんばんは、エキサイト株式会社の中尾です。

eclipseで例外ブレークポイントが便利だったので、inteljでできないかと探したら意外にすぐに出てきました。

普通にブレークポイントを仕込み、ブレークポイントで右クリックすると以下のメニューが出てきます。

「throw exception」を選択します。

そして、コンソールを進めると以下のようにエクセプションが発生します。

2022-05-20 16:35:46.765 ERROR 39502 --- [nio-8083-exec-8] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] threw exception
java.lang.Exception: 確認用Exception

トランザクション中にSQLExceptionを発生させて、ロールバックが正常に行われるかなど確認がこれで用意ですね! 外部APIの取得に失敗した場合の処理もこれで確認できますね!

さすがIntelliJです

エキサイトメディア事業部で採用しているRiverpodの使用法

はじめに

現状まだまだネイティブからFlutterへの移行の途中であり、最初期の構成としてはViewModelを定義してViewModelをStateNotifierProviderで状態管理している変数をView側に通知するようにしていたり、View側のタップ処理を受け付けるようにしていました。今回紹介するものは構成を再考したものです。ここで挙げたものは今後また変わるかもしれませんが一つの使い方として楽しんでいただけると幸いです。

それぞれのProviderの使い方

Provider

タップ処理などのEvent系を受け取って処理を走らせるために使用しています。 また、Repositoryもこちらを使用してどこからでも使用できるようにしています。

final hogeEventProvider = Provider<HogeEvent>((ref) => HogeEvent(ref));
class HogeEvent {
  const HogeEvent(this._ref);
  final Ref _ref;

  void onTap() {}
}
final countRepositoryProvider = Provider<CountRepository>((_) => CountRepository());

class CountRepository {
  Future<int> getCount() async {
    // APIから取得処理など
  }
}

StateProvider

そのファイル内に値を保持しておいたり、Screen側に値を渡したいときに使用しています。

final countProvider = StateProvider<int>((_) => 0);
// 更新するとき
ref.read(countProvider.notifier).state++;
// 初期化したいとき
ref.refresh(countProvider);

FutureProvider

AsyncValueを使用してそれぞれの画面状態(dataがあるとき, loading, error)を出し分けるために基本的には使用しています。

final countFutureProvider = FutureProvider<int>((ref) async {
  return await ref.read(countRepositoryProvider).getCount();
});
@override
Widget build(BuildContext context, WidgetRef ref) {
  return Scaffold(
    body: ref.watch(hogeProvider).when(
      data: (count) {
        return Center(
          child: Text(count.toString()),
        );
      },
      loading: () => Center(
        child: CircularProgressIndicator(),
      ),
      error: (error, stackTrace) => Center(
        child: ErrorWidget(error, stackTrace),
      ),
    ),
  ),
},

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。今回の記事を読んで少しでも興味が湧きましたら是非応募お願い致します!!

就業型インターンの募集情報です! www.wantedly.com

募集職種一覧はこちらになります!カジュアル面談からでも構いません。 www.wantedly.com

Dart2.17でアップデートされたEnumについて

2.17以前のEnum

enum Fruit {
  apple,
  orange,
  grape,
}

このようにメンバーを定義するだけで、Javaのように中に定数を入れるようにするためにはExtensionを定義してあげないといけませんでした

extension FruitExt on Fruit {
  String get name {
    switch (this) {
      case Fruit.apple:
        return 'りんご';
      case Fruit.orange:
        return 'みかん';
      case Fruit.grape:
        return 'ぶどう';
    }
  }
}

2.17以降のEnum

enum Fruit {
  apple('りんご'),
  orange('みかん'),
  grape('ぶどう');

  const Fruit(this.name);
  final String name;
}

以上のようにすっきりと書くことができJavaとほぼ同じようになり、独自コンストラクタを定義できるようになりました。

注意

pubspec.yaml にあるsdkの下限を2.17以上にしないとエラーになってしまいます

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。今回の記事を読んで少しでも興味が湧きましたら是非応募お願い致します!!

就業型インターンの募集情報です! www.wantedly.com

募集職種一覧はこちらになります!カジュアル面談からでも構いません。 www.wantedly.com

【デザイナー志望学生向けオンライン合説】ReDesigner Online Meetupに登壇してきた!

こんにちは、デザイナーの山崎です。 今回は、デザイナー特化のキャリア支援サービス・ReDesignerさんが主催したオンライン合説「ReDesigner Online Meetup」に、人事の横井さん、エキサイトデザイナー代表としてSaaS事業部デザイナー・鍜治本さんと参加してきました!

redesignerforstudent.connpass.com

当日は参加者100人近くの学生の前でなんと!トップバッターで説明してきました( ; ; )

事業部紹介

メディア事業部・SaaS事業部がいつもどんなことをやっているのか、デザイナーとして配属されて一番最初の仕事などを紹介しました!

社内イベント紹介

配属された事業部の仕事だけではなく、社内イベントや採用関連のクリエイティブを制作することも!

エキサイトのデザイナーは幅広いクリエイティブに携わります!

質問コーナー

質問コーナーを設けたところ思った以上に学生の方が質問してくださったのですが、全てに答えられなかったのでこちらにまとめたいと思います!

【質問】インターンの稼働時間は週3日80時間とあったのですが、自由シフトですか?

【回答】自由シフトです!稼働時間の80時間は7.5時間フルタイム×10〜11日間って感じですね!他の企業と比べて割と多めなので、その分充実したインターンを経験できると思います!

 

【質問】デザイナーの人数はどれくらいいらっしゃるのでしょうか?

【回答】産休に入ったデザイナーもいるので人数に多少増減あるのですが、エキサイト全体で業務委託も含めると12人くらいになります!

 

【質問】 夏休み以外での期間で就業型インターンの機会は他にございますでしょうか?

【回答】夏休みだけでなく通年で就業型インターンできるよう計画中です!しばらくお待ちください!

 

【質問】インターンのデザイナー面接で持参するポートフォリオにはどのような物が求められるのでしょうか?

【回答】作品を作るに至った過程がわかるポートフォリオ(コンセプト・ペルソナ・課題など)があるとありがたいです!

 

【質問】 デザイナーさんの男女比率を教えてください。

【回答】現在デザイナーの男女比は女性率100%になっております。男女比についてはたまたま女性比率が高くなってるのですが、性別関わらず大募集しております!

 

【質問】 インターン参加において、Canvaはある程度触れた方がよろしいのでしょうか?

【回答】Canvaは無料でDLできるので、少しでも触っていただけると業務にスムーズに入れると思います!ちなみにAdobe触ったことある方なら簡単に覚えられると思います。

 

【質問】 デザイン系のソフトウェア初心者なのですが制作に支障はないでしょうか?

【回答】Illustrator・Photodhop・Figmaなどの基本機能を使えた方がスムーズかもしれません!

 

【質問】 Canvaというソフトを使うとのことですが、その場合自分のPCにCanvaのソフトをインストールする必要があるとのことでしょうか(PCの容量がギリギリ…)

【回答】就業型インターン中はPCが支給されるので、会社のPCでCanvaをDLしていただけるといいと思います!

 

【質問】 ポートフォリオには何作品程度あるのが望ましいでしょうか?

【回答】選考希望者の方がどのようにデザインに触れてきたかが知りたいので、2〜3作品はあるといいなと思います。グラフィックなどもあると嬉しいです!

 

【質問】 選考などを行う上で、どのような学生を求めているのか知りたいです。

【回答】壁にぶつかっても自分で考えて解決案を提示できる力を持つ、自走力のある学生はエキサイトの就業型インターンだけでなく社会で活躍できるかなと思います!

 

【質問】 もし可能であれば、学生のうちに身につけておくべき技術ややっておいた方がいいことなどがありましたら教えていただきたいです。

【回答】学生のうちに身につけておくべき事は、情報感度を高めて興味を持ったことに挑戦してみることでしょうか…。

学生のうちからしっかり情報を集めて好奇心旺盛なチャレンジ精神を培っていると、社会人生活でも力を発揮できると思います!

技術面ですとUI特化なんですが、もしポートフォリオのUIモックアップ力を高めたいのであればAppleが出しているSFフォントSF SymbolsFigmaで有志の方が出しているiOSキットなどを活用してモックアップを作るのがオススメです!(無料)

これを使うだけでグッとモックアップのクオリティが上がると思います!

ポートフォリオ・履歴書紹介

質問コーナーの後は鍜治本さんと私が内定した時のポートフォリオや履歴書を紹介しました!

鍜治本さんのポートフォリオ

山崎の特に意味のない表紙

山崎の履歴書

ポートフォリオや履歴書は今後カジュアル面談や採用イベント限定で見せていく予定なので、気になる方はぜひイベントに参加してみてください!

終わりに

今回のイベントのように100人規模のイベントに登壇するのは初めてなので、とても緊張しましたがすごく楽しかったです!

そしてイベント後にTwitterでRedesignerさんや多くの学生の方と繋がれて、交流を広げることができて良かったです^_^

最後に、エキサイトではクリエイティブ就業型インターン「Booost!!!」の募集を行なっております。興味がある学生はぜひ連絡ください!

recruit.jobcan.jp

AWSのOpenSearchでソフトウェアアップデートをしたら、JVMメモリプレッシャーが荒ぶった件について

こんにちは。 エキサイト株式会社の三浦です。

AWS OpenSearch Serviceではたまにソフトウェアアップデートが来ることがありますが、「バージョン自体をアップデートするわけではないからそこまで大きな変化はない」と考えていると、驚くような事態が起きることがあります。

今回は、ソフトウェアアップデートを行った結果、JVMメモリプレッシャーが突如荒ぶりだした件について説明します。

AWS OpenSearch Serviceとは

AWS OpenSearch Serviceは、AWSが提供するマネージドなOpenSearchのサービスであり、ログや文章など様々なデータを保存・分析したり、検索したりすることができます。

aws.amazon.com

Amazon OpenSearch Service を使用すると、インタラクティブなログ分析、リアルタイムのアプリケーションモニタリング、ウェブサイト検索などを簡単に実行できます。

例えば様々な文章データを入れたOpenSearchに対してキーワードを投げると、設定にもよりますが、単純にキーワードが完全一致したデータだけでなく、形態素解析等を行った上で一致度が高いデータを返してくれたりします。

非常に強力なアプリケーションな上、AWSがマネージングしてくれているために使用するエンジニア側ではやりたいことに注力ができるのですが、たまにその「マネージド」な部分に落とし穴があることもあります。

ソフトウェアアップデートを行ったらJVMメモリプレッシャーが荒ぶった

現在私のサービスでは、OpenSearchを「Elasticsearch 7.10」のバージョンで運用しています。

最近久々にOpenSearchに手を加える作業があり、ついでということでソフトウェアアップデートを行いました。

実際に行ったのはソフトウェアアップデートだけなのですが、その結果JVMメモリプレッシャーのメトリクスが以下のようになりました。

明らかにJVMメモリプレッシャーが今までと異なる動きをしています。

幸いOpenSearchの挙動自体は問題なかったので、一旦様子を見ながら色々と調べていたところ、以下のブログを教えていただきました。

aws.amazon.com

In the latest service software release of Amazon OpenSearch Service, we’ve changed the behavior of the JVMMemoryPressure metric.

この記事によると、どうやら最新パッチを当てるとJVMメモリプレッシャーのメトリクスの計測方法が変わるため、内容が変わることがあるようです。

より正確に異常を検知するための仕様変更とのことで、どうやら挙動そのものには影響はなさそうです。

最後に

何の気無しにソフトウェアアップデートを行うと、今回のように想定外のことが起きることがあります。

今回のように見た目上で大きな変化がある場合もあるので、こういった場合でも焦らずに色々と調べて見るようにするのが良さそうです。

「外部勉強会 リビルドへの道」に登壇しました!!〜アプリ編〜

エキサイト株式会社でモバイルアプリ開発に携わっている奥田です。 社外に向けてアプリで実施しているリビルドへの対応について発表しました。

概要

詳細は下記のconnpassに記載されています!

excite.connpass.com

発表内容

リビルドのために必要なものとして4点について重点的にお話しました。

  1. 技術選定

  2. コミュニケーション

  3. 技術交流

  4. 気合い

詳しくは下記の資料に掲載しています!

www.slideshare.net

発表の様子

発表中はみなさんコメントをしていただき大変楽しく発表できました! 質疑応答もたくさんいただき社外の方と交流できてよかったです。

懇親会

発表後の懇親会で技術的な交流ができました。デザインや更に詳しい実装についての交流ができ、とても楽しい時間でした。今後も登壇終了後に懇親会を開催しますので興味のある方はぜひ参加していただきたいです!

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。今回の記事を読んで少しでも興味が湧きましたら是非応募お願い致します!!

就業型インターンの募集情報です! www.wantedly.com

募集職種一覧はこちらになります!カジュアル面談からでも構いません。 www.wantedly.com

「外部勉強会 リビルドへの道」で「実際にリビルドを完遂してみて」を発表しました!

こんにちは。 エキサイト株式会社の三浦です。

2022年6月27日、エキサイト主催で行った「外部勉強会 リビルドへの道」にて発表させていただきました!

今回は、簡単に振り返りたいと思います。

「外部勉強会 リビルドへの道」とは

「外部勉強会 リビルドへの道」は、リビルドに関連する勉強会です。

excite.connpass.com

今回の勉強会では、リビルドに挑戦していること、リビルドを完遂させたことについてお話します!

今回は計3名が発表しました。

自身の発表内容

今回私は、実際にリビルドを完遂した経験について発表させていただきました。

speakerdeck.com

  • リビルドの目的
  • リビルド内容
  • リビルドによる効果予測
  • 実際にリビルドを行ったことによる効果
  • 大変だったこと
  • リビルドの効果をより長持ちさせていくには

というアジェンダで発表しています。 良ければ見ていただけると幸いです。

最後に

会社でこういった発表の機会があると、改めて自分がやってきたことを振り返ることができてちょうど良いです。

また機会があれば参加しようと思います。

AWS移行におけるcloud-initを使ったLinuxの初期設定

エキサイト株式会社の武藤です。

オンプレにあるサーバをAWSへ移行する際に、AWS Application Migration Service (AWS MGN)を使いました。 その際に、オンプレ特有のサーバの設定もそのまま引き継がれるため、修正すべき箇所がいくつか出てきます。

EC2には起動時に実行したい処理をシェルスクリプト、cloud-initから設定できるユーザデータという機能があります。 今回はcloud-initを使った設定変更を行ったので紹介します。

docs.aws.amazon.com

cloud-init とは

Linux OSの初期設定を行うためのツールです。公開鍵の設定、ユーザ作成等をyamlで記述できます。 元々はEC2用に開発されたツールのようです。Ubuntu 18からはプリインストールされています。

cloud-init.io

cloudinit.readthedocs.io

利用例

利用例について紹介します。

前提として、担当したシステムのインフラ構成の管理にTerraformを採用しております。 移行したサーバを管理するため、MGNで移行したインスタンスをAMIにした上で、 Terraformでは、そのAMIを基にしたEC2の構築と、設定したいユーザデータをコードに残しています。

ネットワーク周りの設定

ホスト名やDNS周りの設定です。

#cloud-config
hostname: sample-host
fqdn: sample-host.net
manage_etc_hosts: true
manage_resolv_conf: true
resolv_conf:
  nameservers:
    - x.x.x.x
  searchdomains:
    - ap-northeast-1.compute.internal
  domain: ap-northeast-1.compute.internal

オンプレからホスト名の命名を変更したため、設定し直しました。 また、resolv.confに社内DNSが設定されていたため、AWS用に変更しました。

apache confの設定

apacheのVirtualHost等の設定です。

#cloud-config
write_files:
- path: /etc/apache2/sites-available/sample.com
  content: |
    <VirtualHost *:80>
      ServerName    sample.com
      DocumentRoot  /var/www/html/index.html
    </VirtualHost>
  owner: 'root:root'
  permissions: '644'

write_filesモジュールでは任意のテキストをファイルに書き出せます。 複雑なVitrualHostはこちらで設定しました。 パーミッション等も設定できます。

細かい設定はシェルスクリプト

runcmd モジュールでシェルスクリプトも実行できます。

#cloud-config
runcmd:
- a2ensite sample.com
- service apache2 restart

runcmdでだいたいは事足りてしまいますが、yamlで書かれた設定は構造化されているので見やすさもあります。

これ以外にもにモジュールが多く用意されています。

cloudinit.readthedocs.io

cloud-initのキャッシュ削除

Ubuntu18のサーバを移行するときにハマった問題があるので紹介します。

先述したようにUbuntu18からcloud-initがプリインストールされており、通常のセットアップ用途にも使われます。ただ、 一度cloud-initを実行したサーバの場合、新たに用意したユーザデータが渡らず、うまく動作しないようです。

今回は、オンプレ環境時代の構築時にcloud-initが実行されており、それをMGNで移行したEC2のAMIに対して新たにユーザデータを設定し、起動するというケースだったため、想定通りに作動しませんでした。

原因としては、一度cloud-initを実行したサーバでは、以前の設定がキャッシュとして残り続けてしまい、新しいユーザデータを参照できていないことでした。

cloud-initでは、ユーザデータを読み込むソース(datasource)の設定があり、様々なクラウドサービスに対応しています。

cloudinit.readthedocs.io

/var/log/cloud-init.log にdatasource決定までのログが出力されます。 今回はログからNoCloud が指定されていることがわかり、オンプレ環境時代の キャッシュが使われている事がわかりました。

そこで、キャッシュを削除するために、cloud-initのcleanコマンドで設定をクリーンアップしました。

cloud-init clean

クリーンアップした状態をAMIにし、EC2を起動したところ、意図した設定が実行されました。 再びログを確認すると、datasourceが Ec2 になっていました。

この問題に直面したときに気づきましたが、CLIインターフェースがあります。

ドキュメントはこちらです。 cloudinit.readthedocs.io

まとめ

cloud-initを使ったLinuxの初期設定について紹介しました。 軽微かつ初回起動時に設定したい内容であれば、十分な機能だと思います。

今回はAWS移行に際したオンプレ特有の設定の整理を目的にcloud-initを使いましたが、継続的な構成管理をするのであれば、ansibleやchef、AWSマネージドのOpsWorksなどが適していそうです。 用途や要件にあった方法を採用してもらえればと思います。

参考資料

dev.classmethod.jp

qiita.com

qiita.com

Mac版!TAURIを使って、デスクトップアプリを作ってみる

いつものtaanatsuです。
今日は、Electronの代替(に、なるであろう)Rust製の
クロスプラットフォームデスクトップアプリケーション作成フレームワーク 「TAURI」で遊んでみましょう。

Electronに変わる、つまり、HTML/CSS/JavaScriptでUIを組めるということです!
さらにさらに、TAURIはChromiumを使わずOSが備えているWebViewの機能を用いるため、吐き出されるファイルも軽量になるようです!
胸熱ですね!!

そして今回、Windows版の記事はあったので、それを見ながらMacでやっていきます。
それではやっていきましょうか。

事前準備

Rust製ということで、RustをPCに入れておかないといけません。
Windows版の記事には「Scoopで入れるとコンパイル時にエラーになる」とのことでしたが、
MacだとBrewで入れていても動くっぽい(動作した)ので、それでやっていきます。

$ brew install rust

TAURIのプロジェクトを作成

フロントエンドあまり書かないマンのわたしは、最近の流行りを知らないので手癖でyarnを使っていきます。
もちろんnpmでも実行できますのでご安心ください。yarnをnpmに置き換えるだけのはずです。

まずは以下のコマンドを実行し、対話形式でtauriのプロジェクトを作成します。

$ yarn create tauri-app

## 好きなキーをおしてください
Press any key to continue...   

## 好きなアプリ名を入れてください。デフォルトは「tauri-app」になります
? What is your app name?

## タイトルバーに表示したい文字列を入力してください。デフォルトは「Tauri App」になります。
? What should the window title be?

## JSに何を使うかを聞かれます。好きなものを選んでください。今回はVanilla.jsを選択しております。
? What UI recipe would you like to add? Vanilla.js (html, css, and js without the bundlers)
❯ Vanilla.js (html, css, and js without the bundlers) 
  create-vite (vanilla, vue, react, svelte, preact, lit) (https://vitejs.dev/guide/#scaffolding-your-first-vite-project) 
  create-react-app (https://create-react-app.dev/) 
  Svelte (https://github.com/sveltejs/template) 
  Solid (https://github.com/solidjs/templates) 
  Vue CLI (https://cli.vuejs.org/) 
  Angular CLI (https://angular.io/cli) 
(Move up and down to reveal more choices)

暫く待つとプロジェクトが作成されます。
その際、以下のような指示があるので表示される3つのコマンドを実行してみましょう。

>> Running final command(s)

    Your installation completed.

    $ cd tauri-app
    $ yarn install
    $ yarn tauri dev

こんにちは世界!

UIを準備する

さて、サンプルは動作したので自分でUIを作っていきたいですね。

デフォルトの設定を破棄する

新しくプロジェクトを作ってもいいですが、面倒なので使いまわしていきます。
設定を書き換える必要があるので、自動で作成されているsrc-tauriディレクトリを削除します。

$ rm -rf src-tauri

それか後述するinit時に、--forceをつけると消さなくても良いかもしれません。(試してない)

UIディレクトリの作成

UIデータを保存するディレクトリを作成します。

$ mkdir ui

UI用のHTMLを作成

作成したuiディレクトリの中に、index.htmlファイルを以下の内容で作成します。
あ、ここですでにいろいろ試したい方は好きに書き換えてください。
ひとまずコピペで遊びたいって人向けに貼っておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
またあったね世界!
</body>
</html>

TAURIの設定ファイルを作成

以下コマンドを実行し、TAURI用の設定を作成します。
設定は対話形式で行われます。

$ yarn tauri init 

## 好きなアプリ名を入れてください。デフォルトは「tauri-app」になります
✔ What is your app name?

## 好きなアプリ名を入れてください。デフォルトは「tauri-app」になります
✔ What should the window title be?

## UIアセット(HTML/CSS/JS)がどこにあるかを指定します。
## ここで注意が必要なのは、`プロジェクトディレクトリ/src-tauri`が基準になります。
## 作ったuiディレクトリはsrc-tauriディレクトリの一個上の階層になるので「../ui」と入力します。
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created?  ../ui

## この子も今回はuiディレクトリが基準なので`../ui`と入力します。
✔ What is the url of your dev server?   ../ui

実行!

以下コマンドを実行します。

$ yarn tauri dev

またあったね世界!

終わりに

いかがだったでしょうか?
ひとまずベースを整えてみました。
次はホットリロードなんかを書いていこうかなーと思っています!

それでは、また、次回!

参考

よく使うサーバのファイル容量便利コマンド

どうも、taanatsuです。
今回はよく使うサーバのファイルをチェックするコマンドをまとめます。
サーバで「ん?」ってなったときにサクッと使えるコマンドたちです。

それではやっていきましょうか。

ディスク容量をわかりやすく表示

サーバ全体の容量を表示してくれます。 -hで人間様のわかりやすい単位で表示してくれます。

$ df -h

ファイルの容量を一覧で表示

サーバの圧迫の原因を探るときに使います。

$ du -sh フォルダパス

$ du -sh /var/*

$ du -sh /var/にすると/var/ディレクトリの容量だけが表示されます

ファイルの容量を大きい順に10件表示

ちょっと組み合わせです。

$ du -sh ファイルパス | sort -hr | head -10

du -sh /var/* | sort -hr | head -10

ファイル容量の大きい順に一覧表示

$ ls -lSh ファイルパス

$ ls -lSh /var/

lessなどと組み合わせると見やすくなります

10分以内に更新されたファイルを2秒ごとに監視し続ける

$ watch find /ファイルパス -mmin -10

$ watch find /var/ -mmin -10

その他、「10分以内にアクセスされた」だと-aminを使います。

$ watch find /var/ -amin -10

複数のIntelliJのプロジェクトをタブにまとめるちょっとしたTips

エキサイト株式会社エンジニアの佐々木です。立場上、複数のプロジェクトをIntelliJで立ち上げることが多く、Windowがバラバラになってしまい使いにくかったんで、技術ブログに書くほどではない小さなTipsですが、調べてもあんまりでてこなかったのでメモ程度で書いておきます。

結論

下記のように複数プロジェクトが上のタブにまとまります。(タブから分離できます。分離したあとは戻せません)

赤タブ: プロジェクト 青タブ: プロジェクト内のファイル

前提

  • Mac限定 ※ WindowsLinuxでのやり方はあるかもしれないですが、調査していないです

設定方法

これはIntelliJの設定ではなく、Mac側の設定を行います。

左上のリンゴマーク -> 一般 -> 書類を開くときはタブで開く常に にします。

この設定をしたあとにプロジェクトを立ち上げると、このような状態になります。

やってみて

IntelliJのプロジェクトがまとまって大変お世話になっております。エキサイト佐々木です。スッキリしました。複数プロジェクトがバラバラならないので非常に使いやすいです。

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。

カジュアル面談はこちらになります! meety.net

募集職種一覧はこちらになります!(カジュアルからもOK) www.wantedly.com

第1回 テクデザBeer Bashを開催しました

こんにちは、エキサイトでエンジニアをしている吉川です。 先日6/10(金)に弊社エンジニア・デザイナーの交流会として「テクデザBeer Bash」を開催したので、そのレポートを運営視点で書いていこうと思います。

Beer Bashとは

「Beer Bash(ビアバッシュ)」とは、ビールなどのお酒や軽食を片手に行う社内ミーティングのことを言います。beer(ビール)+ bash(にぎやかなパーティーどんちゃん騒ぎ)を合わせた造語で、真面目な部分を残しつつ、社員同士がカジュアルな雰囲気で交流を行うことが目的です。発祥はシリコンバレーのとあるIT企業で、社内エンジニアの士気を高めるために始まりました。

テクデザBeer Bash開催へ向けて

弊社では各事業部内での交流は活発に行われているのですが、事業部を超えた交流は比較的控えめになっていました。これを解消するべく、普段の業務で関わらない方々との接点づくりを目的としてイベントを開催する運びになりました。

イベント案は何個かあったのですが、その中でもカジュアルな雰囲気があること、オフライン交流ができること、継続的に開催しやすいことが決め手となり、Beer Bashを開催することに決まりました。

また6月初頭は2022年度新卒技術研修が終わる時期なので、第1回は新卒の方々と社員の接点を作ることを運営の目標にしました。

※ちなみにオンラインでの交流事例は以下の過去記事をどうぞ! tech.excite.co.jp tech.excite.co.jp

当日の様子

ここからは写真を使いながら当日の様子をお伝えしていきます!(感染防止対策を徹底し開催しました、また一部情報保護のためマスキングしています)

開催場所は弊社カフェスペース。軽食のメインはピザとたこ焼きで、あとはコンビニのおつまみを適量購入しました。またお酒はオフィス近所に酒屋があるので、そちらで購入しました(この辺は何かあってもアドリブでなんとかしやすいので、運営的には立地に感謝です笑)。

19時前に乾杯!! 今回はメインコンテンツとして、下記の3つを発表していただきました!

新卒エンジニアから自己紹介LT

最初は新卒エンジニア3名の自己紹介です!研修→正式配属から数日経ってどんなことを思ったのか、これからどんなエンジニアを目指すのか語ってもらいました。また研修を担当したメンターからも他己紹介として人となりを紹介しました。

デザイナーからCanvaでのバナートレースライブ

続いてデザイナーから、弊社で導入しているツール「Canva」を使ってプレゼンを行いました!Canvaでどんなことができるのか?プレゼン冒頭の見本を実際にどうやって作るのか?をPC作業担当と解説担当の2人タッグで発表しました。ここはエンジニアとデザイナーをうまく交流させることができたコンテンツだったかと思います。

アプリエンジニアからFlutterのライブコーディング

最後にアプリエンジニアから、弊社アプリ開発の一部で採用している「Flutter」のライブコーディングを行いました!こちらもPC作業担当担当と解説担当の2人タッグで発表し、TODOアプリをその場で開発することで、アプリ開発以外のエンジニア・デザイナーに実装イメージを掴んでもらいました。質疑応答も盛んに行われ、オフライン発表はオンラインに比べて質疑応答が柔軟にしやすかったのが印象的でした。

最後はフリートークの時間となり、21時ごろに解散となりました。各コンテンツ大変盛り上がったまま終了することができました!

今回のメインコンテンツは個別記事もございますので、詳しく知りたい方は以下からどうぞ!

tech.excite.co.jp tech.excite.co.jp

またWantedlyにもイベントレポートがございますので、よければ合わせてご覧ください! www.wantedly.com

開催した結果と今後について

オフラインの社内イベントは久々だったのですが、無事成功させることができました。開催後行ったアンケートについても、85%の参加者が普段の業務で関わらない方と話せたと回答し、また新卒エンジニアからも先輩社員と話しやすい雰囲気が作れたと回答されました。全体的に大好評だったイベントとなったと思います。

Beer Bashは今後も継続的に開催していく予定です!現在は隔月開催を目指して運営チームは再び走り出しています。また第2回以降がありましたらテックブログにて紹介させていただきます!

最後になりますが、弊社ではエンジニア、デザイナーの募集を随時行っています。もしご興味があれば以下からご連絡ください!! www.wantedly.com