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

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

MENU

macOS/iOS などで一貫性のあるわかりやすいアプリを構築するために!「The Composable Architecture」

概要

今回は、iOS アプリや macOS でアプリを作成したいと考えている方、もしくはすでに作成してより使いやすいアプリを目指す方向けの記事になります。

iOSmacOSアプリ開発では Apple プラットフォーム特有の対応や対策が必要な場合が多くあると思います。

そこで今回は、iOS/macOS アプリを構築していく中で、人間工学を念頭に置いた、一貫性のあるわかりやすい方法でアプリケーションを構築するための手法を紹介してくれる OSS リポジトリThe Composable Architecture」についてご紹介したいと思います。

こちらの「The Composable Architecture」はその名の通り、人間工学に重きを置いた開発手法を提示しており、Apple 製品のアプリ開発iOSmacOS、tvOS、watchOS)に適した手法を教えてくれるものになっております。

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

目次

特徴

The Composable Architecture」の特徴として、以下の点に重きを置いて手法を提供してくれています。

状態管理

アプリケーションの状態を管理し、多くの画面間で状態を共有することで、ある画面での変更を別の画面ですぐに検知できるようにする

構成

大きな機能をそれぞれ独立したモジュールに分割し、簡単に張り合わせて機能を形成できる小さなコンポーネントに分割する

副作用(Side Effects)

可能な限りテストしやすい方法で、アプリケーションの特定の部分と外部とで通信させる

テスト

アーキテクチャに組み込まれた機能をテストするだけでなく、多くの部分で構成された機能の結合テストを作成することで、副作用がアプリケーションにどのような影響を与えるかをテストする

人間工学

できるだけ少ない概念と可動部品を使用することで、シンプルな API で機能を実現する

利用手順

The Composable Architecture」を利用するには、GitHub の README を参照するか、公式サイトにアクセスすることで利用可能です。

github.com

www.pointfree.co

使用感

早速私のほうでもこちらの「The Composable Architecture」についてみてみました。

私自身 Apple 製品のアプリ開発(Swift/Objective-C)での開発を行ったことがないので、ソースコードの内容や中身までは深く把握することができませんでしたが、言わんとしていることは、ソースコードで上でどのように記述したらより良いアプリ開発ができるのか、ということがつかめました。

基本的に全編英語ですが、簡単な単語で記述されているほか、具体的なソースコード例も紹介されているので、Swift/Objective-C を使用して開発を進めたことがある方にとってはわかりやすいのではないでしょうか。

人間工学に基づいたソースコード開発、という部分の説明を見るととても惹かれますので、自分もこれを機に iOS アプリ開発を進める際はこちらの OSS を参考にしたいと思いました。

また、公式サイトのほうでは動画付きでレクチャーもあるため、より詳細について把握してみたい方はこちらもお勧めです(全編英語ですが)。

まとめ

今回は、iOS/macOS アプリを構築していく中で、人間工学を念頭に置いた、一貫性のあるわかりやすい方法でアプリケーションを構築するための手法を紹介してくれる OSS リポジトリThe Composable Architecture」についてご紹介いたしました。

iOS アプリや macOS のアプリを開発している方、してみたい方にとっては今回の OSS をみることでより知識を得られるのではないでしょうか?

私自身も今後 iOS アプリなどを開発する際には、人間工学に基づいたアプリを構築していきたいと思いますので、こちらの OSS を参考にしたいと思いました。

ライセンス

MIT License

リンク

github.com

www.pointfree.co

見た目・操作性・機能性を追求したポケモン図鑑 Android アプリ!「Pokedex」

概要

ポケモンは今や 1000 体を超える勢いで増え続けています。

私自身もポケモン初代から遊んでいますが 2024 年もまだまだその勢いが衰えず新作が出るたびに大ヒットとなっています。

そんなポケモンですが、今回 Android 用アプリとしてポケモン図鑑をとても見やすく操作性も良いアプリが OSS として出ていたので、今回はこちらについてご紹介したいと思います。

今回ご紹介する OSS は、Hilt、Coroutines、Flow、Jetpack (Room、ViewModel)、および MVVM アーキテクチャに基づいて開発され、見た目・操作性・機能性を追求した Android 向けポケモン図鑑Pokedex」になります。

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

目次

特徴

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

  • Kotlin ベース、コルーチン+非同期フローでの動作
  • ジェットパックとして以下を採用
    • Android のライフサイクルを観察し、ライフサイクルの変更時に UI の状態を処理
    • UI 関連のデータホルダーとライフサイクルを管理し、画面の開店などの構成変更後もデータを維持できるよう対応
    • プログラムではなく宣言形式を使用して、レイアウト内の UI コンポーネントをアプリ内のデータソースにバインド
    • SQLite 上に抽象化レイヤーを提供してデータベースを構築、スムーズなでーたべすアクセスを可能
  • アーキテクチャーとして以下を採用
  • Retrofit2 & OkHttp3 を使用した REST API とページングネットワークデータを構築
  • Sandwich という、Android のネットワークペイロードを処理する軽量で最新の応答インターフェースを構築
  • Moshi という、Kotlin および Java 用の最新の JSON ライブラリを採用
  • Whatlf という、null 許容オブジェクトとからのコレクションをよりスムーズにチェックできるモジュールを採用
  • Bundler という、Android インテントおよびバンドル拡張機能を使用し、値をエレガントに挿入及び取得
  • ksp という、Kotlin シンボル処理 API を採用
  • Tunbine という、kotlinx.coroutines フロー用の小さなテスト ライブラリを使用
  • アニメーションと CardView を構築するためのマテリアルデザインコンポーネントを使用
  • Glide、GlidePalette を使用してネットワークから画像を読み込む
  • TransformationLayout を採用し、変形モーションアニメーションを実装
  • カスタムビューとして以下を採用
    • Rainbow という、Android でグラデーションと色合いを適用する手法を採用
    • AndroidRibbon という、Android できらめく美しいリボンを実装する方法を採用
    • ProgressView という、洗練された柔軟な ProgressView を採用し、アニメーションを構築
  • Timber という、小規模で拡張可能な API を備えたロガーを使用

その他、Android アプリ開発にこだわっていてアーキテクチャーの紹介などもされていますので、気になる方はこちらも確認してみるとよいでしょう。

アーキテクチャ

アーキテクチャー概要

UI レイヤー

データレイヤー

github.com

利用手順

Pokedex」の利用方法としては、GitHub のリリースページから apk ファイルを Android 端末にインストールすることで利用可能ということでした。

github.com

使用感

筆者は Android 端末を保持していないため、今回は実際に使用することはできなかったのですが、GitHub ページにデモ動画がったのでこちらを確認してみまました。

実際のアプリの挙動を見てみると、アニメーションがぬるぬる動いていることがわかり、画面サイズに応じたサイズで指定した画像がぴったり収まるような挙動だったり、アニメーションがいい感じに動いているのがわかりますね!

Androidアーキテクチャーにこだわって作成されていることがわかります。

また、マテリアルデザインで構築されているということだけあって、UI としてもとてもきれいでまとまっており、非常に見やすく操作性もよさそうです。

まとめ

今回は、Hilt、Coroutines、Flow、Jetpack (Room、ViewModel)、および MVVM アーキテクチャに基づいて開発され、見た目・操作性・機能性を追求した Android 向けポケモン図鑑Pokedex」についてご紹介いたしました。

Android 端末を所持している方はぜひ一度こちらの OSS をインストールしてみて、動作を見てみてはいかがでしょうか。

ライセンス

Apache License 2.0

リンク

github.com

github.com

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