storybook 4.0のReact Nativeに神アップデートきた!

詳しい更新内容は↓参照

medium.com

React Native関係のアップデート内容

ついに、サーバー無しでアプリのみでstorybookができるようになったので、早速ためしてみました

github.com

パッケージをアップデートしただけでは動かなかったが、チュートリアルを見てちょっと書き直したら動きました。

https://storybook.js.org/basics/guide-react-native/

アプリで表示

f:id:wheatandcat:20181102015807p:plain:w300

f:id:wheatandcat:20181102015828p:plain:w300

f:id:wheatandcat:20181102015609p:plain:w300

アプリのみでstorybookの機能が成立している!感激

storybookをpublishする

アプリだけで動くようになったのでstorybookをアプリとしてpublishすることができます。

expoなら、nameとslugを変更したapp.jsonを作成してcliで指定するだけでstorybook用のアプリが配信できます。

expo-cli publish --config storybook/app.json

配信したstorybookアプリ

expo.io

通常の配信アプリ

expo.io

長らくreact-nativeのstorybookは不遇だったけど、ここに来て一気に神ツールになった

趣味プロダクト管理ツール紹介

アプリ作り始めたので、色々プロダクト管理お試し中

タスク管理

asana

asana.com

シンプルなタスク管理ツール こんな感じで使っている。jiraとかよりシンプルで、Todoリストよりも残タスクが見やすくていい感じ

f:id:wheatandcat:20181016041710p:plain

アイディア管理

参考画像とか、思っていたことが 雑にまとめられるツールが欲しいと思い試し中

milanote

www.milanote.com

画像とかテキストをまとめられるツール。 以外と、参考画像をぺたぺた貼っておくのは便利

f:id:wheatandcat:20181016042542p:plain

Mandal-Art

www.mandal-art.com

中心にあるのがメインテーマを書いて、周囲やりたいを書いていくみたいなヤツ。 現状は、最初にやるべきことがぶれないように管理するツールとして運用している感じ。

デザイン管理

Marvel app

marvelapp.com

シンプルなデザイン作成ツール。 ワイヤフレーム作成として使っている。 ガチでやるなら、sketchとかfigmaを使ったほうが良いと思います。

f:id:wheatandcat:20181016044004p:plain

情報管理

ここが今一番悩んでいるツール、今は以下の2つを試し中

Dropbox Paper

www.dropbox.com

Dropboxが提供しているドキュメント共有サービス。 簡単に編集できて、markdownを使える。ただプロジェクト毎とかの管理方法が無いので微妙

Scrapbox

scrapbox.io

こっちは、プロジェクト毎とか、記事をサムネ表示できるとか、よく出来ているサービス。 ただmarkdownに対応してないので、イマイチ本腰入れて使えていない

(日記)最近アプリ作り始めた

昨日から作り始めた

github.com

簡単なアプリの想定だから年内に公開を狙って行こうと思います。

採用する予定技術

バックエンド

アプリ

  • react-native
  • expo

Web版

  • nuxt

その他

  • データ保存 => datastore
  • 認証 => Auth0

くらいで軽く作る予定。検索系は難しいけど、ほぼただで使えるのが datastoreの良いところ。Cloud Spannerはもちろん、Cloud sqlも完全趣味で使うには意外と良い値段するから辛いところ

各frontendフレームワークでの読み込みファイルsizeの比較

github.com

前からGithubで調査していたsize比較のグラフができたので公開 (あとで全体の比較も追加する予定)

フロントエンド ポータルサイト

f:id:wheatandcat:20180925041430p:plain

hyperappとpreactが圧倒的に低く、angular、nextが大きい感じでした。(angularがここまで大きいのは正直予想外だったので、もしかしたらimportの書き方ミスっているかも・・・)

ちなみに計測の仕方は以下の通り

読み込んでいるjsサイズの計測方法

frontend-example/report.sh at master · wheatandcat/frontend-example · GitHub

計測スクリプト

#!/bin/bas
MOCK_HOST=https://mock-server-yznxmkzmvo.now.sh
ROOT_DIR=hyperapp-examples
DIR=001-simple

rm -rf build/*
npm run build
rm -rf ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report
mkdir -p ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report
cp dist/report.html ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report

serve -s dist &
lighthouse http://localhost:5000 --output json --output-path ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report/report.json
kill $(jobs -p)
mkdir -p ../../portal/src/data/${ROOT_DIR}/${DIR}
cp ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report/report.json ../../portal/src/data/${ROOT_DIR}/${DIR}
open ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report

buildしたファイルを「serve -s dist」で立ち上げて、lighthouseで計測

www.npmjs.com

計測結果のjsonの中にnetworkから読みんだアイテム情報があるので、その情報をパースしてグラフ化しています。

あとで、全部のbundleファイルのanalyze情報も追加する予定。

Xcode10にアップデートしたらreact-nativeのiOSビルドが通らなくなった話

qiita.com

こういう記事はqiita向けだと思ったので投稿しました。 Xcodeの自動更新を切ってなかったので、やむなく対処 😅

react-nativeのfastlaneでfabric自動化(ios/android)

push通知実装はできたけど、デプロイできなかったので、今日はfabricの紹介 githubに動くsource上げてます

github.com

ios

取り敢えず、手元で動かす前提で実装 ciだと証明書関係があるので、matchを実装しる必要がある

match - fastlane docs

  • ios/fastlane/Fastfile
default_platform(:ios)

platform :ios do
  desc "create ipa"
  lane :create_ipa do

    sigh(
      force: false,
      app_identifier: "org.reactjs.native.example.FastlaneWithFabric",
      adhoc: true,
    )

    increment_version_number(
      version_number: "0.0.0",
      xcodeproj: "FastlaneWithFabric.xcodeproj"
    )

    increment_build_number(
      build_number: Time.now.strftime("%Y%m%d%H%M"),
      xcodeproj: "FastlaneWithFabric.xcodeproj"
    )

    build_app(
      scheme: "FastlaneWithFabric",
      output_name: "FastlaneWithFabric.ipa",
      export_method: "ad-hoc"
    )

  end

  desc "deploy fabric"
  lane :fabric do

    crashlytics(
      crashlytics_path: "./Crashlytics.framework",
      api_token: ENV["FABRIC_API_TOKEN"],
      build_secret: ENV["FABRIC_API_SECRET"],
      ipa_path: 'FastlaneWithFabric.ipa',
      notes: "by fastlane",
      notifications: true,
      groups: ENV["FABRIC_GROUP"],
    )

  end

end

android

androidの方は↓を導入したらいけました。(android studioプラグインの方はうまくいかなかったので。。。)

github.com

default_platform(:android)

platform :android do

  desc "Submit a new Beta Build to Crashlytics Beta"
  lane :create_apk do

    gradle(task: "clean")
    
    gradle(task: "assembleRelease")

    sh("jarsigner", "-storepass", ENV["KEY_STORE_PASSWORD"], "-verbose", "-keystore", "../app/android-release.keystore", "../app/build/outputs/apk/app-release-unsigned.apk", "android-release")

  end

  desc "deploy fabric"
  lane :fabric do

    crashlytics(
      api_token: ENV["FABRIC_API_TOKEN"],
      build_secret: ENV["FABRIC_API_SECRET"],
      apk_path: 'app/build/outputs/apk/app-release-unsigned.apk',
      notes: "by fastlane",
      notifications: true,
      groups: ENV["FABRIC_GROUP"],
    )

  end

end