ホーム>プログラミング関連>その他のソースコード
ダウンロード
ファンピー

ファンピー

ミニマルな意見を持つマストドン Web クライアント。

派手なスクリーンショット

?️ 発音： /fænpi/ ( FAN-pee ) ?聞く

これは、Mastodon の代替 Web クライアントです。

  • ?制作：https://phanpy.social
    • productionブランチ
    • 休憩の頻度を減らす
    • 重要でない限り修正が遅くなる
  • ⁉️開発: https://dev.phanpy.social
    • main
    • 新しいクールなものをもっと早く見られるかもしれない
    • もっと頻繁に壊れるかもしれない
    • はるかに早く修正される可能性もあります

?マストドンで @phanpy をフォローして最新情報を入手してください ✨

すべては私の好みとビジョンに従ってデザインされ、設計されています。これは、Mastodon について学び、新しい UI/UX アイデアを実験するための個人的なサイド プロジェクトです。

特徴

  • ?複数のアカウント
  • ?作成ウィンドウのポップアウト/イン
  • ?ライト/ダーク/自動テーマ
  • ?グループ化された通知
  • ?ネストされたコメント スレッド
  • ?未送信の下書きの回復
  • ?カルーセル™️ を強化します
  • ⚡ 複数列やタブバーなどの表示モードを備えたショートカット™️
  • #️⃣ マルチハッシュタグタイムライン

設計上の決定

  • ステータス アクション (返信、ブースト、お気に入り、ブックマークなど) は、デフォルトでは非表示になっています。
    これらは個別のステータス ページにのみ表示されます。これは、混乱と気を散らすものを減らすためです。エンゲージメントが低下する可能性がありますが、ここでは数字を追いかけているわけではありません。
  • ブーストはロケットのアイコンで表されます。
    緑色の二重矢印アイコン (Twitter のリツイート) は、「ブースト」という用語に適切ではないようです。緑のロケットだと見た目が変なので紫を使います。
  • タイムラインには、完全なアカウント ユーザー名 ( @username@instance ) ではなく、短いユーザー名 ( @username ) が表示されます。
    ガイドラインでは「分散化はユーザーに対して透明でなければならない」と述べられていますが、毎回それを正面から押し付けるべきではないと思います。また、完全なユーザー名ではスクリーン リーダー関連のアクセシビリティの問題もいくつかありますが、残念ながらこの Web アプリにはまだアクセスできません。
  • タイムライン内のビデオ/GIF/その他の自動再生はありません。
    タイムラインはすでに大混乱になっており、多くの人、ブランド、ニュース、メディアがあなたの注意を引こうとしています。これ以上悪化させないようにしましょう。 (現在の例外はアニメーション絵文字です。)
  • ハッシュベースの URL 。
    この Web アプリは、Mastodon の既存のフロントエンドを完全に置き換えることを目的としたものではありません。 SEO、データベース、サーバーレス、または長時間稼働するサーバーはありません。いつか間違ってしまうかもしれない。

微妙な UI の実装

ユーザー名の表示

ユーザー名の表示

  • タイムライン上では、ユーザー名は[NAME] @[username]と表示されます。
  • @[username]の場合は、常にインスタンスのドメイン名を除外します。
  • [NAME] @[username]と同じである場合、 @[username]も除外されます。

カルーセルをブーストします

カルーセルをブーストします

  • フェッチされた投稿 (フェッチごとに 20 個の投稿など) から、ブースト数が投稿合計の 4 分の 1 を超えるか、連続したブーストが 3 つを超える場合、ブースト カルーセル UI がトリガーされます。
  • ブーストの数が合計投稿の 4 分の 3 を超える場合、ブースト カルーセル UI は、フェッチされた合計投稿の最後に (「ページ」ごとに) スロットに配置されます。
  • それ以外の場合、ブースト カルーセル UI は投稿の間に挿入されます。

スレッド番号バッジ (例: スレッド 1/X)

スレッド番号バッジ

  • ルート投稿が見つかるまで、キャッシュまたは追加の API リクエストからのinReplyToIdのすべての投稿を確認します。
  • ルート投稿が見つかった場合、バッジにはスレッド内の投稿のインデックス番号が表示されます。
  • ルートポストが非常に古いか、スレッドが非常に長い可能性があるため、API リクエストは 3 つまでに制限してください。
  • インデックス番号が見つからなかった場合、バッジは番号なしでThread表示するようにフォールバックします。

ハッシュタグの詰め込みが崩壊する

ハッシュタグの詰め込みが崩壊する

  • 3 つを超えるハッシュタグを含む投稿コンテンツの最初の段落は、最大 3 行に折りたたまれます。
  • ハッシュタグが 3 つ以上ある最初の段落以降の段落は 1 行に折りたたまれます。
  • 段落を折りたたんだ後、複数のハッシュタグを持つ隣接する段落は 1 行に折りたたまれます。
  • ハッシュタグの周囲または間にテキストがある場合、ハッシュタグは折りたたまれません。
  • 折りたたまれたハッシュタグには最後に...が追加されます。
  • また、視覚的なノイズを軽減するために、わずかにフェードアウトされます。
  • 投稿ビューを開くと、折りたたまれていないハッシュタグが表示されます。

フィルタリングされた投稿

  • 「完全に非表示」でフィルターされた投稿は非表示になり、それを表示する UI はありません。
  • 「警告付きで非表示」でフィルターされた投稿は部分的に非表示になり、フィルター名と作成者名が表示されます。
    • 投稿の上にマウスを置くとコンテンツの一部が表示され、ツールチップに投稿テキストが表示されます。
    • クリックすると投稿ページが開きます。
    • 長押しまたは右クリックすると、下部シート UI で投稿が「覗く」ようになります。
    • ブースト カルーセルでは、カルーセルの最後にソートされます。

発達

前提条件: Node.js 18+

  • npm install - 依存関係をインストールする
  • npm run dev - 開発サーバーとmessages:extract ( clean + ``watch`)を並行して起動します。
  • npm run build - 本番用のビルド
  • npm run preview - 実稼働ビルドをプレビューする
  • npm run fetch-instances - joinmastodon.org/servers からインスタンスのリストを取得し、 src/data/instances.jsonに保存します。
  • npm run sourcemap - 本番ビルドでsource-map-explorer実行します。
  • npm run messages:extract - ソースファイルからメッセージを抽出し、ロケールメッセージカタログを更新します。

技術スタック

  • Vite - ビルドツール
  • Preact - UI ライブラリ
  • Valtio - 状態管理
  • React ルーター - ルーティング
  • masto.js - マストドン API クライアント
  • Iconify - アイコンライブラリ
    • Mingかわいいアイコン
  • Lingui - 国際化
  • Vanilla CSS -はい、私は昔ながらのスタイルです。

これらの一部は将来変更される可能性があります。フロントエンドの世界は常に変化しています。

国際化

すべての翻訳は、 src/localesフォルダー内の gettext .poファイルとして利用できます。デフォルトの言語は英語 ( en ) です。複数化には CLDR 複数規則が使用されます。 RTL (右から左) 言語も、適切なテキスト方向、アイコンのレンダリング、レイアウトでサポートされます。

ページの読み込み時に、デフォルト言語が次のメソッドで順番に検出されます (最初に一致したものが使用されます)。

  1. URL パラメータlang例: /?lang=zh-Hant
  2. localStorageキーlang
  3. ブラウザのnavigator.language

ユーザーは、設定で言語を変更できます。これにより、 localStorageキーlangが設定されます。

翻訳者向けガイド

*翻訳 WordPress ハンドブックからインスピレーションを得た:

  • 文字通りに翻訳するのではなく、自然に翻訳してください。
  • 同じレベルのフォーマルさ（または非公式さ）を保つように努めてください
  • 俗語や視聴者固有の用語を使用しないでください
  • 変数のプレースホルダーに注意してください。多くの文字列には、 {account} (変数)、 <0>{name} (変数を含むタグ)、 # (数字のプレースホルダー) などのプレースホルダーがあります。
  • 省略記号 (…) は意図的です。取り外さないでください。
    • Nielsen Norman Group: 「詳細情報が必要な場合はコマンド テキストに省略記号を含めてください」
    • Apple ヒューマン インターフェイス ガイドライン: 「アクションが完了する前にさらに情報が必要な場合は、メニュー項目のラベルに省略記号を追加します。省略記号文字 (…) は、ユーザーが情報を入力するか、通常は別のビュー内で追加の選択を行う必要があることを示します。」
    • Windows アプリ開発: 「省略記号は不完全を意味します。」
  • 日付タイムスタンプ、日付範囲、数値、言語名、およびテキストの分割は、ECMAScript 国際化 API によって処理されます。
    • Intl.DateTimeFormat - 例: "8 Aug"、"08/08/2024"
    • Intl.RelativeTimeFormat - 例: 「2 日前」、「2 日後」
    • Intl.NumberFormat - 例: "1,000"、"10K"
    • Intl.DisplayNames - たとえば、繁体字中国語 ( zh-Hant ) の「English」 ( en ) は「英文」です。
    • Intl.Locale (古いブラウザ用のポリフィルを使用)
    • Intl.Segmenter (古いブラウザ用のポリフィルを使用)

技術的なメモ

  • 文字列の ID は、明示的に定義されるのではなく、自動生成されます。利点としては、「名前を付ける」問題を回避し、重複を回避できることが挙げられます。
    • 将来、要件と優先順位が変更された場合、明示的 ID が導入される可能性があります。ライブラリ (Lingui) では両方が可能です。
    • 特定の文字列がコンテキスト、文化、地域に基づいて異なって翻訳される場合は、問題を報告してください。
  • プッシュ通知には文字列はありません。言語はインスタンスサーバーで設定されます。
  • などのネイティブ HTML 日付ピッカーは、ユーザーが設定したロケールではなく、常にシステムのロケールに従います。
  • ALT バッジの「ALT」は翻訳されません。これは、言語を超えて認識できる標準として機能します。
  • カスタム絵文字名はローカライズされていないため、英語以外の言語では検索が機能しません。
  • GIPHY API は、検索用の言語のリストをサポートしています。
  • Unicode の右から左へのマーク (RLM) ( U+200F 、 ‏ ) は、RTL/LTR 混合テキスト、特に</code>要素 ( <code>document.title</code> ) に使用する必要がある場合があります。</li><li>開発時には、擬似ローカリゼーションに使用される追加の<code>pseudo-LOCALE</code>ロケールがあります。これはテスト用であり、本番環境には表示されません。</li><li>実稼働用にビルドする場合、英語 ( <code>en</code> ) のカタログ メッセージは個別にバンドルされません。他のロケールは別個のファイルとしてバンドルされ、オンデマンドでロードされます。これにより、 <code>en</code>が常にフォールバックとして利用可能になります。</li></ul><div class="markdown-heading" dir="auto"><h3>ボランティア翻訳</h3></div><p dir="auto">翻訳はCrowdin上で管理されます。ボランティアで翻訳を手伝っていただくこともできます。</p><p dir="auto">開始するには、入門ドキュメントをお読みください。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> セルフホスティング</h2></div><p dir="auto">これは<strong>純粋な静的 Web アプリ</strong>です。どこでもホストできます。</p><p dir="auto"> 2 つの方法 (いずれかを選択):</p><div class="markdown-heading" dir="auto"><h3>簡単な方法</h3></div><p dir="auto">「リリース」に移動し、最新の<code>phanpy-dist.zip</code>または<code>phanpy-dist.tar.gz</code>をダウンロードします。事前にビルドされているため、インストール/ビルド コマンドを実行する必要はありません。それを抽出します。抽出されたファイルのフォルダーを提供します。</p><div class="markdown-heading" dir="auto"><h3>カスタムビルド方法</h3></div><p dir="auto">Node.jsが必要です。</p><p dir="auto">このリポジトリをダウンロードまたは<code>git clone</code> 。<em>安定した</em>リリースには<code>production</code>ブランチを使用し、<em>最新の</em>リリースには<code>main</code>使用します。 <code>npm run build</code> ( <code>npm install</code>後) を実行してビルドします。 <code>dist</code>フォルダーを提供します。</p><p dir="auto">カスタマイズは、ビルド コマンドに環境変数を渡すことで実行できます。例: </p><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_CLIENT_NAME="Phanpy Dev" PHANPY_WEBSITE="https://dev.phanpy.social" npm run build"><pre>PHANPY_CLIENT_NAME= <span class="pl-s"><span class="pl-pds">"</span> Phanpy Dev <span class="pl-pds">"</span></span> PHANPY_WEBSITE= <span class="pl-s"><span class="pl-pds">"</span> https://dev.phanpy.social <span class="pl-pds">"</span></span> npm run build</pre></div><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build"><pre>PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build</pre></div><p dir="auto"> <code>.env</code>ファイルで設定することもできます。</p><p dir="auto">利用可能な変数:</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> (オプション、デフォルト: <code>Phanpy</code> ) は以下に影響します。<ul dir="auto"><li> Web ページのタイトル。ブラウザ ウィンドウまたはタブのタイトルに表示されます。</li><li> PWA としてインストールされている場合、ホーム画面、macOS ドック、Windows タスクバーなどに表示されるアプリのタイトル</li><li>OpenGraph カードのタイトル (ソーシャル ネットワークで共有する場合)</li><li>認証用にアプリを登録し、一部のアプリ/クライアントの投稿で使用されるクライアントとして表示されるクライアント名</li></ul></li><li><code>PHANPY_WEBSITE</code> (オプションですが推奨、デフォルト: <code>https://phanpy.social</code> ) は以下に影響します。<ul dir="auto"><li> Web サイトの正規 URL</li><li> OpenGraph カード URL (ソーシャル ネットワークで共有する場合)</li><li> OpenGraph カード イメージのルート パス</li><li>クライアント URL (認証用にアプリを登録し、一部のアプリ/クライアントの投稿で使用されるクライアントとして表示される場合)</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE</code> (オプション、デフォルトなし):<ul dir="auto"><li>例<code>https://</code>なしの「Mastodon.social」</li><li>ログイン用のデフォルトのインスタンス</li><li>ログインすると、ユーザーはインスタンスの URL を手動で入力して送信する代わりに、インスタンスの認証ページに即座にリダイレクトされます。</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> (オプション、デフォルトなし):<ul dir="auto"><li>インスタンス登録ページのURL</li><li>例: <code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> (オプション、デフォルトは公式インスタンスのプライバシー ポリシー):<ul dir="auto"><li>プライバシーポリシーページのURL</li><li>インスタンス独自のプライバシー ポリシーを指定できる</li></ul></li><li><code>PHANPY_DEFAULT_LANG</code> (オプション):<ul dir="auto"><li>指定しない場合、デフォルトの言語は英語 ( <code>en</code> ) です。</li><li>複数の検出方法後のフォールバック言語 ( <code>lang</code>クエリ パラメーター、 <code>localStorage</code>の<code>lang</code>キー、および<code>navigator.language</code> )</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> (オプション、スペース区切りのリスト、デフォルト: <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ):<ul dir="auto"><li>スペースで区切られたインスタンスのリストを指定します。最初のインスタンスは、後続のインスタンスにフォールバックする前にデフォルトとして使用されます。インスタンスが 1 つしかない場合は、フォールバックがないことを意味します。</li><li> lingva-translate または lingva-api のいずれかを利用した自己ホスト型 Lingva インスタンスを指定できます。</li><li> <code>/.env</code>にハードコーディングされたフォールバック インスタンスのリスト</li><li><g-emoji class="g-emoji" alias="arrow_upper_right">↗️</g-emoji> lingva-translate インスタンスのリスト</li></ul></li><li><code>PHANPY_IMG_ALT_API_URL</code> (オプション、デフォルトなし):<ul dir="auto"><li> img-alt-api のセルフホスト型インスタンスの API エンドポイント。</li><li>指定すると、コンポーザーで画像説明ジェネレーターを有効にするための設定がユーザーに表示されます。デフォルトでは無効になっています。</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (オプション、デフォルトなし):<ul dir="auto"><li> GIPHY の API キー。 API ドキュメントを参照してください。</li><li>指定すると、ユーザーがコンポーザーで GIF ピッカーを有効にするための設定が表示されます。デフォルトでは無効になっています。</li><li>これは自己ホスト型ではありません。</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3>静的サイトのホスティング</h3></div><p dir="auto">方法はたくさんあるので、オンラインで「静的サイトを自己ホストする方法」を検索してみてください。</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Lingva-translate または lingva-api ホスティング</h4></div><p dir="auto">lingva-translate または lingva-api のドキュメントを参照してください。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> コミュニティへの展開</h2></div><p dir="auto">これらは他の素晴らしい人々によって自己ホストされています。</p><ul dir="auto"><li> ferengi.one by @david@weaknotes.com</li><li> halo.mookiesplace.com by @mookie@mookiesplace.com</li><li> phanpy.bauxite.tech by @b4ux1t3@hachyderm.io</li><li> phanpy.blaede.family 投稿者 @cassidy@blaede.family</li><li> phanpy.crmbl.uk by @snail@crmbl.uk</li><li> phanpy.cz by @zdendys@mamutovo.cz</li><li> phanpy.fulda.social by @Ganneff@fulda.social</li><li> phanpy.gotosocial.social by @admin@gotosocial.social</li><li> phanpy.hear-me.social by @admin@hear-me.social</li><li> phanpy.mastodon.world 投稿者: @ruud@mastodon.world</li><li> phanpy.mstdn.mx 投稿者: @maop@mstdn.mx</li><li> phanpy.social.tchncs.de by @milan@social.tchncs.de</li><li> phanpy.tilde.zone by @ben@tilde.zone</li><li> phanpy.vmst.io by @vmstan@vmst.io</li><li> social.qrk.one by @kev@fosstodon.org</li></ul><blockquote><p dir="auto">注: プル リクエストを作成して追加します。 </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">コスト</h2></div><p dir="auto">この Web アプリの実行と開発にかかるコスト:</p><ul dir="auto"><li>ドメイン名 (.social): <strong>23.18 米ドル/年</strong>(初年度 6.87 米ドル)</li><li>ホスティング: 無料</li><li>開発・設計・保守：「無料」（私の貴重な時間） </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">マスコット</h2></div><p dir="auto">ファンピーはじめんタイプのポケモンです。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> メンテナー + 貢献者</h2></div><ul dir="auto"><li>チー・アウン (マストドン) (Twitter)</li></ul><div class="markdown-heading" dir="auto"><h3>翻訳ボランティア</h3></div><ul dir="auto"><li>alidsds11 (アラビア語)</li><li>オルタナティブ（韓国語）</li><li> BoFFire (アラビア語、フランス語、カビル)</li><li>ブラワル (ロシア語)</li><li> cbasje (オランダ語)</li><li> cbo92 (フランス語)</li><li> CDN (簡体字中国語)</li><li> dannypsnl (繁体字中国語)</li><li>データビオ (カタルーニャ語)</li><li>ディズロ（イタリア人）</li><li> Drift6944 (チェコ語)</li><li>ドライデンウー (繁体字中国語)</li><li>エリサーク (フランス語)</li><li>エルパンプリナ (スペイン語)</li><li>フィティック (エスペラント語、ヘブライ語)</li><li>フリージア（日本語）</li><li>ゴース (ガリシア語)</li><li>ホンミンヒ（韓国語）</li><li>ヒューゴグリフ (エスペラント語、スペイン語)</li><li>イサード (カタルーニャ語)</li><li>カリューウ (ポーランド語)</li><li>カラフェジ (チェコ語)</li><li> katullo11​​ (イタリア語)</li><li>キッタ (ドイツ語)</li><li>ルン（タイ語）</li><li> lucasofchirst (オック語、ポルトガル語、ポルトガル語、ブラジル語)</li><li> LukeHong (繁体字中国語)</li><li> marcin.kozinski (ポーランド語)</li><li> mkljczkk (ポーランド語)</li><li>モジョソウン (韓国語)</li><li>モラル（韓国語）</li><li> MrWillCom (簡体字中国語)</li><li> nclm (フランス語)</li><li>パスピ（イタリア語）</li><li>パンクロックガール (バスク)</li><li>ラデコス (フランス語)</li><li>ラゼム (チェコ)</li><li> realpixelcode (ドイツ語)</li><li>レザーホセインザデ (ペルシア語)</li><li> rwmpelstilzchen (エスペラント語、ヘブライ語)</li><li> SadmL (ロシア語)</li><li> SadmL_AI (ロシア語)</li><li> shuji3 (日本語)</li><li> Sky_NiniKo (フランス語)</li><li> Steffo99 (イタリア語)</li><li> Su5hicz (チェコ語)</li><li>トフェレルモ (スペイン語)</li><li> tkbremnes (ノルウェー語ブークマル)</li><li> tux93 (ドイツ語)</li><li> Vac31. (リトアニア語)</li><li>ヴァルトライ (フィンランド語)</li><li>ヴァシリリ (ポーランド語)</li><li>航海 (繁体字中国語)</li><li> xabi_itzultzaile (バスク語)</li><li> xen4n (ウクライナ語)</li><li>エクスケラルト (カタルーニャ語)</li><li>ジリサット (カビル)</li><li> zkreml (チェコ語) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">バックストーリー</h2></div><p dir="auto">私は Twitter の初期のユーザーの 1 人です。 Twitter は 2006 年 7 月 15 日に開始されました。私は 2006 年 12 月に参加し、最初のツイートが 2006 年 12 月 18 日に投稿されました。</p><p dir="auto"> Twitter がいかに初期のものであったかを知っています。楽しかったです。</p><p dir="auto">当時、私は Python と Google App Engine で書かれた「Twig」という Twitter クローンを作成しました。 Appcelerator Titanium で書かれた独自の Twitter デスクトップ クライアントをほぼ作成しました。私はミニカンファレンスで Twitter クライアントに関する最高の講演の 1 つを行いました。私は「Twitter Columns」と呼ばれるものを作成しました。これは、あなたのフォローリスト、あなたのフォロワーのフォロー、あなたのフォロワー、あなたのフォロワーのフォロワーなどのリストを表示するウェブアプリです。 2009 年に、私は「Twitter を始めたきっかけ」というタイトルのブログ投稿を書きました。私は DestroyTwitter (Jonnie Hallman が Adob​​e Air で作成したデスクトップ クライアント) 用に 2 つのテーマを作成し、そのうちの 1 つは「Vimeo」と呼ばれています。 2013 年に、私はツイートを表示するフロントエンドとツイートを保存する CouchDB バックエンドを備えた独自のツイート バックアップ サイトを作成しました。</p><p dir="auto"> <strong>15年以上</strong>経ちました。</p><p dir="auto">そしてここに私がいます。マストドン Web クライアントを構築します。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 代替 Web クライアント</h2></div><ul dir="auto"><li>ファンピーフォーク ↓<ul dir="auto"><li>アゴラ</li></ul></li><li>ピナフォア（引退） - フォーク ↓<ul dir="auto"><li>セマフォ</li><li>エナフォア</li></ul></li><li>カッコウ+</li><li>センギ</li><li>石鹸箱</li><li>エルク - フォーク ↓<ul dir="auto"><li>エルク.fedified.com</li></ul></li><li>マストデッキ</li><li>トランクス</li><li>トゥーティ</li><li>トイレ</li><li>スタチューザー</li><li>牙のある</li><li>Mastodon Glitch Edition (スタンドアロン フロントエンド)</li><li>マンガン</li><li>ザデスク</li><li>もっと... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ 他のすべてのソーシャル メディア クライアント開発者への通知</h2></div><p dir="auto">ぜひ、このアプリのUIアイデアや実験をコピーしてください。それらのいくつかは非常に優れていると思うので、より多くのアプリがそれらを備えていれば素晴らしいと思います。</p><p dir="auto">開発者ではない場合は、お気に入りのソーシャル メディア クライアントの開発者にこのアプリのことを伝え、UI のアイデアや実験をコピーするよう依頼してください。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ライセンス</h2></div><p dir="auto">マサチューセッツ工科大学</p> </div> <div class="zd_btn more_version_btn" data-more="拡大する" data-less="折りたたむ">拡大する</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">追加情報</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">バージョン</span> <span class="text"></span> </li> <li> <span class="title">タイプ</span> <a class="text" href="/ja/category/list_228_1.html">その他のソースコード</a> </li> <li> <span class="title">更新時間</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">サイズ</span> <span class="text"></span> </li> <li> <span class="title">言語</span> <span class="text">簡体字中国語</span> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">関連アプリ</span> </div> <ul class="version_list grid gap_x6 gap_y6 grid_c2"> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">おすすめ</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/ja/app/44151.html"><img src="https://images.downcodes.com/uploads/20230315/logo_641169e22e95f1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Bidi 映画とテレビの bdys Android バージョン"></a> <div class="content"> <h3><a href="/ja/app/44151.html">Bidi 映画とテレビの bdys Android バージョン</a></h3> <div class="cate"> <a href="/ja/category/list_297_1.html">ビデオの再生</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/ja/app/39387.html"><img src="https://images.downcodes.com/uploads/20230216/logo_63edd21d622421.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="アサルトリリィ ゲームダウンロード"></a> <div class="content"> <h3><a href="/ja/app/39387.html">アサルトリリィ ゲームダウンロード</a></h3> <div class="cate"> <a href="/ja/category/list_301_1.html">ロールプレイ</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/ja/download/28990.html"><img src="https://images.downcodes.com/uploads/20220919/logo_63281248401771.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="知識支払いシステムのソースコード丨オンライン教育コンテンツ有料知識実現丨ビデオQ&Aグラフィック有料コースミニプログラムカスタマイズH5"></a> <div class="content"> <h3><a href="/ja/download/28990.html">知識支払いシステムのソースコード丨オンライン教育コンテンツ有料知識実現丨ビデオQ&Aグラフィック有料コースミニプログラムカスタマイズH5</a></h3> <div class="cate"> <a href="/ja/category/list_55_1.html">その他のカテゴリー</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/ja/app/45483.html"><img src="https://images.downcodes.com/uploads/20230317/logo_6413c6576e3f21.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="プラント vs. ゾンビ 西遊記編"></a> <div class="content"> <h3><a href="/ja/app/45483.html">プラント vs. ゾンビ 西遊記編</a></h3> <div class="cate"> <a href="/ja/category/list_299_1.html">カジュアルパズル</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/ja/app/179136.html"><img src="https://images.downcodes.com/uploads/20240818/logo_66c1c8413413d1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="PVZ ハイブリッド バージョン 2.3.5 内蔵メニュー バージョン"></a> <div class="content"> <h3><a href="/ja/app/179136.html">PVZ ハイブリッド バージョン 2.3.5 内蔵メニュー バージョン</a></h3> <div class="cate"> <a href="/ja/category/list_299_1.html">カジュアルパズル</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/ja/app/176855.html"><img src="https://images.downcodes.com/uploads/20240628/logo_667e0d8fe35261.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="ピザタワーノイズDLC Mod"></a> <div class="content"> <h3><a href="/ja/app/176855.html">ピザタワーノイズDLC Mod</a></h3> <div class="cate"> <a href="/ja/category/list_299_1.html">カジュアルパズル</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/ja/app/176584.html"><img src="https://images.downcodes.com/uploads/20240624/logo_6678eedab44bc1.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="ハッピー ブロック ハウス ファミリー シミュレーター モバイル"></a> <div class="content"> <h3><a href="/ja/app/176584.html">ハッピー ブロック ハウス ファミリー シミュレーター モバイル</a></h3> <div class="cate"> <a href="/ja/category/list_307_1.html">模擬ビジネス</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/ja/app/176463.html"><img src="https://images.downcodes.com/uploads/20240622/logo_66764c7e969a71.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="修理フック地下鉄脱出設置"></a> <div class="content"> <h3><a href="/ja/app/176463.html">修理フック地下鉄脱出設置</a></h3> <div class="cate"> <a href="/ja/category/list_309_1.html">飛行射撃</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/ja/app/178338.html"><img src="https://images.downcodes.com/uploads/20240731/logo_66a9c40e360431.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="BodyCam モバイル ゲーム"></a> <div class="content"> <h3><a href="/ja/app/178338.html">BodyCam モバイル ゲーム</a></h3> <div class="cate"> <a href="/ja/category/list_309_1.html">飛行射撃</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">関連情報</span> <a href="/category/list_336_1.html">すべて</a> </div> <ul class="cate_list_template"> <li> <a href="/ja/wz/212997.html"> <div class="text">Bidi Film and Television 公式ウェブサイトのアドレス</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/ja/wz/212996.html"> <div class="text">アサルトリリィインターナショナルサーバーのリチャージ方法</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/ja/wz/212995.html"> <div class="text">Stalker 2: Heart of Chornobyl のスタッターを修正する方法</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ja/wz/212994.html"> <div class="text">フォートナイトのジュースワールドはどこにありますか?</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ja/wz/212993.html"> <div class="text">Star Wars Outlaws でワイルドカード拡張を開始する方法</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ja/wz/212992.html"> <div class="text">北京、人工知能のセキュリティとガバナンスのレイアウトを改善するための新しい研究開発機関を追加</div> <span class="time">2024-11-22</span> </a> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">ユーザーコメント</span> </div> </div> </section> <footer class="footer_template"> <div class="w12_box"> <div class="clearfix"> <div class="l_item"> <img src="https://images.downcodes.com/newdown/images/down-logo-foot.png" alt=""> <div class="f_icon"> <a href="https://www.facebook.com/" title="facebook"></a> <a href="https://telegram.org/" title="telegram"></a> <a href="https://www.tiktok.com/" title="tiktok"></a> <a href="https://www.youtube.com/" title="youtube"></a> </div> </div> <div class="r_item"> <dl> <dt>Products & Services</dt> <dd><a href="javascript:;">Install APK</a></dd> <dd><a href="javascript:;">APK signature verification</a></dd> <dd><a href="javascript:;">APK Download Service</a></dd> </dl> <dl> <dt>Company</dt> <dd><a href="javascript:;">Developer Console</a></dd> <dd><a href="javascript:;">Submit APK</a></dd> <dd><a href="javascript:;">Monetization of traffic through downcodes</a></dd> </dl> <dl> <dt>Legal</dt> <dd><a href="javascript:;">About us</a></dd> <dd><a href="javascript:;">Contact Us</a></dd> <dd><a href="javascript:;">Cooperation</a></dd> </dl> </div> </div> <p>© 2006-2024Copyright All rights reserves</p> </div> </footer> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//tongji.zhangwan.net/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D64MDP2H8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5D64MDP2H8'); </script> </body> <script src="/newdown/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/lazy.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/viewer.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/index.js" type="text/javascript" charset="utf-8"></script> <script> commonMethod.appdetail(); function phpLoadPage(){ this.kid = ''; this.lang = 'ja'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = 'さらに表示をクリック'; $(".loadmore_item").click(function(){ if(_this.resultLen >= 10){ _this.pageIndex = _this.pageIndex + 1 $(".loadmore_item").html("loading...") $.ajax({ async: true, url: _this.requestUrl, type: 'GET', data : { page : _this.pageIndex,kid:_this.kid,lang:_this.lang }, dataType: 'json', timeout: 30000, success: function(result){ _this.resultLen = result.newArray.length if(_this.resultLen < 10){ $(".loadmore_item").html("Reached the end...") }else{ $(".loadmore_item").html(`${moreComment}`) } $(".comment_template").append(_this.mergeHtml(result.newArray)); }, error: function(xhr, status){ console.log('An error occurred...'); }, complete: function(xhr, status){ console.log('Ajax request has ended...'); } }) } }) } phpLoadPage.prototype.mergeHtml = function(data){ var textHtml = ""; var lang = 'ja'; let fromto = 'から'; for(var i=0;i<data.length;i++) { var item= data[i]; var lsHtml = item.mark == 1 && item.status == 1 ? `<span class="tip">${fromto}</span><a href="/${lang}/ask/${item.aid}.html">${item.title}</a>` : ''; textHtml += `<dd> <span class="img_item"> <img src="${item.headlogo}" alt="${item.adduser}"> </span> <div class="main"> <div class="title"> <span>${item.adduser}</span> ${lsHtml} <span>${item.showtime}</span> </div> <div>${item.content}</div> </div> </dd>`; } return textHtml; } new phpLoadPage().init() </script> </html>