北港媽祖もマテリアルデザインを理解しています！携帯電話で全国の媽祖をライブでフォローできます_html/css_WEB-ITnose

「はじめに」: エンジニアの達成感は、必ずしも仕事から得られるものではなく、自分の職業で学んだことを自分の仕事に活かすことができることから得られます。人生を送り、貢献する。媽祖回路は北港の人々の心の中にある民俗行事であるだけでなく、子供の頃から見て育った思い出でもあります。北港のエンジニアは、学んだことを活用して媽祖周遊用のウェブサイトを立ち上げ、携帯電話から媽祖周遊イベントに参加できるようにしました。以下は著者の一人称です。

久しぶりにPO記事を投稿します><

最近は地元のイベントのホームページ作成のお手伝いで忙しくしています。ボランティアのヘルパーであり、非公式で利益のない独立したサービス (XD) ですが、私はこの Web サイトを毎年作成する上で常に画期的な進歩を遂げています (間違いないでしょうか?)。バックエンド、システム、デザイン、カット、公開に至るまで、一人で完成させようとしています

話が逸れてしまいましたが、この Web サイトについて共有したいのは、フロント、バックエンド、およびシステムの部分です。

コンテンツが OK でない場合は、

「Bengang Welcomes Mazu」ウェブサイト

デザインからスタートし、マテリアルデザインの視点を参考にレイアウトやプロセスを設計しましたが、もちろん、携帯電話とWebページのパフォーマンスには若干の違いがありますが、全体的には仕様を参照するようにしていますXＤ

PHP 今回は非常にトレンディーなphp7を使用しましたが、クローラーが高速化されたため、動作が速くなったようです速度が速くなったので、全体的には非常に満足していますが、いくつかの機能が必要です。少し調整しましたが、全体的には非常に健全です。

この地図情報と寺院の縁日を組み合わせたので、JavaScript は主に Google Maps API の使用に使用されます。 Googleマップの使い方が大好きなので、当日事故がなければオンライン用のGPSと組み合わせて使いたいと思います。

CSS 部分には、compass scss と JavaScript を使用します。つまり、フロントエンドとバックエンドを自分で処理するため、いくつかの修正を加えました。フレームワーク (CodeIgniter) を使用して、これらの静的 CSS コードと JavaScript コードを運用中に自動的にマージおよび縮小できるようにします。

静的ファイルの処理では、S3 の強力なスペース機能を使用して、Web サイトの画像ファイル リソース、js、はい、画像ファイルが大きい場合は、TinyPNG を使用して画像を圧縮し、S3 にアップロードします。 >

ところで、もちろん上記はプログラムによって実行されます:)

次に HTML が登場します。基本的に、Web サイトのフロントエンドは多くの記事と紹介文を使用するため、キャッシュが多く、この部分はファイルキャッシュのみを使用します。当初は Redis を使用して実装する予定でしたが、メモリは MySQL に任せました... (RDS は開いていません。MySQL は同じ EC2 上にあります)。サーバー）

出力用のキャッシュがあるので、ちなみにHTMLも縮小していますが、これはHTMLキャッシュの出力なので、訪問者数の記録をphpで実行することはできません。 +1 なので、この部分では Ajax を使用して人気記録の復活を実装します。

最後に、SEO と関連する検索設定、robots.txt、サイトマップについては説明する必要はありませんが、今回はスキーマ、Google AMP、JSON-LD 構造も少し追加しました。これらはすべて、検索エンジンが食べたいものを提供することです。

実際、私はその過程で多くの経験を学び、今回は主に Tokyo t2.micro の EC2 を使用し、S3 の Web トラフィックを使用しました。私、GA のリアルタイムの人数は一時 1,900 人を超えていました。おそらく一部のページは S3 を使用しているので、耐えられるでしょう。

これは私がこれまでに作成した中で最もトラフィックが多い Web サイトであり、個人的なマイルストーンでもあります。

上記は私の経験と考えを共有するものであり、ウェブサイトを作成した当初の意図に戻り、私は地元を愛し、地元のために自分の役割を果たしたいと思っています。子供の頃からのこの信念を裏付ける専門知識とテクノロジーはとてもシンプルです。

この記事は少し長すぎますが、北港に来たい方はぜひ読んでみてください。

記事が再版の議論に適していない場合は、私にお知らせください<

質問や疑問がある場合は、大歓迎です:)

(この記事は PTT_Soft Job バージョンで公開され、著者の Wu Zhengxian から公開および転載の許可を得ています。関連作品、GitHub リソース、画像出典: 許可なく転載しないでください。)