こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！React NativeではStyleSheet APIが提供されており、CSSに近い形でスタイリングを行うことが出来ます。それ以外にも、NativeWindやTamaguiなどのスタイリングライブラリが存在します。今回はそれらを比較しながら、それぞれのメリットなどをご紹介したいと思います。 スタイリング方法の比較 StyleSheet APIReact Native標準のStyleSheet APIは、次のようにStyleSheet.create()でス...

!Expo 52で正式公開されました。2024/12/11に記事をアップデートしています。こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ExpoチームはReact Native内に部分的なWebViewをアプリ内に組み込むReact DOM componentをExpo52で提供しました。https://docs.expo.dev/guides/dom-components/今回はこちらについてのご紹介です。（それにしてもReact DOMってネーミングが分かりづらすぎる…） ExpoのReactD...

¡Hola! こんにちは！テラーノベルのオスカルです。Webの開発をしてます。毎日日本語と格闘していますので、変な表現を使ってしまったらご容赦ください。ᕙ( •̀ ᗜ •́ )ᕗ少し前に、開発に役立ついくつかのChrome拡張機能についての記事を書きました。今回は、開発専用ではないが非常に興味深いと思う他の拡張機能について話したいと思います。よし、それでは進めましょう！ 1- ColorZilla 🔗ColorPick Eyedropperを使ってウェブサイトのカラーコードを取得していましたが、時々Chromeの外側にある要素の色を取得したいことがありました。調べたと...

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！2024/05/30に行われました、「React Native Meetup #16 ft. カンム」でLTをさせていただきました！https://react-native-meetup.connpass.com/event/317621/今回はそちらの発表内容を元にした記事となります。 React Native SkiaについてReact Native Skiaは、Flutterなどでも使われるSkiaエンジンをReact Nativeで利用するためのライブラ...

想定する読者Google AppEngine/Go (GAE/Go) を今でも使い続けている方サーバ費用が気になっている方 結論テラーノベルではインスタンス費用が4分の1になった※リクエスト特性やAPIの仕様、アーキテクチャによって異なる点に注意 見込みhttps://zenn.dev/tellernovel_inc/articles/1bb51162cb2f48以前弊社のメンバーが投稿した記事で、「現状の4分の1程度にインスタンス料金を抑える見込み」と書いていたのですが、実際のところ厳密な見積もりはなく、主に課金体系の違いから安くはなるだろうと考えて見切り発...

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！先日、「Node学園 42時限目 Next.js AppRouterについて」に参加させていただいて、App Routerについて深く知ることが出来ました。https://nodejs.connpass.com/event/315443/弊社のサービスであるテラーノベルでも、昨年末あたりから徐々にPage RouterからApp Routerに切り替えています。今回は弊社でApp RouterをProduction環境に導入したことをお話しようと思います。!執筆...

¡Hola! こんにちは！テラーノベルのオスカルです。Webの開発をしてます。いつも言うんだけど、日本語はまだまだ勉強してますので、応援してください！ᕙ( •̀ ᗜ •́ )ᕗ前に、あまり有名ではないけれども非常に興味深く、時間をかける価値のあるいくつかのライブラリについて記事を書きました。今回は、新しいライブラリをいくつか見つけて、そのシリーズを続けます。さあ、確認してみましょう！ 1- animejs 🔗AnimeJSは、既存のHTML要素やReactコンポーネントにアニメーションを簡単に追加できる軽量なアニメーションライブラリです。プロジェクトに素敵なタッチを追加...

テラーノベルで機械学習を担当している川尻です。私たちの機械学習プロジェクトでは、VSCodeのDevelopment Containers （以下、dev container）を使用しています。dev containerでは、開発に必要なツールを事前にイメージに格納し、開発はコンテナ内で行います。一度設定を完了すれば、チーム全体で環境を共有でき、大変便利です。VSCodeだけでなく、Jetbrains系のIDEやクラウド上でのリモート開発もサポートされています[1]。Developing inside a Container より引用しかし、設定項目が増えてくると、新規プロジェク...

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！アプリにサブスクリプションの機能を入れる際に課金の訴求画面（Paywall）を表示し、ユーザにサブスクリプションのメリットを示すことが多いと思います。例えばテラーノベルでは次のような課金訴求画面を表示しています。今回紹介するSuperwallは、このような課金訴求画面を簡単に導入・A/Bテストや分析をするためのツールとなっています。 SuperwallについてSuperwallは2024年の2月時点で、iOS、Android（Beta)、Flutter（Bet...

これです：まあ、かなりシンプルなゲームですが、PixiJSで何ができるかを感じることができるので、この記事を書きました。そうだ、挨拶しないと！ ¡Hola! こんにちは！ テラーノベルのオスカルです。Webの開発をしています。いつも言うんだけど、日本語はまだまだ勉強中なので、応援してください！ PixiJSってなに？ウェブサイトを確認するなら、こう言っています：「The HTML5 Creation Engine」、日本語では「HTML5創造エンジン」かな？。👆あまり良い説明ではありません... 周りを調べてみると、これが私が見つけたものです：HTMLキャンバス要...

テラーノベルで機械学習を担当している川尻です。テラーノベルで定期実行タスクの管理には、Google CloudのマネージドサービスであるCloud Composerを活用しています。以前にもテラーノベルのテックブログで他のサービスと比較して紹介しています。https://zenn.dev/tellernovel_inc/articles/11c211b5a34fb1定期実行タスクの中で典型的な処理の一つとして、BigQueryで処理した結果をGoogle Cloud StorageやCloud Spannerに書き出すというものが挙げられます。そういった処理のとき、Mercari D...

はじめにこんにちは！ テラーノベルでサーバーサイドを担当している@yuhasです。テラーノベルには作品や作家さんの検索機能があり、ユーザーさんの読みたい作品や興味のある作家さんを提示できる検索機能は重要な機能の一つです。直近でその検索まわりを一新し、Cloud RunでElasticsearchを運用し始めました。(その話はこちらの記事に書いているのでよければご覧ください)その中で意図しない検索結果が返ってくることがあり、検索ロジックの改善を行いました。今回はその話についてできればと思います。 モチベーションテラーノベルの検索には大きく分けて「作品検索」と「ユーザー...

こんにちは、テラーノベルでサーバーサイドを担当している@manikaです。GAEスタンダード環境からCloud Runへ移行についての備忘録を記事にしました。GAEからCloud Runへ移行が完了すると、試算ですが現状の4分の1程度にインスタンス料金を抑えれる見込みの為それならばやるしかないな、という事で進めています。 概要基本的にはGAEに依存した機能やパッケージを削除又は変更していくという作業になりますが、Cloud Runへ移行するまでの間GAEでも動作させる必要があり、コードの２重管理は避けたかったのでGAEでもCloud Runでも同じコードで動くよう改修を行なって...

テラーノベルで機械学習を担当している川尻です。最近、LLMを使った社内業務の自動化などを行っていて、Pydanticを使ったテクニックが良かったので紹介します。 概要OpenAIの最新のモデルの gpt-4-1106-preview と gpt-3.5-turbo-1106 でJSON Modeがサポートされました(2023/12/27現在)[1]。 これにより出力結果を後段タスクのプログラムで扱いやすくなります。Pydantic [2] というのは、Pythonのデータバリデーションライブラリで、型情報を強力に扱うことができて高速に動きます。最初はPydanticを出力結果のパー...

はじめにこんにちは！ テラーノベルでサーバーサイドを担当している@yuhasです。テラーノベルには作品や作家さんの検索機能があり、ユーザーさんの読みたい作品や興味のある作家さんを提示できる検索機能は重要な機能の一つです。直近でその検索まわりを一新することになり、Cloud RunでElasticsearchを運用することになりました。Cloud Runで運用することでオートスケールなど多くの恩恵を受けられる一方で、状態をもつElasticsearchをコンテナで動かしていくのは単純なことではありません。今回はどのようにしてCloud RunでElasticsearchを運用...

テラーノベルで機械学習を中心に担当している川尻です。みなさんも大量のデータを特徴抽出してみたけど、どう使ったらいいかわからないなぁということありますよね。とりあえずどういうデータなのか雰囲気だけでもみるために、簡単な可視化から入るかと思います。以前にもグラフデータの可視化について記事を書きました。https://zenn.dev/tellernovel_inc/articles/53507126aa77bfテラーノベルでは小説投稿アプリを作っており、OpenAI Embedding APIを使って全作品の特徴量を出しているデータベースがあります。今回はこのデータを例にして、UMAPと...

こんにちは、テラーノベルでサーバーサイドを担当している@manikaです。今回はOSSのドキュメント変換ツールであるPandocを触る機会があったので、検証等を行った際の備忘も兼ねてマークダウンを電子書籍化するTipsを記事としました。 先に結論良い感じに仕上がりました。ブックアプリKindle Previewer 3出典[1]既にPandocを使った基本的な変換方法とかは知ってるよ！という方はこちらに飛んでください。 Pandocとは様々な形式のファイルフォーマットのドキュメントを別のフォーマットに変換してくれるOSSツールです。今回使用す...

テラーノベルで機械学習を中心に担当している川尻です。最近新たにPythonのプロジェクトを立ち上げるときにモノレポ構成にしました。Pythonにはまだデファクトとなるようなモノレポのツールはないですが、poetryだけで新しいツールを使わずに対応できたのでご紹介します。モノリポにするメリットは、大まかには以下のようになります。Linter, CI, IDEなどのよく使うツールの設定が簡単に共通化できる。モジュール間の依存関係をシンプルにできる。Pythonでモノレポをやっている例を検索すると、pantsやbazelなど多言語に対応した専用のツールを使う方法もでてきました。今...

こんにちは、テラーノベルでサーバーサイドを担当している@manikaです。先日稼働中のCloud Spannerからカラムを物理削除を行ったのでその時の方法を記載したいと思います。 概要!以下は実際の要件ではなく一例として記載しています。エピソードの「読まれた回数」のみを保存していたカラム（ここではPVとしています）を、「誰が、何回読んだか」をわかるようにする為、エピソードテーブルから切り離し、元のPVカラムを削除する事となりました。↓つまりこれを// エピソードテーブルCREATE TABLE Episode( ID STRING(255) NOT NULL,...

今暇でしょう？ 作ろう！ いいじゃん！これです：あ、テンション上がりすぎて挨拶を忘れました、すみません、金曜日だし。。。¡Hola! こんにちは！ テラーノベルのオスカルです。Webの開発をしてます。いつも言うんだけど、日本語はまだまだ勉強してますので、応援してください！ Create ai-love-images react app最初から始めましょう、まずはcreate-react-appを使って新しいフレッシュなReactプロジェクトを作成します。npx create-react-app ai-love-imagesいい名前でしょう？wおそらく既知ですが、念...