HTML、CSS、Javascriptのベストプラクティス:Chrome拡張機能

Codecademyを終了したばかりの人向け。

プログラミングを勉強するとき、独学する最も効率的な方法は製品を開発することです。このアプローチは、プログラミングコースを受講してプログラミングスキルを向上させるよりもはるかに高速です。

通常、人々はWebプログラミングでHTML、CSS、および基本的なJavascriptを使用したプログラミングを学び始めますが、サーバー側の部分に到達する前に意味のあるアプリケーションを作成することは困難です。

だから、私はいつもこのように生徒を説得しようとしました、

サーバー側の学習を開始し、アプリケーションを起動すると、楽しくなります。あきらめないでください。

しかし、多くの学生はHTMLとCSSの段階でプログラミングの学習をやめます。

(たぶん、HTMLから始めることは、人々がプログラミングを勉強することを奨励するための良い考えではありません。)

ある日、Chromeブラウザを開いて仕事を始めました。それから、HTML、CSS、およびJavascriptのみを使用して構築できる最高のアプリケーションを実際に使用していたことに気付きました。

勢い

簡単に言うと、この拡張機能をChromeにインストールすると、新しいタブを開くたびに、非常にクールな写真の上に挨拶メッセージが表示されます。ダウンロード数はすでに数百万です。これを使用していない場合は、インストールすることを強くお勧めします。このアプリケーションは新しいタブごとに2〜3秒間しか表示されないかもしれませんが、その少しの間リラックスできます。

このアプリケーションのクローンを作成してみましょう!

フェーズ1:準備するもの

  • HTML
  • CSS
  • Javascript
  • 素敵な写真:しぶきから
  • manifest.json(Chromeからロードされる)

アプリケーションをすばやく開発した方法は、未来ではなく現在に焦点を当てることでした。もちろん、ソロプロジェクトではない場合は、具体的な計画を立てることが重要です。しかし!自己意欲の寿命は非常に短いため、何かを開発したいと思うときは、すぐにそれを完成させる方が良いでしょう。製品を改善する他のオプションについて考え始めると、プロジェクトを完成させることはできません。

シンプルにしましょう。

1つの大きな画像、1つの大きな挨拶メッセージ、そしておそらく現在の時間で1つのWebサイトを作成しています。

写真を探す

UnsplashのWebサイトにアクセスすると、たくさんのクールなライセンスフリーの画像を見つけることができます。

私はノルウェーにいるので、この写真を使用することにしました。
ありがとう、Vidar Nordli-Mathisen。 (彼らの才能を認めることは常に重要です。)

UnsplashのVidar Nordli-Mathisenによる写真

プロジェクトを作る

シンプルシンプルシンプル

1つのHTMLファイル、1つのCSS、1つのJavascript、および1つのマニフェストファイル。

必要なのはそれだけです。

さて、これは最初のバージョンです。

これはシンプルなウェブページです。ここで、Chromeからロードするには、次のmanifest.jsonファイルを追加する必要があります。

「chrome_url_overrides」は、このアプリケーションで最も重要なプロパティです。

拡張機能ページに移動します「アンパックされたロード」ボタンをクリックしますプロジェクトフォルダー内の選択ボタンをクリックします謙虚な拡張子…新しいタブを開くたびに、シンプルなWebページが表示されます。

さあ、最初のプロジェクトが終わりました。

この機能でのみ使用できます。 「不可能は何もありません」、「ただそれをやる」、「私たちは世界です」、何かなど、自分のやる気を起こさせたいものにテキストを編集できます。または、代わりに家族の写真を置くこともできます。

しかし、これよりも良くしましょう。

フェーズ2:追加するもの

  • 現在の時刻
  • 名前変更機能
  • 画像変更機能

これら3つの新機能を含めるために、HTMLファイルを次のように変更しました。

CSSも変更する必要があります。

新しいページは次のようになります。

ああ、私はそれが勢いだと思った:)

manifest.jsonの更新

次に、2つの機能を追加します。

まず、このアプリケーションに入力フォームを追加して、人々が名前を付けられるようにします。 「Hello、Jungwon Seo」メッセージの下にこのフォームを追加します。

これはいです、修正しましょう

入力タグの新しいスタイル。

さて、はるかに良い。

これからは、この情報を保存する方法について考える必要があります。

「Cookie」を使用しますが、ChromeブラウザからHTMLファイルを開くだけでは「Cookie」を使用できません。 Chrome拡張機能として読み込んだ後にテストしてみてください。

前回の投稿には、保管許可に関する誤った情報がありました。 「Cookie」を使用するために「ストレージ」権限は必要ありません。

また、私はまだjQueryの使用を好むので、追加します。

jQuery CDNを追加しようとしましたが…

心配しないで、manifest.jsonにもう1つのプロパティを追加するだけです。

これで、script.jsファイルにコーディングする準備が整いました。

最初にやりたいことは:

  1. ユーザーに名前を入力させます。
  2. Cookieに保存します(最も一般的なコードのみを使用しましょう)
  3. 入力フォームをフェードアウトし、グリーティングメッセージをフェードインします。

さて、本物の開発者のように考えなければならないのはこれが初めてです。

ケース1:初めて開くとき。
ケース2:名前を入力した後に開くとき。

目に見えるものと目に見えないものを決める必要があります。

事例1:
時間:現在の時間
挨拶メッセージ:あなたの名前は何ですか?
入力フォーム:表示

ケース2:
時間:現在の時間
挨拶メッセージ:こんにちは、<名前>!
入力フォーム:非表示

また、これら2つのケースを区別する方法は、Cookieにキー「username」があるかどうかを確認することです。

時間更新機能を使用すると、新しいscript.jsは次のようになります。

名前を入力する前に名前を入力した後

さて、動作しているようです。

もちろん、トランジション効果など、まだ改善が必要なものがいくつかあります。

しかし、私はあなたにそれをあげます。

さて、他に何が?

ユーザーが写真を変更できる機能を追加する必要があります。

Unsplash API

アプリを簡単に登録し、このページからトークンを取得できます。

Unsplash APIを使用するには、開発者ページでアプリケーションを登録する必要があります。

[新しいアプリケーション]をクリックすると、アプリケーションを登録できます。

デモ製品の場合、1時間あたり最大50件のリクエストを使用できます。それで十分です。

必要に応じて、以下のフォームに記入してください。

任意の名前を入力してください

アプリケーションを作成すると、リダイレクトされたWebサイトから「キー」部分が表示されます。

私はこのアプリケーションを削除しましたので、試してみてください。

「アクセスキー」をコピーして、JavaScript変数「ACCESS_KEY」に割り当てるだけです。

検索APIを使用します。

これがシナリオです。すべての人々は異なる興味を持っています。そこで、まず彼らの興味を聞いてから、Unsplash APIを使用してその画像を検索します。その後、12時間ごとに画像を更新し続けます(同じキーワード、異なる画像)。

したがって、AJAX関数は次のようになります。

そして、この関数は興味を入力した後に呼び出されます。

そして、ご想像のとおり、再び開発者になる必要があります。

ケース1–1:初めて
ケース1–2:名前の後
ケース2:興味を入力した後
ケース3:12時間後。

さて、一つ一つ決めましょう。

ケース1〜1では、すべての画像関連部分を非表示にするだけです。これを飛ばす。

ケース1〜2では、関心のある入力フォームのみを示しています。

ケース2では、AJAXを呼び出して画像情報を保存します。

ケース3では、有効期限を12時間に設定し、Cookieが空の場合は、AJAXリクエストを再度呼び出します。

キーワード:ロンドン

はい、動作しています。

フェーズ3:最終タッチ

写真家の称賛は必須ではありませんが、なぜですか?

さらに数行のコードを記述し、写真家の名前とページの左上にクレジットを追加できます。

Cookieを初めて確認するときに写真家の情報を使用できるようにします。

もう1つ、誰かが興味を変えたいとしたらどうでしょうか。

人々が興味を再入力できる機能を追加しましょう。

ボタンをクリックする前に

行くぞ「新しい興味の選択」ボタンをクリックすると、以前に興味を入力した入力フォームが開きます。

ボタンをクリックした後

フェーズ4:独自の製品を作成します。

プロセスを最初から最後まで体験してほしいだけです。それでも、あなたが学んだスキルを本当に吸収するには、自分でこれを開発する必要があります。

ランダム画像を選択する方法など、含めるとよいと思われるいくつかの機能が必要です。または、私のコードのいくつかは非効率的だと思うかもしれません。より良いコードを使用して、同じ製品のバージョンを改善できます。

頑張ってあきらめないで!

完全なバージョンはこちらで確認できます:https://github.com/thejungwon/MyChromeExtension

この記事はNoteworthyで公開されており、10,000人以上の読者が毎日訪れて、私たちが愛する製品を形作る人々やアイデアについて学びます。

出版物をフォローして、ジャーナルチームが紹介するその他の製品とデザインのストーリーをご覧ください。