时光

时光的时光轴

寄以时间,予以文字
telegram
github
微信公众号

日本語では、"让课程表通过日历更新"は次のように翻訳されます: カレンダーを使用してスケジュールを更新する

81696c97-741c-466d-8810-9276bdaa993b.JPG

あなたの手元の時間割も同じですか?すべての授業が重なり合い、毎回授業の前に週数を計算したり、教師を探したり、時間を計算したりする必要があります。おそらくしばらくすると、すべてを覚えることができるかもしれませんが、すぐに学期が終わり、またすべてを最初からやり直す必要があります。

私も入学前にこの問題について調べました。いくつかのオンラインで推奨されている、アプリストアのランキングが高い「時間割」アプリを試しましたが、正直なところ、それらはむしろ大学生の出会いの場のようでした。

「小愛時間割」というアプリは私の感じにかなり合っていて、個人開発者の適応も受け入れていましたが、2 回申請しても返事がありませんでしたし、コミュニティのグループでもよくバグが報告されていました。また、簡単な体験の過程でいくつかの問題も見つけました...


しかし、その時私はデフォルトの「カレンダー」アプリに目を向けました。かなり以前、Apple のデフォルトのカレンダーは中国の祝日をサポートしていませんでした(困りました)。その問題を解決するために、ネット上には多くのカレンダーを購読する方法がありました。この方法は、スケジュールをサーバーから配信するだけでなく、定期的に更新することもでき、最も重要なのは、作成されたスケジュールが通常のスケジュールリマインダーと同じ機能を持っていることです。これにより、実装方法に非常に興味が湧きました。

プロトコル#

まず、他の人がどのように実装しているのかを理解する必要があります。

サブスクリプションリンクにアクセスすると、.icsファイルがダウンロードされ、これはiCalendarプロトコルに属していることがわかります。このiで始まる単語は私にすぐに Apple を思い出させましたが、関連が多いことがわかりました。そして、配布プロトコルはWebCalという標準であり、スケジュールの購読はこれらの 2 つの技術を基に実現されています。

フォーマットに関する詳細な情報はiCalendarで見つけることができます。

iCalendar フォーマット#

私のレベルに基づいて、フォーマットの重要な部分を最大限に説明しましたが、まだ間違いがあるかもしれませんので、ご指摘いただければ幸いです。

Apple カレンダーからエクスポートした.icsファイルを使用して、そのフォーマットを理解するために次のようにしました:

BEGIN:VCALENDAR
VERSION:2.0
X-WR-CALNAME:フライトプラン
X-APPLE-CALENDAR-COLOR:#63DA38
BEGIN:VEVENT
DESCRIPTION:離陸および着陸時間はフライト計画の時間であり、参考用です。
DTEND;TZID=Asia/Shanghai:20200901T170000
DTSTART;TZID=Asia/Shanghai:20200901T150500
SUMMARY:HO1072便に搭乗 長沙黄花-上海浦東 現地時間15:05-17:00[航旅纵横]
URL;VALUE=URI:umetrip://OPENAPP
END:VEVENT
END:VCALENDAR

いくつかのノードがありますが、例えば「動的タイムゾーン」は省略しました。テストの結果、実際のスケジュールには影響しないことがわかりました。また、東 8 区向けのチュートリアルとして、私にとっては非常に複雑に見えました。

このファイルは、「BEGIN」と「END」の 2 つのヘッダで囲まれています。詳細なファイルフォーマットについては、公式ウェブサイトでさらに情報を見つけることができます。

  • X-WR-CALNAME:カレンダーの名前を定義します。
  • X-APPLE-CALENDAR-COLOR:Apple カレンダーでアイコンの色を定義します。

次に、「BEGIN」と「END」のセクションがあり、これによってイベントが定義されます。

  • CREATED:作成日
  • DESCRIPTION:備考 / 説明
  • SUMMARY:タイトル
  • DTEND;TZID:終了日(タイムゾーン指定)
  • DTSTART;TZID:開始日(タイムゾーン指定)
  • URL;VALUE:イベントの URL アドレス、クリックできます

Outlook のウェブ版を使用して、自分のカレンダーを簡単にテストできます。
そのため、私は同じように書いてみました:

BEGIN:VCALENDAR
VERSION:2.0
X-WR-CALNAME:時間割
X-APPLE-CALENDAR-COLOR:#63DA38
BEGIN:VEVENT
DESCRIPTION:教師:曹華山\n学分:5.0
DTSTART;TZID=Asia/Shanghai:20201003T160000
DTEND;TZID=Asia/Shanghai:20201003T193000
LOCATION:教學樓C404
SUMMARY:ウェブデザイン総合演習
URL;VALUE=URI:hello
END:VEVENT
END:VCALENDAR

テキストファイルに保存し、拡張子を ics に変更すると、Outlook にインポートして追加した効果が見られます。

a355fdfd-e4f8-49fa-a8d9-a544cb91c5c7.png

デバッグの過程で、各カレンダーにはいくつかの「固有のパラメータ」があることがわかりました。たとえば、Apple カレンダーの場合、「X-APPLE-CALENDAR-COLOR」はイベントの表示色を定義することができます。

今後の研究では、いくつかのカレンダーアプリを試し、どのような固有のパラメータがあるかを調べて、時間割をより特徴的にする予定です。次に、時間割データを変換します。

データ変換#

まず、学校の教務システムから提供される時間割を構造化データに変換する必要があります。学校によって異なるため、ここでは私の学校の教務ウェブサイトを例にします。

ただし、私の学校は非常に特殊で、時間割をクエリすると画像が返されます...

cf63f138-6f9f-4d78-bf48-246853433bc1.png

これは、あなたの時間割を盗まれることを心配しているのでしょうか...

しかし、幸いなことに、時間割を「科目」または「教室」でクエリすると、処理可能なテキストが返されます(なぜこのように設計されているのかはわかりません)。

それでは、ここから始めてみましょう:

科目でクエリ#

科目のクエリロジックを簡単に見ると、科目リストが得られます。ただし、教務システムのクエリにはなんと、キャプチャがあります:

fbfd0c90-ada2-4fc1-82b8-155f5a413dc6.png

しかし、このキャプチャは実際には非常に単純なものなので、簡単な OCR で解決しました。いくつかの試行錯誤の結果、次のようなデータを整理しました:

	array(2) {
  [0]=>
  array(6) {
    ["name"]=>
    string(25) "130601|顧客関係管理"
    ["teacher"]=>
    string(6) "韓梅"
    ["type"]=>
    string(19) "専門科目/必修科目"
    ["week"]=>
    string(4) "1-18"
    ["day"]=>
    string(11) "火[1-2節]"
    ["location"]=>
    string(13) "教学楼A401"
  }
  [1]=>
  array(6) {
    ["name"]=>
    string(28) "130625|ビジネス交渉とエチケット"
    ["teacher"]=>
    string(9) "王晓霞"
    ["type"]=>
    string(19) "専門科目/必修科目"
    ["week"]=>
    string(4) "1-18"
    ["day"]=>
    string(11) "水[3-4節]"
    ["location"]=>
    string(13) "教学楼C502"
  }
}

次に、教務システムから返される学年暦、授業時間に基づいて、時間割データ全体を処理し、ics ファイルを生成することになります。

ICS ファイルの生成#

目標のフォーマットに従ってデータを組み立て、前述のようなものになります:

BEGIN:VCALENDAR
VERSION:2.0
X-WR-CALNAME:時間割
X-APPLE-CALENDAR-COLOR:#63DA38
BEGIN:VEVENT
DESCRIPTION:教師:曹華山\n学分:5.0
DTSTART;TZID=Asia/Shanghai:20201003T160000
DTEND;TZID=Asia/Shanghai:20201003T193000
LOCATION:教學樓C404
SUMMARY:ウェブデザイン総合演習
URL;VALUE=URI:hello
END:VEVENT
END:VCALENDAR

ファイルを Outlook にインポートすると、次のような効果が得られます:

購読する#

WebCal プロトコルを実装するのは非常に簡単で、本質的には http リクエストに属します。ただし、応答ヘッダに次のように追加するだけです:

Content-type: text/calendar; charset=utf-8
Content-Disposition: attachment; filename="table.ics"

これにより、カレンダーアプリで正常に購読できるようになります。

ただし、iCalendar の仕様を参考にすると、各イベントには「UID」フィールドが必要です。これにより、クライアントがイベントを識別して更新できるようになります。この UID は仕様があるものの、実際には他のイベントの UID と異なるだけであれば問題ありません。ここでは、単一の科目の名前、日付、および時間を使用して md5 ハッシュを計算するだけで簡単に実装しました。

最終的な効果#

携帯電話では:
87eba7a3-1abf-4b77-a65f-87320789c9e4.png
Outlook では:
c4b7f146-b0b4-4f31-b325-8dec435fc9aa.png
ちなみに、Windows 10 以降のシステムでは、Outlook を使用してシステムのカレンダーに購読することができ、ロック画面でのリマインダーもサポートされています!

ユーザーフレンドリーにする#

基本的なフローは完了しましたが、最終的なユーザーは学生なので、サービスをシンプルで使いやすくする必要があります!

現在、更新タスク(教務システムからデータを毎週取得する)をクラウド関数にデプロイし、静的ファイルを直接生成しています。フロントエンドはどこかに置いて、サービスを提供するだけで十分です。

データの戦略は、教務システムから過去 2 週間、今週、未来 4 週間のデータのみを取得することです。これにより、更新ごとにより良いパフォーマンスが得られます。

現在、サービスはサイトにデプロイされています:時間割を購読
現在、テスト済みで、Apple デバイス、Windows 10 および Windows 11、および Xiaomi、Huawei、Vivo デバイスでインポートできます。

その他の Android デバイスでは、ICSX5というアプリを使用できます。これにより、ほとんどの Android デバイスに対応できます。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。