🏄‍♂️

React Native & ChatGPT モバイルアプリ開発(7)

2024/02/22に公開

Android

スレッド一覧画面(3)

スレッド一覧画面からスワイプで板一覧画面に戻る機能のインプリメントができていませんでした。iOSでは動作していますが、Androidではスワイプが効きません。

Androidでは、スレ一覧画面から板一覧画面へスワイプで戻れません。修正してください。

なるほど。全部の画面に効くようにscreenOptionsで最初に設定しておけということですね。

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="CategoryList"
        screenOptions={{
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          // Use the forHorizontalIOS interpolator for a smoother swipe gesture experience
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          // Adjust gesture response distance if needed, especially for larger devices
          gestureResponseDistance: Platform.OS === 'android' ? 120 : 100,
        }}
      >
        <Stack.Screen name="CategoryList" component={CategoryListScreen} />
        <Stack.Screen name="BoardList" component={BoardListScreen} />
        <Stack.Screen name="ThreadList" component={ThreadListScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

ということでスレッド一覧画面はこれで完了です。

レス一覧画面

レスの入ったdatファイルの処理を始める前に、実データを分析して専用のオブジェクトを定義してもらいましょう。

以下はdatファイルの仕様です。interface ResponseContentを作成してください。
datの仕様

export interface ResponseContent {
  authorName: string;
  email?: string; // Optional, as not all posts will include an email address
  dateIdBe: string; // A string that combines date, ID, and BE identifier, which can be parsed further if needed
  content: string;
  threadTitle?: string; // Optional, only present in the first post of a thread
}

レス一覧画面にとりかかったところでふと思い出しました。

スレ一覧の文字化け

そういえばFlutter版で「ちいかわ」のスレ一覧が空白になっていたのでした。React Native版で確認したところ文字化けしています。

https://kes.5ch.net/chiikawa/subject.txt からコンテンツを取得し、以下の仕様に則ったプログラムをRubyで書いてください。
1. nkfを使用してエンコーディングを推測する。
2. コンテンツの先頭128バイト分を1バイトずつ16進表示する。このとき16バイト毎に改行してください。

Detected Encoding: ASCII-8BIT
31 37 30 37 37 32 32 34 32 37 2e 64 61 74 3c 3e
81 79 82 bf 82 a2 82 a9 82 ed 81 7a 83 5a 83 43
83 8c 81 5b 83 93 95 d2 82 aa 82 a8 82 e0 82 f1
82 c8 82 a2 8c 8f 20 81 9a 32 33 20 20 28 34 38
35 29 0a 31 37 30 36 35 37 34 33 30 36 2e 64 61
74 3c 3e 88 c0 94 7b 90 57 8e 4f 20 81 9a 31 31
38 20 81 69 33 29 20 20 28 35 37 34 29 0a 31 36
39 36 36 38 36 37 35 38 2e 64 61 74 3c 3e 82 f1

どうみてもShift_JIS/CP932/Windows-31Jのように見えますがASCII-8BITだそうです。

https://kes.5ch.net/chiikawa/subject.txt からコンテンツを取得し、先頭5行分をnkfでUTF-8に変換して出力してください。変換前のエンコーディングはnkfに推測させてください。

1707722427.dat<>【ちいかわ】セイレーン編がおもんない件 ★23  (485)
1706574306.dat<>安倍晋三 ★118 （3)  (574)
1696686758.dat<>んしょ…んしょ…&#127793;&#127793;&#127793;&#127793;&#127793;&#128080;&#129402;  (92)
1698319860.dat<>ちいかわが更新されたらageるスレ2  (674)
1696938785.dat<>なんU避難所  (17)

上手く変換できていますね。不思議です。

エンコーディングがASCII-8BITと表示されました。RubyのASCII-8BITとはどのようなエンコーディングでしょうか？
RubyにおけるASCII-8BITは、エンコーディングの一種であり、主にバイナリデータの扱いに使われます。これは文字エンコーディングというよりは、バイナリデータやイメージデータなど、特定の文字セットに依存しないデータを扱うためのものです。
わかったようなわからないような話ですが、Rubyのnkfは推測して正しくUTF-8に変換できるけれども、JavaScriptのencoding-japaneseは推測することができず、正しく内部エンコーディングのUNICODEには変換できないということのようです。

datの仕様によると通常ではShift_JISとのことなので、とりあえず元のエンコーディングを指定しちゃいましょう！（nkf同等の使えそうなライブラリが見つからないので）

const resultArray = encoding.convert(uint8Array, 'UNICODE', 'SJIS');

ここまでのコードです。

続きはこちら。

Flutter版はこちら。

スレッド一覧画面(3)

レス一覧画面

スレ一覧の文字化け

Discussion