ソフトウェア開発者のための OSS、まとめてみました!

ソフトウェア開発を行なっている自分が、個人的に面白いと思ったプログラムの最新技術や、オープンソースソフトウェア(OSS)をまとめています!

MENU

React.js と Next.js に基づいた UI コンポーネント例集!「ui」

概要

今回は React.js や Next.js に基づいた UI コンポーネント例集として、「ui」という OSS についてご紹介したいと思います。

ui」についてはとてもシンプルで、HTML/CSS/JS 環境で使用できるほか、React.js や Next.js で使用可能な UI のサンプルがいくつも紹介されています。

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

目次

特徴

特徴としてはとてもシンプルですが、UI のサンプルが一覧で紹介されています。

それぞれ気になったアイテムを選択することでソースコードをすばやく確認することができます。

利用手順

利用方法としては、「ui」の GitHub リポジトリの REAMDE を参照することで利用可能です。

github.com

使用感

私のほうでも早速こちらの「ui」を使用してみました。

ローカル環境にリポジトリをクローンして動かしてみます。

以下のコマンドで実際に動作させることが可能です。

git clone https://github.com/atherosai/ui.git
cd ui
npm install
npm run deploy

デプロイ完了後は、ディレクトリ内にある index.html をブラウザで表示させると、実際の UI コンポーネントを見ることができます。

例として一番上の accordinon-01 を開いてみますと以下のような UI が表示されました。

UI もシンプルですし動作もぬるぬる動いているので、とても参考となる UI ですね。

このほかにもたくさんの UI サンプルがありますので、気になったサンプルを実際に動かしてみてみることをお勧めします。

まとめ

今回は React.js や Next.js に基づいた UI コンポーネント例集として、「ui」という OSS についてご紹介いたしました。

サンプル自体はとてもシンプルかつ見やすいソースコードなので、どなたにも使いやすく参考になるものと思います。

気になった方や参考にしてみたい方は、ぜひ一度こちらの「ui」を見てみてはいかがでしょうか。

ライセンス

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

リンク

github.com

Web ブラウザ上で動作するデスクトップ OS!「Puter」

概要

パソコンの OS は何を使用していますでしょうか?

完全に偏見ですが、多くの方が Windows、エンジニアやクリエイターの方は macOS、一部では Linux を使用されているかと思っています。

パソコンの OS はほぼ上記の 3 つが主流かと思いますが、ほかにもデスクトップ上で動作する OS を今回見つけましたのでご紹介したいと思います。

今回ご紹介する OSS は、Web ブラウザ上で動作するデスクトップ OS「Puter」になります。

Puter」は高速かつ機能が豊富、そしてブラウザ上の OS なのに拡張性が高く、Google DriveDropbox に代わるクラウドストレージやリモートデスクトップとしての活用が期待されています。

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

目次

特徴

Puter」の特徴としては、セルフホスティングが可能という点がまずは上げられます。

2024 年 4 月時点ではアルファ版であるため実稼働には向いていませんが、将来的には運用が見込まれており非常に楽しみな機能です。

その他にも以下の点が挙げられていました。

また、大変興味深いことに最近主流な Web アプリ構築フレームワークの React.js、Angular.js、Vue.js などで構築されおらず、jQuery で構築されているということでした。

利用手順

利用方法はいくつかありますのでそれぞれ紹介していきます。

ローカルサーバー起動

以下コマンドを実行することで、ローカルサーバーとして起動可能です。

git clone https://github.com/HeyPuter/puter
cd puter
npm install
npm start

起動後は http://localhost:4000/ にアクセスすることで利用可能です。

Docker 起動

以下コマンドを実行することで利用可能です。

mkdir puter && cd puter && mkdir -p puter/config puter/data && sudo chown -R 1000:1000 puter && docker run --rm -p 4100:4100 -v `pwd`/puter/config:/etc/puter -v `pwd`/puter/data:/var/puter  ghcr.io/heyputer/puter

起動後は http://localhost:4100/ にアクセスすることで利用可能です。

Docker Compose 起動

以下コマンドを実行することで利用可能です。

mkdir -p puter/config puter/data
sudo chown -R 1000:1000 puter
wget https://raw.githubusercontent.com/HeyPuter/puter/main/docker-compose.yml
docker compose up

起動後は http://localhost:4100/ にアクセスすることで利用可能です。

デモページ版

以下のデモページ URL にアクセスすることで利用可能です。

puter.com

使用感

私のほうでもこちらの「Puter」を実際に使用してみました。

見た目としては Linux に近い感じですね。

デスクトップのアプリ一覧としては、画面下のツールバーにまとめられており、操作性は Windows11 のようになっています。

VSCode なども開けますね。

エクスプローラーも開くことができ、まるで Windows のように操作できます。

また、「Puter」のアカウントを作成しておくことでこれまでの作業内容を保存することができます。

右上の「!」を選択することでアカウント作成フォームが表示されるので、こちらからアカウントを作成することで作業内容を保持できるということでした。

まとめ

今回は、Web ブラウザ上で動作するデスクトップ OS「Puter」についてご紹介いたしました。

ブラウザ上で OS を動かせるので気軽にアプリなどを試せるサンドボックス環境としてもよいですね。

気になった方はぜひ一度こちらの「Puter」を触ってみてはいかがでしょうか。

ライセンス

GNU Affero General Public License v3.0

リンク

github.com

puter.com

アプリケーション開発をゼロから構築する方法を学びたいなら!「Project Based Learning」

概要

アプリ開発をするにあたって、プログラミング言語を習得する必要がありますし、そのプログラミング言語におけるアプリ開発のための作法だったり仕組みを理解していく必要があります。

そのためアプリ開発をゼロから構築するにはとても時間がかかるのと根気がいる作業になります。

そんな中、その根気のいる作業をサポートしてくれる OSS がありましたので、ご紹介したいと思います。

今回ご紹介する OSS は、アプリケーション開発をゼロから構築する手法について学ぶことができる「Project Based Learning」になります。

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

目次

特徴

Project Based Learning」の特徴としては、有名どころのプログラミング言語について抑えてあるところになります。

利用手順

Project Based Learning」の利用方法ですが、GitHub ページの REAMDE を参照することで利用可能です。

github.com

使用感

早速私のほうでもこちらの「Project Based Learning」について使用してみました。

私は普段から JavaScript や React.js といったプログラミング言語フレームワークを使用してアプリケーション開発を行っているのですが、それぞれのページにアクセスしてみると、確かにアプリケーション開発するための手ほどきがあるため、勉強にはもってこいと思いました。

例えば、React.js について学ぶなら以下のようなサイトが紹介されていました。

こちらを見ていくことで、まずは簡単な React.js の使い方やアプリの構築方法などが学べそうです。

ただ、中には有料コンテンツや教育サイトへリンクが張られていることがあるため、無料で学びたいという方は注意しながら見ていく必要がありそうでした。。

まとめ

今回は、アプリケーション開発をゼロから構築する手法について学ぶことができる「Project Based Learning」という OSS についてご紹介しました。

アプリケーションをゼロから構築するのはとても大変な作業で覚えることも多いと思いますが、自分の作りたいと思ったものが実際にできると感無量化と思います。

アプリケーションをこれから開発してみたいなと思っている方や、再度知識を定着させるために勉強したいという方にとってはとてもマッチした OSS かもしれません。

気になった方はぜひ一度試してみてはいかがでしょうか。

ライセンス

MIT License

リンク

github.com

電子メールとチャットの長所を組み合わせたチャットアプリ!「Zulip」

概要

業務やプライベートでチャットツールを使用していますでしょうか?

私自身はプライベートでは LINE を使用してコミュニケーションをとっており、業務や仕事では Slack や Microsoft Teams などのチャットツールを使用しています。

line.me

slack.com

www.microsoft.com

Slack はプライベートでも仕事でも利用できるのでもっぱら使用していたのですが、無料プランの場合、チャットのメッセージが 90 日で表示されなくなってしまうことに気が付き、代替のチャットツールを見つけなければならなくなりました。

そんな中、Slack の代替になりうるチャットツールを見つけましたのでご紹介したいと思います。

今回ご紹介する OSS は、電子メールとチャットの長所を組み合わせた、独自のトピックベーススレッド機能を提供するチャットアプリ「Zulip」になります。

Zulip は世界の大企業や開発チームで積極的に使用されており、また世界中の開発者によってメンテナンス・機能開発・保守がされている OSS チャットアプリのようです。

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

目次

特徴

Zulip」はクラウド版とセルフホスティング版があります。

zulip.com

Zulip」には無料プラン、標準プラン、プラスプランがありますが、具体的な特徴としてはいかが挙げられていました。

クラウド版(一部抜粋)

基本機能についてみると、チャットの検索とファイル共有ストレージの容量が制限されているだけで、無料プランでも十分チャットサービスを利用することができそうですね。

また本記事には載せていませんが、ほか機能についても有料プランと見比べても無料プランとの差があまりなかったので、基本的に使用する際は無料プランでもよさそうだなという印象でした。

セルフホスティング版(一部抜粋)

セルフホスティング版はクラウド版よりも柔軟に利用することができるので、有料プランとの差がほとんどないですね。

ただ、「self-managed」とあり自分で対応しなければならない個所などが多いため、システムに強い方や会社でないと無料プランでの運用は難しそうかな、という印象でした。


それぞれのバージョンの詳細については公式ドキュメントを参照してみてください。

利用手順

今回は主にクラウド版「Zulip」の使い方についてみていきたいと思います。

Zulip」の利用方法としては、公式サイトからアプリをダウンロードします。

Zulip」はマルチプラットフォームに対応しており、macOSWindowsLinuxAndroidiOS、Terminal で使用可能です。

ダウンロード後は指示に従ってインストールを進めます。

その後、チャット用の組織を作成するかどうか、すでにある組織に属するかなどが聞かれるので、状況に応じて操作を進めると、チャットの使用が可能になります。

使用感

早速私のほうでも「Zulip」を触ってみました。

Zulip」は冒頭でも述べましたがスレッド単位でチャットを展開していくことが可能なので、トピックが分散しないで議論できるのがよいですね。

また、チャットアプリなだけあり、「メッセージの送信」「ファイルアップロード」はもちろんのこと、ソースコード開発者にとってはなじみの深い「マークダウン方式での記載」「文章折り畳み」機能などが標準で搭載されていました。

ソフトウェア開発者などにとっては「Zulip」を使用することでよりスムーズに意思疎通ができそうですね!

まとめ

今回は、電子メールとチャットの長所を組み合わせた、独自のトピックベーススレッド機能を提供するチャットアプリ「Zulip」についてご紹介いたしました。

Zulip」は Slack の代替となるよきチャットアプリになりそうです。

気になった方はぜひ一度試してみてはいかがでしょうか。

ライセンス

Apache License 2.0

リンク

github.com

zulip.com

Vue+Vite で TikTok 風アプリを再現!「Douyin-Vue」

概要

TikTok といえば、短編動画を扱っているソーシャルネットーワーキングサービス(SNS)ということを皆さんはすでにご存じかと思います。

TikTok は今や全世界で流行しておりおもしろ動画からためになる動画まで様々な動画が世界中から投稿され、インターネットを通じていつでもどこでも見ることができます。

動画視聴があたりまえになった昨今に非常にマッチしたアプリケーションですね。

そんな TikTok は基本モバイルアプリ(AndroidiPhone)でしか利用できないのですが、今回はそれを Web アプリとして再現している OSS を見つけましたのでご紹介したいと思います。

TikTok ティックトック

TikTok ティックトック

  • TikTok Ltd.
  • エンターテインメント
  • 無料
apps.apple.com

play.google.com

今回ご紹介する OSS は、Vue+Vite で TikTok 風アプリを再現している「Douyin-Vue」になります。

ちなみにですが、「Douyin」というのは TikTok の中国語「抖音」の拼音表記「Dǒuyīn」に由来しており、TikTok の「d」は「Dǒuyīn」の頭文字「D」からきているということです。

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

目次

特徴

Douyin-Vue」の大きな特徴としては、Vue+Vite で構築された Web アプリということでしょうか。

アプリ版の TikTok とい同じような挙動を Web アプリの「Douyin-Vue」でも忠実に再現されており、完成度が非常に高く見えました。

利用手順

利用方法としては、ローカル環境にソースコードをクローンして自環境で動かすか、デモページにアクセスすることで簡単な挙動を確認することができます。

ローカル環境で動作確認する場合は以下のコマンドを実行することで動作可能です。

git clone https://github.com/zyronon/douyin.git
cd douyin
npm install
npm run dev

その後、サーバーが起動するので http://127.0.0.1:3000/ にアクセスすることで利用可能です。

もしくは、以下のデモページにアクセスすることで利用可能です。

zyronon.github.io

使用感

早速私のほうでもこちらの「Douyin-Vue」を試してみました!

※ ブラウザで動きを確認する際は、ウィンドウをモバイルサイズに変える必要があるため、場合によっては「F12」を選択してからモバイル版のウィンドウサイズに変える必要があります(詳細は「Douyin-Vue」の注意文に従うことで対応可能です)。

実際の TikTok アプリと同じように動画を上スクロールすることで次の動画が表示されたり、コメント機能があったりされ、Web アプリでも忠実にアプリの挙動が再現されていました!

こちらが Vue で構築されているということなので、モバイルアプリ風なシステムを構築したいと考えているWeb アプリ屋さんの方々にとって非常に勉強になる OSS ではないかと思いました。

自分もこちらの OSS を見ながら、Web アプリの構築方法だったりを学んでいきたいなと思いました!

まとめ

今回は、Vue+Vite で TikTok 風アプリを再現している「Douyin-Vue」という OSS についてご紹介いたしました。

モバイルアプリで人気のある TikTok を Web アプリで忠実に再現されている点が非常に素晴らしいと思いました。

もばいr

Web アプリでモバイルアプリ風なものを作成したいという方にとっても非常に勉強になる OSS かと思いますので、気になった方はこちらを利用してみて、リポジトリを参考にされてみてはいかがでしょうか。

ライセンス

GNU General Public License v3.0

リンク

github.com

zyronon.github.io

Google が開発したマルチモーダル生成 AI モデル Google Gemini をうまく使いこなすためのクックブック!「Gemini API Cookbook」

概要

Google が開発したマルチモーダル生成 AI モデル Google Gemini(以降、Gemini) をご存じでしょうか?

Gemini は Google が開発した人工知能モデルであり、テキスト・画像・音声・動画を入力として受け取り、テキストと画像を生成することができる生成 AI となります。

gemini.google.com

Gemini が発表される間瀬までは OpenAI 社の ChatGPT が一人勝ちしており、その中でも有料プランの GPT-4 が生成 AI として主力の生成 AI でしたが、Gemini は多くの指標で GPT-4 の性能をうわ待っているとされ、ChatGPT を超える生成 AI として大変注目を浴びています。

Gemini は 2023 年 12 月に発表された非常に新しいサービスでありまして、そこまでサービスが普及していなかったり、システム内にうまく組み込めていない企業や開発者も多いかと思います。

そんな中、Google が Gemini をうまく使いこなせるようにクックブックを提供していたため、今回はこちらについてご紹介したいと思います。

今回ご紹介する OSS は、Google が開発したマルチモーダル生成 AI モデル Google Gemini をうまく使いこなすためのクックブック「Gemini API Cookbook」になります。

こちらのクックブックでは、Gemini の使い方の例であったり API の説明、その他使い方の説明、公式ドキュメントが公開されています。

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

目次

特徴

Gemini は API を公開しており、REST API として動作しています。

REST API としてサポートしているのは現在主力のプログラミング言語をカバーしていました。

利用手順

利用方法としては以下のようにするよう、指示がありましたのでこちらに従いましょう!

  1. Google AI Studio にアクセスします
  2. ご自身の Google アカウントでログインします
  3. Gemini を使用するための API Key を作成します
  4. Python 言語であればこちらのクイックスタートを利用するか、もしくは REST API の場合はこちら のクイックスタートを利用するかで、始められます

使用感

今回はいくつかの言語での API リファレンスが公開されているので、そちらを確認したいと思います。

各言語で使い方の様子が紹介されていますが、さすが Google というだけあってとてもシンプルかつ丁寧に使い方が紹介されていました。

各言語いずれでも Gemini を簡単に使用することができるということなので、気になった方は以下のクックブックの公式ドキュメントを参照してみてください。

Python

Node.js

Dart (Flutter)

Android

Swift

Go

まとめ

今回は、Google が開発したマルチモーダル生成 AI モデル Google Gemini をうまく使いこなすためのクックブック「Gemini API Cookbook」についてご紹介いたしました。

Gemini は今後大流行する可能性があるとても有望な生成 AI かと思います。

今のうちに Gemini について触れてみながら勉強し、知見をひろげてみてはいかがでしょうか。

ライセンス

Apache License 2.0

リンク

github.com

ai.google.dev

Python の型ヒントを示してくれる!「Typer」

概要

皆さまは Python を使用してプログラム開発を行っていらっしゃるでしょうか?

www.python.org

最近ではプログラミング言語といえば Python をはじめに勉強するという方も多いと聞くのと、AI 技術が発展していたり処理の自動化という点で Python がとても人気だという風に聞いています。

www.python.jp

Python はシンプルにソースコードを記述することができますし、可読性もよくモジュール群もたくさんあるため、何かを開発したい・自動化したいという際、すぐにその考えを実現することができますよね。

そんな Python ですが、コンパイルなどがいらないスクリプト言語のため、型指定などの誤りがあった場合でも実際にソースコードを動かしてみるまではどこに問題があるかなど、わかりづらいことが多いです。

そんな中、Pythonソースコードを静的解析処理してくれて、変数の型ヒントなどを提供してくれる便利なモジュールがあったので、今回はこちらについてご紹介したいと思います。

今回ご紹介する OSS は、Python ソースコードを解析し型ヒントを示してくれる「Typer」になります。

こちらを使用することで、Pythonソースコードを作成しているときも不要なエラーをなくすことができしっかりとしたソールコードを記述することができるようになります。

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

目次

特徴

Typer」の主な特徴としては以下の点が挙げられていました。

  • 直感的な記述:優れたエディターのサポートで、デバッグにかかる時間を短縮可能。使いやすく学習しやすいように設計されているため、ドキュメントを読む時間も短縮可能。
  • 使いやすさ:エンドユーザーにとって使用しやすい構成。
  • 短い:コードの重複を最小限に抑え、バグ減少に貢献。
  • シンプルに始められる:最も単純な例としては、ソースコードに 2 行追加するだけで使用可能(インポート文 1 行、関数呼び出し 1 行)
  • 拡張可能:必要に応じて複雑さを増やし、オプションと引数を使用してコマンド・サブコマンドのグループの任意のツリー構築も可能。
  • スクリプト実行:「Typer」には typer コマンドによりスクリプト実行時に自動的に CLI 上で使用できるプログラムが内包済み。

こちらでは特徴の一部について述べていますがまだまだ機能としてはたくさんありますので、気になった方は公式ドキュメントを見てみることをお勧めします。

typer.tiangolo.com

利用手順

Typer」を使用するには、pip コマンドよりモジュールをインストールすことで利用可能です。

pip install typer

使用感

Typer」を実感する簡単な方法として以下のような main.py スクリプトをまずは用意します。

def main(name: str):
    print(f"Hello {name}")

上記ではソースコード上で「Typer」を使用していませんが typer コマンドを使用することで CLI アプリケーションとして実行することが可能になります。

こんな形でとても簡単に「Typer」を使用することができます!

先ほどはソースコード内部で「Typer」を使用せずに CLI 上で型チェックを行いました。

単純なスクリプトでは非常に便利な方法ですが、これ以外にもソースコード上に「Typer」をインポートして型チェックをすることも可能です。

例として、以下の庄名 main.py スクリプトを用意します。

import typer


def main(name: str):
    print(f"Hello {name}")


if __name__ == "__main__":
    typer.run(main)

上記では Python ソースコード内で「Typer」を使用することが可能です。

以下脳動画のように、Python スクリプトを実行するだけで「Typer」を使用可能です。

また、少し複雑な Python スクリプトで以下のようなソースコード main.py を準備します。

内容としては以下のようになっています。

  • 明示的に typer.Typer アプリを作成
    • typer.run を暗黙的に作成
  • @app.command() に2 つのサブコマンドを追加
  • app() 事態を関数のように使用
import typer

app = typer.Typer()


@app.command()
def hello(name: str):
    print(f"Hello {name}")


@app.command()
def goodbye(name: str, formal: bool = False):
    if formal:
        print(f"Goodbye Ms. {name}. Have a good day.")
    else:
        print(f"Bye {name}!")


if __name__ == "__main__":
    app()

上記のスクリプト作成後、以下のようにヘルプを確認します。

上記のように「Typer」を実行することで、Python の型ヒントの情報やエラーになりそうな個所を特定して知らせてくれます。

上記で上げたほかにもまだまだ機能はたくさんあるため、詳細については公式ドキュメントをご参照ください。

まとめ

今回は、Python ソースコードを解析し型ヒントを示してくれる「Typer」という OSS についてご紹介いたしました。

Python を使用されている方にとっては、インストールするだけで簡単に静的型チェックを行ってくれるので、「Typer」はとてもありがたいモジュールではないでしょうか?

気になった方はぜひ一度、こちらの OSSTyper」を利用されてみてはいかがでしょうか。

ライセンス

MIT License

リンク

github.com

typer.tiangolo.com