はじめに React Nativeで新作アプリを作りました。 久しぶりにカスみたいなアプリ作りました姓名判断っぽい画像を捏造できます12/30に完成したんですが、Appleさんに怪しい占いアプリと勘違いされ、なかなか出せませんでした#嘘姓名判断iOShttps://t.co/2gUSUI2rQCAndroidhttps://t.co/IyslOklSkl pic.twitter.com/kG0NxRcMkW— yoshii? (@ganja_tuber) January 5, 2022 嘘の姓名判断の結果を捏造できるおふざけアプリです。 好きなように運勢を選択して… こんな感じの適当な姓名判断を作れます よかったら遊んでみてください。 困ったこと React NativeでViewを画像に変換し、デバイスに保存するのに手間取ったので、 実装方法を書きます。 (Androidは実機を持っていないので、動かなかったらコメントとかで教えてください。一応シミュレーションでは動作確認してます。) GitHub リポジトリ 解説するコードは全て以下のリポジトリにまとめてます。 実装方法 前提 Expo CLIを入れておいてください 生のReact Native派の人は適宜読み替えてください あと、yarn使います。npmの人も適宜読み替えてください。 プロジェクト作成 まずは、expo init ターミナルに以下を入力 expo init ExpoConvertImageSample ExpoConvertImageSampleのとこは適当に決めてください。 エンター押したらなんか聞かれるので、blank (TypeScript) を選びます。 TypeScriptじゃなかったり、react navigationしたい人は適宜変えてね。 実装 ライブラリ導入 yarn add react-native-view-shot expo-media-library react-native-view-shot: Viewを画像に変換します expo-media-library: カメラロールに画像を保存します 以下コードです。 App.tsx import React, { useCallback, useRef, VFC } from "react"; import { View, Text, Button, Platform, Alert } from "react-native"; import ViewShot, { captureRef } from "react-native-view-shot"; import * as MediaLibrary from "expo-media-library"; const os = Platform.OS; const App: VFC = () => { const viewShot = useRef(null); const permissionAlert = () => { Alert.alert( "画像の保存が許可されませんでした。", "設定から画像の保存を許可してください。" ); }; const saveImageFromView = async () => { try { const uri = await captureRef(viewShot); await MediaLibrary.saveToLibraryAsync(uri); Alert.alert("画像の保存完了"); } catch (e) { console.log(e); permissionAlert(); } }; const capture = useCallback(async () => { // android if (os === "android") { const permission = await MediaLibrary.getPermissionsAsync(); if (permission.canAskAgain && permission.status !== "granted") { const permissionResponse = await MediaLibrary.requestPermissionsAsync(); if (permissionResponse.status !== "granted") { permissionAlert(); } else { await saveImageFromView(); } } else if (permission.status !== "granted") { permissionAlert(); } else { await saveImageFromView(); } } // iOS else { await saveImageFromView(); } }, []); return ( <View> <ViewShot ref={viewShot} style={{ height: 500, width: 300, backgroundColor: "red" }} > <Text style={{ fontSize: 30, marginTop: 200, textAlign: "center" }}> {"こんにちは〜"} </Text> </ViewShot> <Button title="変換して保存する" onPress={capture} /> </View> ); }; export default App; 上記のコードをApp.tsxにコピペして、 yarn start して、シミュレーター起動してボタンを押したらカメラロールに画像が保存されるはずです。 解説 やっていることの根幹は、saveImageFromView関数内の以下の2行です。 1行目でref属性にviewShotを指定しているViewをキャプチャーして、uriを取得。 2行目でそのuriから画像を保存してます。 App.tsx const uri = await captureRef(viewShot); await MediaLibrary.saveToLibraryAsync(uri); 現在(2022/01/08)、iOSだとカメラロールに保存する処理が走ると初回には勝手に保存を許可するかユーザに尋ねるAlertが出てくれるので、ぶっちゃけこの2行だけでいいです。 iOSで許可を求める様子 ただ、Androidだと少し話が変わってきます。 以下の1行でしっかり許可を要求する必要があります。 App.tsx const permissionResponse = await MediaLibrary.requestPermissionsAsync(); androidで許可を求める様子 また、保存の許可を求めるAlertは何回も出しちゃいけないことになってるので、2回目以降は permissionAlert 関数を使って設定から許可し直すことを要求するという形にしてます。 注意 開発環境でExpo Goを使って動作確認をしているときに、1回目の保存の許可を求めるAlertを拒否した場合、設定から再度許可しても保存できないようです。 1回目のAlertで保存を拒否した後の動作確認がしたい人は yarn buildして、静的ファイルを生成して確認するのが確実で良いでしょう。 まとめ React NativeでViewを画像に変換して保存する方法を書きました。 これを使えば作れるアプリの幅が広がると思います。 わからないことや、問題があればコメントお願いします。 では、さようなら〜

この記事は iOSのキャッチアップを余儀なくされた生粋のAndroiderの奮闘日記です。 単発の記事になりますが、ご容赦ください。 UIKitとは ドキュメント読んでいきます。 Construct and manage a graphical, event-driven user interface for your iOS or tvOS app. iOSとtvOS用に作られたもので、イベント駆動なインターフェースを提供してくれるフレームワークのようです。 iOSシステムとのインタラクティブを管理してくれるようです。 全然知らなかったけど、Apple社はテレビ用のOSも出してるんや。 注意書きとして、UIKitのクラスはメインスレッドのみで使用するのがルールみたいです。 SwiftUIとの違いは SwiftUIもiOSでUIを描画するためのフレームワークですが、新しいものみたいです。 ただ、一つのプロジェクトに両者をブリッジできるようなので、組み合わせて使える。 AndroidでもJetpackComposeを既存のものに組み込めるので、それと同じかなと。 まとめ とりあえず、UIKitというのはUI描画のフレームワークであると。 参考

小学生でも分かるswift構文2 さて、今回は数値型について記述していきたいと思います。 「int」とは、型の一種で、整数型と呼ばれています。 実際にXcode上で、 let integer:Int = 0 と入力してみました。 「integer」という名前の、「Int」型に「0」という値を代入しました。 という構文になります。 もう一つ紹介するのが、 「double」という型で、浮動小数点型と呼ばれます。 let ダブル:Double = 0.1 「ダブル」という名前の、「Double」型に「0.1」という値を代入しました。 という構文です。 小数点が付かない数は「Int」型,小数点が付く数は「Double」型を使うと思って頂ければ大丈夫です。 また、swiftには「型推論」という機能が備わっていて、 let integer = 0 のように入力しても、「integer」は「Int」型だとXcode側で勝手に判断してくれる便利な機能が備わっているのです。 僕自身、初心者すぎてこの機能の恩恵はよく解っていないのですが、恐らくたくさん構文を書いていけばいくほど、型をいちいち明示する手間が省けるので、すごくありがたい機能なんだと思います。 次回は実際に数値型を使って、計算を行っていきたいと思います。 では！