メインコンテンツへ移動
黯羽軽揚毎日少しずつ

RSSHelper 正式オープンソース

無料2017-05-13#Ionic#Node#Toy#开源RSS阅读器#ionic示例项目#ionic跨平台#ionic打包iOS#ionic demo

最初は Android ハイブリッドアプリで、このおもちゃで最初のインターンシップ仕事を見つけました

一.プロジェクト背景

トラフィックがなく、ブログを読みたい。だから純粋なテキストで、読みやすいものが欲しくて、RSS を思いつきました

いくつかの RSS 購読アプリを試しましたが、いくつかの重要なソースが解析できませんでした。例えば FEX 週刊、奇舞週刊、国外サイトなど。また、RSS を提供していないウェブページも購読できないため、自分で作る ことにしました：

  • RSS 最新 10 件を抓取表示（目次摘要と post コンテンツを含む）

  • ナイトモード（当時よく夜に見ていました）

当時 Android を少し知っていて、手抜きして Android シェルで WebView コンテナを包む方式で実装し、WebView のコンテンツレイアウト上の巨大な優位性に目を付けました

現在は iOS に移行し、こんな感じです：

[caption id="attachment_1390" align="alignnone" width="625"]rsshelper_ios rsshelper_ios[/caption]

二.Android ハイブリッドアプリ

WebView をコンテナとして、すべてのコンテンツはオフラインページで、サービスはなく、Android 跨域に頼り、永続存储（sqlite）もなく、基本的なメモリキャッシュさえありません

いくつかの問題に遭遇：

  • XML 解析、jsoup を使用

  • スレッド通信（HTML と RSS を抓取して解析するプロセスは子スレッド）

  • 跨域、Android にリクエストさせて、迂回

  • Android と JS 双方向通信（JS インターフェース注入と WebView 履歴スタック管理を含む）

このような非常に弱いおもちゃで最初のインターンシップ仕事を見つけました。当時フロントエンド基礎が悪く、個人网站首页（首页は自分で作成、コンテンツなどは wordpress）以外、見られるプロジェクトがなく、Java は Android おもちゃと SSH で設定した Hello World のみで、この小さなおもちゃが加点項目だったかもしれません（推測）

自分で半年ほど使用し、後により適切な方式 があることを知りました：ionic のような Cordova に依存する跨プラットフォーム方案

三.ionic アプリ

2 ヶ月の前期準備（計画に従って、少し PHP を学び、いくつかの angular）、1 週間で完成：

  • PHP サービスで現場抓取 RSS/HTML

  • メモリキャッシュ + ローカルキャッシュ、シンプルな有効期限戦略

  • 署名发布、正規 Android アプリ

いくつかの問題に遭遇：

  • JSONP 跨域、angular に接続

  • simplexml_load_file 原生モジュールで XML 解析

  • splash 閃屏、inappbrowser プラグインバージョン互換性

純粋に手書きした Android アプリと比較して、ionic 開発はより多くの問題に遭遇し、しかも解決が難しく、多くの奇妙な問題が定位できず、google するしかありませんでした

四.PHP サービス更新

simplexml_load_file 原生モジュールは脆弱で、不合法な XML/HTML に遭遇するとエラーを報告し、XML 角度から RSS を解析するには各種 feed 形式を手動で互換する必要があります。例えば RSS 2.0、Atom 1.0 など

RSS は simplexml を交換しましたが、一部の不规范な feed 形式をサポートせず、後に RSS は原生 XMLReader に交換し、HTML は DiDom を使用し、基本的に安定

構造も拆分リファクタリングを実施：

  • Composer モジュール管理器を導入

  • HTML 解析規則を設定化

しかし奇舞週刊、FEX 週刊などの feed が解析できず、PHP 生態でより良い RSS 解析方案を見つけられませんでした

五.サービス node へ移行

元の PHP サーバーは HTTPS をサポートできず（廉価仮想ホスト制限）、HTTPS に変更するついでに node で書き直し、生態の巨大な作用 を発見：

  • RSS 解析に feedparser を使用

  • HTML 解析に cheerio を使用

feedparser は各種奇妙な不规范な XML を解析でき（どうやら誤り訂正容錯処理があるようです）、cheerio も奇妙な問題（BOM ヘッダーによる文字化けなど）に遭遇せず、以前の PHP で選択がなかったよりずっと良く、繁栄した生態が逆に言語の発展を推進します

本来あるべきサポートを追加：

  • 定時抓取

  • サーバー側メモリキャッシュ

サービス機能はまだ比較的シンプルですが、現在抓取部分は安定しています

六.iOS 実機インストール打包

Android 打包发布は以前に言及：[ionic 開発跨プラットフォーム App 共通問題](/articles/ionic 開発跨プラットフォーム app 共通問題/#articleHeader9)、環境要求が比較的面倒

iOS 打包には OSX 環境と Xcode が必要で、現在実機デバッグは 99 ドル認証の開発者アカウントが不要ですが、App Store 上架には still お金を払う必要があります

0.環境

  • OSX @10.12.x:

ios10.x アプリ構築をサポート、低バージョンは ios9.x アプリのみ構築可能

  • Xcode @8.x:

ios10.x アプリ構築をサポート、Xcode 7.x は ios9.x アプリのみ構築可能

注意：Xcode バージョンアップグレードは OSX システムバージョンアップグレードに依存し、OSX 10.9 は App Store から Xcode 8 をインストール/更新できません

1.iOS シミュレーターサポートをインストールし、プラットフォームを追加

npm install －g ios-sim
ionic platform add ios

2.構築

ionic build ios

3.シミュレーター実行

ionic emulate ios

4.実機インストール

cd <path/to>/myapp/platforms/ios
# Open myapp.xcodeproj with Xcode
# USB connect the device
# Click Product>Destination>device name
# Click the triangle button(Build and run the current scheme)

注意：Xcode は開発者アカウントを設定する必要があり、有料認証は不要で、合法な apple id であればよいです。アプリ起動時は信頼されていないと提示され、設定で開発者を信頼する必要があります

七.プロジェクトアドレス

Github：https://github.com/ayqy/RSSHelper

事実上 ionic の最初のバージョンはすでにアップロードされていましたが、あの時はまだシンプルで脆弱で設計のないアプリで、現在はやや良くなり、シンプルで堅牢になりました。次のステップは機能を填充し、自主購読、ユーザー管理をサポートした後、小型ツールアプリになります

いくつかの后续の計画があり、总有一天完成します：

  • UE Optimizing

    • UI Style & Theme

    • Interaction

  • Function Enhancement

    • Login & User Management

    • Constom catelogy list

    • History & Favorite

    • Feedback

後話

WebView の他に、筆者と不解の縁があるもう一つのキーワードはベジエ曲線です

永遠に完成しない文字認識プロジェクトで初めてベジエ曲線を聞き、Web Audio で曲線スペクトルを制作する時に制御点を計算する信頼できる方法を見つけ、卒業の Android 落書きアプリのコアもベジエ曲線でした

水面に落ちた羽が広がる波紋のように、本当に時間をかけたものは、いつも奇妙な用途があります

コメント

コメントはまだありません

コメントを書く