GitHub 英語トップチャートを把握するなら！「GitHub English Top Charts」

概要

普段みなさまはソフトウェアの人気のある技術などをどのように調査・把握・研究されていますでしょうか？

口コミだったり同僚の方からの会話からだったり、GitHub 上のスターの数だったりするでしょうか？

私は上記全てからよく最新技術だったり最近モダンな技術を把握して自分で触りながらよく遊んでいますが、その同僚の方などは一体どうやって最新技術などを把握しているのかを知りたくなる時がよくあります。

そんな中、なんと GitHub 上のトップチャートを親切にプログラミング言語別にまとめて下さっているリポジトリがあることを知り、とても参考になるなと思ったのでこちらでご紹介しようと思います。

今回ご紹介する OSS は、GitHub 英語トップチャートをプログラミング言語別にまとめてくれている OSS「GitHub English Top Charts」になります。

「GitHub English Top Charts」では全ランキングや、成長ランキング、新規プロジェクトランキングなどのカテゴリで人気のある技術をまとめてくれています。

それでは早速詳細についてみていきましょう。

目次

特徴

概要の部分でも述べましたが、トップチャートランキングは以下のようにカテゴリ別されています。

• 英語総合ランキング
  • ランキングのために英語のドキュメントを含むプロジェクトを除外し、誰もが優れた英語のプロジェクトを発見し、他の話し言葉の干渉を取り除くのに役立ちます。
  • 選択ロジックは、アクティブな状態を維持することと、星の総数です。
• 英語成長ランキング
  • 成長率の高いプロジェクトを誰もが見つけられるようにします。
  • 選択ロジックは、アクティブな状態を維持し、毎日のライジング スターの平均を維持することです。
• 英語新規プロジェクトランキング
  • 過去 1 年間の潜在的な新しいプロジェクトを誰もが発見できるようなります。
  • 選択ロジックは、アクティブな状態を維持し、過去 1 年間に高い星を付けて作成することです。
• ソフトウェアとナレッジプロジェクトの分離
  • これで、優れたソフトウェア プロジェクトを正確かつ効率的に見つけることができます。ナレッジ プロジェクトのみを参照することもできます。
  • 存在は合理的です。プロジェクトには高低の区別はありません。最も重要なことは、誰もが必要なものを効率的に入手できることです。

利用手順

GitHub 上のリポジトリにある README.md を参照することで利用することができます。

github.com

使用感

早速こちらの OSS についてみてみました。

ここでは一例ですが、Software > All Language ランキングについてみてみます。

こちらでは星の数の多さでランキングが決定されており、1 位は日本でも人気のあるWeb アプリフレームワーク「Vue」、2 位も日本で人気のある Web ライブラリ「 React」などがランクインされていました。

3 位を見てみると最近話題の「Tensorflow」がランクインされており、こちらも世界的にも人気のあるフレームワークがランクインされていました。

全言語ランキングではよくみるフレームワークがランクインしており、こちらのランキングを見て話題のフレームワークや技術を勉強してみるといいかもしれません。

まとめ

今回は、GitHub 英語トップチャートをプログラミング言語別にまとめてくれている OSS「GitHub English Top Charts」についてご紹介しました。

話題のソフトウェア技術やフレームワークについて知見を深めたい方や、ここではご紹介しな方ですが、新規プロジェクトフレームワークなどについて最新技術を追ってみたい方は、ぜひこちらの「GitHub English Top Charts」を参考にされてみてはいかがでしょうか？

自分もこちらの OSS を参考にしながら、最新技術や話題のフレームワークについて知見を深めていきたいと思います。

ライセンス

Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License

リンク

github.com

Microsoft の親しみやすくモダンな絵文字コレクション！「Fluent Emoji」

概要

みなさまはテキストチャットやメールなどで絵文字を使用していますでしょうか？

私は知り合いとのチャットなどでは積極的に絵文字を使用しており、自分のその時の気分に合った絵文字がなぜか必ずあって、絵文字を作成しているデザイナーなどはとてもすごいなと感動したことが多々あります。

そんな最中、GitHub をみていたら Microsoft 社が絵文字をまとめているリポジトリをOSS として公開していたので、今回はこちらについて紹介しようと思います。

今回ご紹介する OSS は、Microsoft の親しみやすくモダンな絵文字コレクション「Fluent Emoji」になります。

今回は絵文字のコレクションがあるよということなので、特段いうことはあまりないですが、詳細についてみていきましょう。

目次

特徴

こちらの「Fluent Emoji」ですが、かなりの数のアイコンがコレクションとして纏まっています。

そして一つ一つの絵文字に対して、3D アイコンだったり、2D アイコン、白黒アイコンが作成されていました。

以下では例として、哺乳瓶（Baby bottles）を紹介します。

3D（PNG）

Flat（SVG）

High Contrast（SVG）

利用手順

GitHub 上のリポジトリをクローンするなどして利用することができます。

github.com

まとめ

今回は Microsoft の親しみやすくモダンな絵文字コレクション「Fluent Emoji」をご紹介しました。

絵文字のコレクションの OSS ということで特に詳しくいうことはないですが、かなりの絵文字がコレクション内にまとめられていました。

これまでみたことある絵文字や、全く新しい絵文字などもあるかもしれませんので、もし気になった方はぜひ一度、こちらの「Fluent Emoji」を参照されてみてはいかがでしょうか？

ライセンス

MIT License

リンク

github.com

JavaScript の高度な問題集！「JavaScript Questions」

概要

ソフトウェアエンジニアの方やプログラミングをおこなっている方、普段開発に使用している言語は何をお使いでしょうか？

2022 年第一四半期のプログラミング言語ランキングなるものがあり、Top 20 で第 1 位となったのが JavaScript で、おそらく多くの方にっても馴染みのあるプログラミング言語ではないでしょうか？

参考：プログラミング言語の人気ランキング、順位変動は縮小傾向にある――RedMonkが調査：DartがRustに並ぶ - ＠IT

atmarkit.itmedia.co.jp

そんなよく知られているプログラミング言語である JavaScript ですが、こちらのプログラミング言語についてもっと知識をつけたい、自分の JavaScript の知識がどれくらいあるか確認してみたいと思った事はないでしょうか？

力試しを行ってみたいと言う方も、特にそこまで思い入れがない方でも、もし JavaScript に興味があるならば今回ご紹介する OSS を一度ご覧になってみると、面白いかもしれません。

今回ご紹介する OSS は、2022 年第一四半期のプログラミング言語ランキングで第 1 位となった JavaScript の高度な問題集「JavaScript Questions」になります。

こちらの問題集のオリジナルは英語ですが、日本語翻訳されていますので、英語が苦手な人でも取り組みやすいものかと思います！

それでは早速こちらの「JavaScript Questions」について詳しくみてみましょう！

目次

特徴

こちらの OSS の特徴ですが、18 カ国の言語に翻訳されていることです。

非常に多くの言語に翻訳されているため、より多くの方にとって使いやすいものになっています。

• 🇸🇦 العربية
• 🇪🇬 اللغة العامية
• 🇧🇦 Bosanski
• 🇩🇪 Deutsch
• 🇬🇧 English
• 🇪🇸 Español
• 🇫🇷 Français
• [🇮🇩 Indonesia](https://github.com/lydiahallie/javascript-questions/blob/master/id-ID/README.md
• 🇮🇹 Italiano
• 🇯🇵 日本語
• 🇰🇷 한국어
• 🇳🇱 Nederlands
• 🇧🇷 Português Brasil
• 🇷🇺 Русский
• 🇹🇭 ไทย
• 🇹🇷 Türkçe
• 🇺🇦 Українська мова
• 🇻🇳 Tiếng Việt
• 🇨🇳 简体中文
• 🇹🇼 繁體中文

利用手順

GitHub のリポジトリ上の REAMDE.md を参照することで、利用することができます。

なお、以下のリンクから、日本語翻訳版の問題集にアクセスすることができます。

github.com

使用感

早速自分も 1 つ解いてみました。

上記の問題は特に何も手こずらず解答できましたが、最初の 1 問目ですしね（笑）。

このような形で、JavaScript の問題がたくさん掲載されていますので、ぜひ JavaScript の知識試しをしてみたい方は問題を解いてみることをお勧めします！

まとめ

今回は JavaScript の高度な問題集「JavaScript Questions」をご紹介しました。

JavaScript は今でも人気のあるプログラミング言語で、今後も積極的に使用されることでしょう。

これまで JavaScript を使用してプログラミングをおこなっていた方も、これから JavaScript を勉強しようとしている方も、ぜひこちらの OSS「JavaScript Questions」を利用して知識をつけてみてはいかがでしょうか？

ライセンス

MIT License

リンク

github.com

Nuxt 3 で作成した動画配信サービスのサンプル！「Nuxt Movies」

概要

近年ではインターネットやスマートフォン・タブレットなどが普及し、ネット環境があればどこでも動画や映画を簡単にみることができるようになりました。

少し前（平成初期）までは、動画や映画などをみる際には書店やレンタル店などで DVD を借りてみていましたが、今や動画配信サービスを利用して動画を見る時代になりました。

動画配信サービスといえば Prime Video や Hulu、Netflix などが有名どころでしょうか。

上記の 3 つの動画配信サービスなどの UI はいずれも動画の一部を出して紹介しているような UI になっていますよね。

このようなデザインを自前で最初から作るのはとても大変です。

しかし、Nuxt 3 で動画配信サービスの画面サンプルが OSS として公開されていましたので、今回はこちらについて紹介したいと思います。

今回ご紹介する OSS は、Nuxt 3、Vue 3、UnoCSS、Image Module、The Movie Database API、TypeScript で作成された動画配信サービスサンプル「Nuxt Movies」になります。

パッと見た感じ、いかにも動画配信サービスのそれですよね！

それでは早速こちらについて詳しく見ていきましょう。

目次

特徴

特徴としては、以下のライブラリ・フレームワークで、いかにも動画配信サービスの画面を構築している点です。

• Nuxt 3
• Vue 3
• UnoCSS
• Image Module
• The Movie Database API
• TypeScript

なお、動画・映画の情報は、The Movie Database からデータを取得しています。

利用手順

利用方法としては、「Nuxt Movies」のリポジトリをクローンして、ローカルサーバーで起動させることで閲覧可能です。

git clone https://github.com/nuxt/movies.git
cd movies

movies へ移動したあとは、pnpm コマンドで必要なモジュールをインストール・サーバー起動を行います。

corepack enable
pnpm install
pnpm dev

ローカルサーバー起動後は、http://localhost:3000/ へアクセスして、動作していることを確認します。

または、Live Demo が公開されているので、動作結果だけまずは確認してみたい方はこちらからでも良いでしょう。

movies.nuxt.space

使用感

実際に私もこちらの「Nuxt Movies」を触ってみました！

ホーム画面から順に見ていきましたが、有名どころの動画配信サービスと遜色ない感じの出来栄えで、全然物足りなさなどなく完成度が高いです！！

さらに、概要だったり動画・映画の予告動画、画像、出演者などの情報もまとめられているので、動画配信サービスとして本当に利用できそうです。

また、動画も YouTube を埋め込んでユーザーに表示させるような作りになっているので、こちらの Web ページ内で完結されているのも良いですね！（下手に外部ページに飛んでしまうのを嫌うユーザーもいますし、再度読み込みが入ると冷めてしまいますしね。。）

基本は英語表記で海外向けの映画が紹介されていますが、こちらは使用している API が外国映画のものであるためで、日本仕様にしたい場合は、日本の動画・映画がまとめられているデータベースから API 経由でデータを取得して来ればよさそうですね。

日本語版のこのようなサイト、個人的にはあると便利だなと思ったので、どなたか作成してもらうのを楽しみにしています！

まとめ

今回は、Nuxt 3、Vue 3、UnoCSS、Image Module、The Movie Database API、TypeScript で作成された動画配信サービスサンプル「Nuxt Movies」をご紹介いたしました。

Nuxt 3 や Vue 3 を利用しており、動画配信サービスのようなデザインの何かしらの Web アプリを作成してみようと考えている方にとっては、こちらの OSS が非常に参考になるでしょう！

興味を持った方はぜひ一度、こちらの OSS を試してみてはいかがでしょうか？

Vue 3 を利用している方、Nuxt 3 を利用されている方にとっては、とても参考になるものになると思います！

ライセンス

特に見当たりませんでした。

リンク

movies.nuxt.space

github.com

デジタルセキュリティとプライバシーを保護するためのチェックリスト！「PERSONAL SECURITY CHECKLIST」

概要

普段みなさまはデジタルセキュリティや個人情報を保護するための行動をとっていますでしょうか？

提言した自分が言うのもなんですが、私自身あまり個人情報を保護するための行動を積極的にとっているとはなかなか言えません。。

ただ、やはりデジタル環境がこれまで以上に世界中に浸透している今現在、個人個人のプライベートな情報を各個人で保護していくことは、今後必須です。

そのため、今のうちにデジタル情報を扱っているユーザー個人がセキュリティ保護をどの程度行なっているか、というチェックリストが OSS で一覧として紹介されていたので、今回はこちらをご紹介したいと思います。

今回ご紹介する OSS は、デジタルセキュリティとプライバシーを保護するためのチェックリストである「PERSONAL SECURITY CHECKLIST」になります。

それでは早速こちらの「PERSONAL SECURITY CHECKLIST」について見ていきましょう。

目次

特徴

「PERSONAL SECURITY CHECKLIST」では、以下のカテゴリごとにセキュリテイチェックリストがまとめられています。

• 認証
• Web の閲覧
• 電子メール
• セキュアメッセージング
• ソーシャルメディア
• ネットワーク
• 携帯電話
• パーソナルコンピューター
• スマートホーム
• パーソナルファイナンス
• 人的側面
• 物理的セキュリテイ

利用手順

以下の GitHub リポジトリの README.md 、または以下の公式サイトをご覧になることですぐに利用することができます。

security-list.js.org

github.com

使用感

私も早速チェックリストについて一部見てみました。

認証カテゴリで一部内容を確認してみたところ、以下のような感じでチェックリストがまとめられています。

• 強力なパスワードを使用
  • パスワードが短すぎたり、辞書の単語、場所、名前が含まれていたりすると、力ずくで簡単に破られたり、誰かに推測されたりする可能性があります。強力なパスワードを作成する最も簡単な方法は、長い (12 文字以上) にすることです。多くの単語で構成される「パスフレーズ」の使用を検討してください。または、パスワード ジェネレーターを使用して、長く強力なランダム パスワードを作成します。
• パスワードを再利用しない
  • 誰かがパスワードを再利用し、アカウントを持っていた 1 つのサイトで漏洩が発生した場合、犯罪者は他のアカウントへの不正アクセスを簡単に取得できます。これは通常、大規模な自動ログイン リクエストによって行われ、Credential Stuffing と呼ばれます。残念ながら、これはあまりにも一般的ですが、オンライン アカウントごとに異なるパスワードを使用することから保護するのは簡単です。
• 安全なパスワードマネージャーを使用
  • ほとんどの人にとって、強力でユニークなパスワードを何百も覚えることはほぼ不可能です。パスワード マネージャーは、ログイン資格情報を生成、保存、および自動入力するアプリケーションです。すべてのパスワードは 1 つのマスター パスワードに対して暗号化されます (これは覚えておく必要があり、非常に強力でなければなりません)。ほとんどのパスワード マネージャーにはブラウザー拡張機能とモバイル アプリがあるため、使用しているデバイスに関係なく、パスワードを自動入力できます。

その他、たくさんのチェックリストがまとめられています。

一部は当たり前な内容だったり、初歩的な内容も含まれていますが、こちらに書かれているチェックリストを全てクリアにできたら、デジタル上のセキュリティ周りは強固になりそうですね。

まとめ

今回はデジタルセキュリティとプライバシーを保護するためのチェックリストである「PERSONAL SECURITY CHECKLIST」をご紹介しました。

これからはもっとセキュリティを個人で保護していくことが大切な時代になってきますので、いまのうちから再度セキュリティを見直してみてはいかがでしょうか？

そして、こちらで学んだ内容をもとにセキュリティ強化を布教されてみてはいかがでしょうか？

ライセンス

Creative Commons Attribution 4.0 International Public License ("CC BY 4.0")

リンク

security-list.js.org

github.com

DevOps 周りの知識について Q&A 形式で学びたいなら！「DEVOPS EXERCISES」

概要

みなさまは「DevOps」という言葉を耳にしたことはありますでしょうか？

ソフトウェア開発をおこなっている方にとっては馴染み深いかもしれませんが、DevOps とは「開発チーム（Development）と運用チーム（Operations）がお互いに強調し合うことで、開発・運用するソフトウェア/システムによってビジネスの価値をより高めるだけでなく、そのビジネスの価値をより確実かつ迅速にエンドユーザーに届け続ける、という概念になります。

参考：DevOpsとは何か？ そのツールと組織文化、アジャイルとの違い - Build Insider

そんな DevOps ですが、名前や概念を知っていても、その内容を詳細に把握しきれている方は自分も含めて多くないのではないでしょうか？

そんな中、DevOps に関する様々な技術トピックに関する質問と演習が載っている OSS「DEVOPS EXERCISES」を今回はご紹介いたします。

「DEVOPS EXERCISES」ですが、執筆時は 2354 件の問題があるようです。

また、こちらで出題されている全ての問題が DevOps 技術を学ぶものではなく、概念などを学ぶものもあることが注意として挙げられていましたので、こちらでも明記しておきます。

それでは、早速こちらの OSS「DEVOPS EXERCISES」について見てみましょう！

目次

特徴

こちらの DevOps 演習セットでは、以下の技術における内容を学べるとのことです。

• Linux
• Jenkins
• AWS
• SRE
• Prometheus
• Docker
• Python
• Ansible
• Git
• Kubernetes
• Terraform
• OpenStack
• SQL
• NoSQL
• Azure
• GCP
• DNS
• Elastic
• Network
• 仮想化

利用手順

利用方法としては、以下の GitHub のリポジトリの README.md をみることで利用することができます。

github.com

使用感

早速私もいくつかこちらの OSS についてみてみました。

例えば SQL についての質問集についてみてみると、以下のような質問があります。

SQL とは何かという問題では、リレーショナルデータベースの標準言語で CRUD 操作が可能です、というような記載があり、その他のテクノロジーにおいてもこのような問題が記載されています。

上記のような一問一答の問題の他には、練習問題として、簡単なクイズが出題されています。

なお、練習問題についてはきちんと模範解答も添付されていますので、力試しと思って取り組んでみるといいと思いました。

そのほか、様々な技術についても同様な練習問題もありますので、学びたい分野について一度確認されてみることをお勧めします。

まとめ

今回は DevOps に関する様々な技術トピックに関する質問と演習が載っている OSS「DEVOPS EXERCISES」をご紹介いたしました。

これまで DevOps に馴染みのなかった人や DevOps をこれから学びたいなと思っている人、DevOps についてある程度知っていて知識の整理をしたい人などは、ぜひ一度こちらの「DEVOPS EXERCISES」を参照してみて問題を確認されてみてはいかがでしょうか？

新たな知識を得られたり、これまで曖昧になっていた内容が整理されて、DevOps についてさらに詳しくなれるかもしれませんよ！

ライセンス

CREATIVE COMMONS PUBLIC LICENSE - Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0)

リンク

github.com

ポケモンカードのリアルなレア加工を施す CSS コレクション！！「Pokemon Cards CSS」

概要

最近巷でポケモンカードが流行っているそうですね。

私は小さい時に多少ポケモンカードをやっていた経験があるのですが、今では当時のそれ以上にとても盛り上がりを見せているようで、私の友人もいかにレアなポケモンカードを集められるかで楽しんでいます！

最近では色々な進化が増えたりポケモンの種類も増えてきているので、赤・緑の時よりかはカードの種類がものすごく増えていて、筆者自身はとても驚いています。

さて本題ですが、ポケモンカードには様々なレアカードがありますよね？

さっとググってみたところ、以下の様なレア基準がある様です。

※ 筆者自身、ポケモンカードにあまり詳しくないため、内容に間違いがあった際はご容赦ください。

「UR」「HR」「SR」「RRR」「RR」「R」「UC」「C」の8種類より構成されていて、レアリティの高さも記述順になっています。レアリティの封入率・特徴などを詳細に紹介していきます。 「UR」「HR」「SR」は上位レアリティとされ、カードリストに入ってないのでカードリスト上のナンバーよりも大きなナンバーが付与されています。

参考：ポケモンカード　記号～レアリティの見分け方について旧裏から最新弾まで解説 ｜たいむましん

t-machine.jp

上位のレアカードに至ってはとても綺麗なグラフィックになっていますね！

こちらのレアカードのホログラフィックですが、なんと CSS ライブラリとして GitHub 上にコレクションとしてまとめられていたものを今回は見つけましたので、今回はこちらについてご紹介したいと思います。

今回ご紹介する OSS は、ポケモンカードのリアルなレア加工を施す CSS コレクション「Pokemon Cards CSS」になります。

GitHub リポジトリ名からして面白そうですよね。

それでは早速こちらの OSS「Pokemon Cards CSS」について見ていきたいと思います。

目次

特徴

こちらの OSS の特徴ですが、ローカルサーバーを建てた後、ポケモンカードサンプルが表示されるのですが、マウスオーバーまたはクリックして拡大することで、レアのキラキラ感が分かりやすく表現されています。

利用手順

利用方法は、GitHub 上のリポジトリからプロジェクトをクローンして、ローカルサーバー上で起動させます。

git clone https://github.com/simeydotme/pokemon-cards-css.git
cd pokemon-cards-css
npm install
npm run dev

ローカルサーバー起動後は、http://localhost:3000/ へアクセスすることで、利用することができます。

使用感

早速私もこちらの Pokemon Cards CSS を試してみました！

ノーマルカードの描写はもちろん、UR や トレーナーズレアなども、CSS でポケモンカードのレア度が描写されていることが確認できます！

パステルカラーのようなレアカードもあるのですね！

そのほかのレアカードもマウスオーバーするとレア感を感じられるため、気になった方はぜひ一度こちらの OSS を試してみてください！

まとめ

今回は、ポケモンカードのリアルなレア加工を施す CSS コレクション「Pokemon Cards CSS」をご紹介しました。

ポケモンカードのレアを CSS ライブラリでまとめられているこちらの OSS をご覧になって、UR などのレア感を感じてみるととても懐かしい感じがして、個人的にはみているだけでもとても楽しかったです！

また、CSS の出来も素晴らしく、まるで本物のポケモンカードが画面内にあるようです！

ポケモンカードに興味がある方もあまりない方も、ぜひ一度こちらの OSS「Pokemon Cards CSS」を試してみて、綺麗なポケモンカードを鑑賞されてみてはいかがでしょうか？

ライセンス

特に見当たりませんでした。

リンク

github.com