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

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

MENU

API の作成が簡単に行える最先端のヘッドレス CMS!「strapi」

概要

Web アプリを開発したことのある開発者にとって、各自で API を作成したことは 1 度はあるのではないでしょうか。

そんな API の作成ですが、1 人で作成するならまだしも大勢で API を作成するとなると、既存の API がすでに作られていないか、似たような API がすでに作られていないか、既存の API と今回新しく作成しようとしている API で機能が似ている部分はないかなど、確認に手間がかかることがありますよね。

そんな API 作成ですが、今回はそのような悩みを解決することができる OSS を見つけましたので、ご紹介します。

今回ご紹介する OSS は、手間をかけずに API の作成が簡単に行える最先端のヘッドレス CMSstrapi」になります。

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

目次

機能と特徴

機能

strapi」の機能としては以下が挙げられていました。

  • データ管理可能
    • データがどこに保存されているかを把握することが容易で、完全に制御可能
  • セルフホスト
    • 必要に応じて strapi プロジェクトをホスト可能
    • AWS、Render、Netlify、Heroku、VPS、または専用サーバーなど必要なホスティングプラットフォームを選択可能
  • データベース非依存
  • カスタマイズ可能
    • ニーズに適合するような API 、ルーティング、プラグインをカスタマイズすることが可能で、ロジックを素早く構築可能

利用手順

以下のコマンドを実行してインストールします。

yarn create strapi-app my-project --quickstart
# or
npx create-strapi-app my-project --quickstart

なお、Quickstart コマンドではデータベースを SQLite として実行します。

特徴

  • 最新の管理パネル
    • エレガントで、完全にカスタマイズ可能で、完全に拡張可能な管理パネル
  • デフォルトの保護機能
    • 再利用可能なポリシー、CORS、CSP、P3P、Xframe、XSS などが実装ずみ
  • プラグイン指向
    • 認証システム、コンテンツ管理、カスタム プラグインなどを数秒でインストール可能
  • 超高速
    • Node.js の上に構築された Strapi は、驚くべきパフォーマンスを提供
  • フロントエンドにとらわれない
    • フロントエンド フレームワーク (React、Vue、Angular など)、モバイル アプリ、さらには IoT で利用可能
  • 強力な CLI
    • オンザフライでプロジェクトと API をスキャフォールディング可能
  • SQL データベース

要件

OS

サポートされている OS は以下です。

Node.js

サポートされている Node.js は以下です。

  • Node.js >= 14 <= 18
  • NPM >= 6.x

Database

サポートされているデータベースは以下です。

データベース 最小 推奨
MySQL 5.7.8 8.0
MariaDB 10.3 10.6
PostgreSQL 11.0 14.0
SQLite 3 3

使用感

実際に自分の環境で動かして見ました。

起動したら、実際にエントリーなどを作成して API を作る工程に入ります。

こちらのエントリーリストには項目だったりソートに使用するフィールドなども設定することができるため、API を簡単に作成することができます。

より詳細に機能について把握したい方は、公式サイトやドキュメントを参考にして見てると良いかと思います。

strapi.io

まとめ

今回は、手間をかけずに API の作成が簡単に行える最先端のヘッドレス CMSstrapi」をご紹介しました。

Web アプリを開発している方にとって API は切っても切り離せないものかと思います。

ぜひこちらの「strapi」を利用して、API 開発の一助にしていただけたらと思います!

ライセンス

MIT Expat License

リンク

strapi.io

github.com

CSS を利用してホバー効果アイコンを作成したいなら!「Hover」

概要

Web アプリを開発する際に、リンクやボタン、ロゴなどをマウスオーバーした際にホバー効果をつけたいと考えている方は少なくないかと思います。

そこで今回は、CSS によりホバー効果を描画することができる OSS をご紹介いたします。

今回ご紹介する OSS は、純粋な CSS を利用してホバー効果をアイコンに付与することができる「Hover」をご紹介します。

Hover」を利用することで、Web アプリにおけるリンク、ボタン、ロゴ、SVGアイキャッチ画像などにホバー効果を付与することができます。

それでは早速中身についてもう少し見ていきましょう!

目次

インストール方法

Hover」をインストール・ダウンロードする方法として、以下の 3 つがあります。

  • npm 経由:npm install hover.css --save
  • bower 経由:bower install hover --save
  • zip ファイルダウンロード経由:zip をダウンロード

利用手順

Hover」は以下 2 通りの方法で利用可能です。

Hover の一部を利用する場合

1 つ、または複数の要素のみを使用する場合は、Git から必要な効果のみをコピーして利用することができます。

  1. Hover.css をダウンロード

  2. ダウンロードした Hover.css から使用したいホバー効果の CSS を見つけます(基本的に、ホバーの CSScss/hover.css のコメントにその効果の名前が記載されています)。

    /* Grow */
    .hvr-grow {
        display: inline-block;
        vertical-align: middle;
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        transition-duration: 0.3s;
        transition-property: transform;
    }
    
    .hvr-grow:hover,
    .hvr-grow:focus,
    .hvr-grow:active {
        transform: scale(1.1);
    }
    
  3. 見つけた効果を各自のスタイルシートCSS ファイル)に貼り付けます。

  4. ホバー効果を表示する HTML ファイルで、選択した要素にクラスを追加します(今回の場合は .hvr-grow を HTML ファイルのクラスに追加する)。

Hover.css によるホバー効果を適用する前:

<a href="#">Add to Basket</a>

Hover.css によるホバー効果を適用する後:

<a href="#" class="hvr-grow">Add to Basket</a>

Hover.css の参照

多くの Hover.css 効果を使用する予定がある場合は、Hover.css スタイルシート全体を参照することが推奨されています。

  1. hover-min.css をダウンロードします。

  2. 各自のプロジェクトの任意のディレクトリ(例として、css ディレクトリ)に hover-min.css を格納します。

  3. ホバー効果を追加する HTML ページに、CSS ファイルを参照するように <head> タグに追記します。

   <head>
       <link href="css/hover-min.css" rel="stylesheet">
   </head>

または、次のように既存のスタイルシートを参照することもできます。

   @import url("hover-min.css");
  1. ホバー効果「Grow」を使用する場合は、適用したい要素のクラスに .hvr-grow を追記します。

Hover.css によるホバー効果を適用する前:

<a href="#">Add to Basket</a>

Hover.css によるホバー効果を適用する後:

<a href="#" class="hvr-grow">Add to Basket</a>

使用感

今回は、公式ページに紹介されているデモアイコンを触ってみました。

こちらをみるところ、2D ホバーだったりボタンの背景色が変わるものだったり色々ありました!

他にもアイコン向けのホバー効果であったり、ボックスの影を操作するホバー効果もありますので、気になった方はぜひ一度公式サイトからホバー一覧を見てみると面白いかもしれません。

まとめ

今回は、純粋な CSS を利用してホバー効果をアイコンに付与することができる「Hover」をご紹介しました。

プレーンな CSS ファイルでホバー効果を表現することができるので、CSS 以外にも SASS であったり LESS でも利用でき、応用が効いて嬉しいですね。

今や色々なモジュールで UI を綺麗にするものなどもありますが、プレーンな CSS を使用してホバー効果を表現できるのは大きなメリットではないでしょうか。

Web アプリ開発などを行っている方でホバー効果をつけたいなと考えている方などは、ぜひ一度こちらの OSSHover」を検討されてみてはいかがでしょうか。

ライセンス

Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the [Ian Lunn Design Limited Store](https://ianlunn.co.uk/store/licenses/) and [purchase a commercial license here](https://ianlunn.co.uk/store/hover-css/).

リンク

ianlunn.github.io

github.com

プライベートホスティング可能なチャットアプリ!「VoceChat」

概要

チャットサービスといえば今や Slack や Discord、さらには LINE など数多く存在しますが、その多くがある企業にサーバーを運営してもらっていてチャットのやり取りをその企業のデータベースに保存されているかと思います。

もちろん、チャットの履歴を運営会社のデータベースなどに保存されているからダメというわけではなく、むしろサーバー運営やデータベース管理など面倒なことを考える必要がなくなるため、とてもありがたいと思っています。

ただし、企業などで使用する際は話が異なります。

社内データや機密データについてチャット上でやり取りしたい場合、もしくはやり取り情報を外に漏らしたくないという場合には、先ほど挙げたようなチャットサービスを採用することはとても難しいのではないかと思います。

そこで、社内のサーバーにチャットサーバーを立ててしまえば社内だけで閉じるため、最近ではそのようなチャットアプリを企業のプライベートサーバーに立てることのできるチャットアプリが増えています。

今回紹介する OSS もその 1 つになります。

今回ご紹介する OSS は、プライベートホスティング可能な Rust 製のチャットアプリ「VoceChat」になります。

それでは早速こちらの OSS についてみていきましょう!

目次

特徴

VoceChat」については以下の特徴が明記されていました。

  • React & Redux ツールキットを利用したサービス
  • TypeScript を利用して開発
  • PWA 対応
  • 通知機能搭載

利用手順

利用方法としては、Docker を利用します。

docker run -d --restart=always \
  -p 3000:3000 \
  --name vocechat-server \
  privoce/vocechat-server:latest

使用感

自分も早速利用してみました。

起動自体はとても簡単で、起動するとチャットのホーム画面が表示されます。

こちらの画面でチャットルームを選択して、会話を開始することができます。

他にもユーザーとのやり取りを行うことができます。

チャット上でやり取りして保存したデータは以下のタブに保存されるようですね。

チャットで画像ファイルや動画ファイルなどをやりとちしたい場合は、こちらのメディアタブから行えそうです。

その他にも設定項目があるので、自身のユーザー名やアイコン画像なども変えることができます。

上記の機能を一通り見てみるとチャットアプリとして一通りのことは行えそうな印象です。

また、実際にチャットメッセージを送ってみたのですが、UI なども綺麗に整備されており、かつ機能としても問題なく利用することができました!

まとめ

今回は、プライベートホスティング可能な Rust 製のチャットアプリ「VoceChat」をご紹介しました。

社外秘データについてチャット上でやり取りしたいが外部サーバーを使いたくないと考えている方や、プライベートサーバー内でチャットアプリによるやり取りを行いたいと考えている方にとっては、こちらの「VoceChat」は良いのではないでしょうか。

ぜひとも参考にしていただければと思います。

ライセンス

GNU General Public License v3.0

リンク

voce.chat

github.com

Python UI ライブラリである Tkinter をカスタマイズしたいなら!「CustomTkinter」

概要

Python というプログラミング言語にはいろいろなライブラリが付属していますが、その中でも GUI ライブラリとして名高いのが「Tkinter」かと思います。

docs.python.org

Python で何か GUI アプリを開発してみたいと一度でも考えたことのある方にとっては、1 度くらい見たことはあるかと思います。

ただ、Tkinter を素のまま使用すると、昔の Windows アプリケーションのようにそっけない GUI でしかアプリを作成することができません。

そこで、今回は素っ気ない Tkinter の UI を劇的に良くすることができる OSS を見つけましたのでご紹介します。

今回ご紹介する OSS は、Python UI ライブラリである Tkinter をカスタマイズすることができる OSSCustom Tkinter」になります。

それでは中身についてみていきましょう。

目次

特徴

Custom Tkinter」は、Tkinter に基づく Python UI ライブラリであり、カスタマイズすることが可能でモダンなウィジェットを提供してくれます。

Custom Tkinter」で作成したウィジェットは通常の Tkinter ウィジェットのように利用でき、組み合わせて使用することもできます。

また、「Custom Tkinter」を使用することで、すべてのデスクトッププラットフォーム(WindowsmacOSLinux)で一貫した UI を提供することができるとのことです。

利用手順

Custom Tkinter」は pip よりモジュールをインストールします。

pip3 install customtkinter

なお、「Custom Tkinter」は現在も活発に開発が進められているということなので、以下のコマンドよりできるだけ頻繁に更新することが推奨されています。

pip3 install customtkinter --upgrade

使用感

サンプルプログラムをがあったので、こちらをみてみましょう。

まずは簡単なボタンをアイコンを表示するソースコードを実行してみます。

import customtkinter

customtkinter.set_appearance_mode("System")  # Modes: system (default), light, dark
customtkinter.set_default_color_theme("blue")  # Themes: blue (default), dark-blue, green

app = customtkinter.CTk()  # create CTk window like you do with the Tk window
app.geometry("400x240")

def button_function():
    print("button pressed")

# Use CTkButton instead of tkinter Button
button = customtkinter.CTkButton(master=app, text="CTkButton", command=button_function)
button.place(relx=0.5, rely=0.5, anchor=customtkinter.CENTER)

app.mainloop()

上記サンプルコードを実行すると、以下のような画面が表示されます。

他にも、画像付きボタンを作成することができたり、マップ画像を Tkinter と統合することで任意のウィンドウでマップを操作・表示することができるウィジェットも作成することができるとのことでした。

その他にもたくさんの UI を作成することができるので、サンプルフォルダやドキュメントを参考に作成したいウィジェットなどを探してみても良いかもしれませんね。

github.com

まとめ

今回は、Python UI ライブラリである Tkinter をカスタマイズすることができる OSSCustom Tkinter」をご紹介しました。

Python の標準 GUI ライブラリ「Tkinter」だけでは UI が素っ気なくなってしまうのが PythonGUI アプリケーションを作成する際の課題かなと自分は考えていたので、「Custom Tkinter」によってその課題が解消されたなと思っています。

個人的にはデスクトップアプリを作成する際に Python を採用するかというのは少々議論の余地があると思いますが、Python でも綺麗な GUI アプリを作成することができるということが学べたので、とても勉強になりました。

今後 PythonGUI アプリを作成する際には、一度自分もこちらのモジュールを検討しようかと思います。

みなさまもぜひ一度、こちらの「Custom Tkinter」を見てみたり試してみてはいかがでしょうか。

ライセンス

Creative Commons Zero v1.0 Universal

リンク

github.com

新興企業やスタートアップ企業の CTO が考えるべきリストをまとめた OSS!「Awesome CTO」

概要

新興企業などにおいて、CEO(Chief Executive Officer:最高経営責任者)や CTO(Chief Technology Officer:最高技術責任者)はとてもやることが多く大変かと思います。

大企業などにおける CEO/CTO の方々も大変かと思いますが、これまで培ってきた仕事の内容をさらにブラッシュアップするなど何かしらの延長線上で更なる価値を提供することが求められるのではと、CEO/CTO になったこともない筆者が勝手に考えています(想像を一般人からしてみれば想像を絶する大変な職業ということは存じ上げておりますので、ご容赦ください)。

ただ、新興企業やスタートアップ企業の方々においては、いきなり CEO/CTO になる方も多く、最初は何をすれば良いのか見当もつかない場合もあるかと思います。

そこで、今回はそんな CTO に焦点を当てて、新人 CTO の方の手助けとなるリストを OSS で見つけましたので、ご紹介しようと思います。

今回ご紹介する OSS は、新興企業やスタートアップ企業の CTO(最高技術責任者)が考える必要のあるリスト「Awesome CTO」をご紹介します。

目次

利用手順

利用方法としては、GitHub の README を参照することですぐに利用することができます。

github.com

使用感

早速自分もこちらの「Awesome CTO」を参照してみました。

こちらですが、「CTO の役割」についての話から、「CTOになるとはどういうことか」などといった話、または今後企業を大きくするための「人材雇用についての考え方」だったり「CTO としてのプロジェクト管理」についての記事などが、いい塩梅でまとめられています。

全編英語になっていますが、内容としては 新人 CTO が学んでおくべき内容がこちらのリストにまとまっているため、とても参考になるのではないでしょうか。

私自身は新興企業の CTO などになるといったことも当分はなさそうですが、CTO の考え方などをインプットしておいて損はないと思うので、こちらにまとめられているリストをいくつか読んでおきたいなと思いました。

まとめ

今回は、新興企業やスタートアップ企業の CTO(最高技術責任者)が考える必要のあるリスト「Awesome CTO」をご紹介しました。

これから新たに起業して会社を作る方やスタートアップ企業で CTO として仕事をされている方などにとっては、CTO の仕事について見直す良い機会になるのではないでしょうか?

また、CTO の仕事や考えていることってなんだろう、と興味がある方にってもとても勉強になる OSS リストかと思いますので、ぜひ一度こちらの OSSAwesome CTO」を一読されてみてはいかがでしょうか。

ライセンス

Creative Commons Zero v1.0 Universal

リンク

github.com

neovim を VSCode チックに使いたいなら!「nvim-ide」

概要

neovim というテキストエディタをご存知でしょうか?

neovim とは、拡張性と使いやすさのために刷新した Vim 派生テキストエディタで、Vim を利用している方にとっては使いやすいテキストエディタとなっています。

参考:neovim とは何か? vim.blue

なお、こちらの neovim は以下のサイトから無料でインストールして使用する事ができます。

neovim.io

こちらの neovim ですが、VimIDE 化して利用する事ができるアプリケーションなのですが、いろいろカスタマイズしないと普通の Vim と同じような使い方になってしまいます。

Vim 上級者の方や neovim を普段から使用されている方にとっては特に問題ないかもしれませんが、neovim をこれから使ってみたいという方などにとってはとっかかりがなく使いずらいという印象を与えてしまうかもしれません。

そのため今回は、neovim を最近の IDE チックなデザインに変更する事ができてしまうプラグインを見つけましたので、ご紹介します。

今回ご紹介する OSS は、VSCode にインスパイアされ、neovim の完全な IDE レイヤーであるプラグインnvim-ide」になります。

それでは早速中身についてもう少し見ていきましょう!

目次

特徴

nvim-ide」は VSCode のように左側パネルに IDE ライクなファイルマネージャパネルを表示し、画面下にはターミナルウィンドウを表示させる事ができるため、まるで neovim のアプリを VSCode のような画面で処理を行う事ができます。

また「nvim-ide」には以下のような特徴が明記されていますので、こちらでも取り上げようと思います。

  • Bookmarks - スティッキーをサポートするブックマークのワークスペースごとのコレクションする
  • ブランチ - ワークスペースの git ブランチをチェックアウトして管理する
  • 変更 - 現在の git ステータスを表示し、差分をステージング/復元/コミット/修正する
  • コミット - HEAD からのコミットのリストを表示し、読み取り専用の差分を表示するか、コミットをチェックアウトして変更可能な差分を表示する
  • エクスプローラー - ファイル選択と再帰操作をサポートするファイル エクスプローラーを表示する
  • アウトライン - ジャンプとトラッキングをサポートするリアルタイム LSP を利用したソースコードのアウトラインを提供する
  • ターミナルブラウザ - ターミナル インスタンスの作成、名前変更、ジャンプ、および削除を行うためのターミナル マネージャを提供する
  • タイムライン - ファイルの git 履歴を表示し、複数のコミットでファイルがどのように操作されたかを示す

利用手順

  1. neovim のプラグインマネージャーから nvim-ide プラグインをインストールする

  2. setup 関数うを呼び出す(オプションでデフォルト設定を使用する)

-- default components
local explorer        = require('ide.components.explorer')
local outline         = require('ide.components.outline')
local callhierarchy   = require('ide.components.callhierarchy')
local timeline        = require('ide.components.timeline')
local terminal        = require('ide.components.terminal')
local terminalbrowser = require('ide.components.terminal.terminalbrowser')
local changes         = require('ide.components.changes')
local commits         = require('ide.components.commits')
local branches        = require('ide.components.branches')
local bookmarks       = require('ide.components.bookmarks')

require('ide').setup({
    -- the global icon set to use.
    -- values: "nerd", "codicon", "default"
    icon_set = "default",
    -- place Component config overrides here. 
    -- they key to this table must be the Component's unique name and the value 
    -- is a table which overrides any default config values.
    components = {},
    -- default panel groups to display on left and right.
    panels = {
        left = "explorer",
        right = "git"
    },
    -- panels defined by groups of components, user is free to redefine these
    -- or add more.
    panel_groups = {
        explorer = { outline.Name, explorer.Name, bookmarks.Name, callhierarchy.Name, terminalbrowser.Name },
        terminal = { terminal.Name },
        git = { changes.Name, commits.Name, timeline.Name, branches.Name }
    }
})
  1. ワークスペース」コマンドを実行する

  2. :h nvim-ide を起動して利用を開始する

使用感

今回は実際にインストールしてみることはしませんでしたが、YouTube の方に nvim-ide 作者が作成した説明動画が上がっているため、そちらを見てみると大変参考になります。

youtu.be

私自身も大まかに見たのですが、シンプルで Vim を操作するはずだった neovim が VSCode ライクな UI になっていたため、普段 VSCode を利用されている方にとってはとても使用感が良さげなものになっているかと思いました。

インストール方法自体もとても簡単なので、neovim を利用されている方にとってはその点も嬉しいですね。

まとめ

今回は、VSCode にインスパイアされ、neovim の完全な IDE レイヤーであるプラグインnvim-ide」をご紹介しました。

普段 neovim を利用されていてデザインを少し変えてみたいと考えている方や、neovim を利用し始めた方、これから Vim を利用するにあたり neovim エディタを触ってみたいなと考えている方など、幅広い方々にお勧めできる neovim 用のプラグインかと思います。

ぜひ一度、こちらのプラグインを試してみて、neovim の新しい扉を開いてみてはいかがでしょうか。

ライセンス

MIT License

リンク

github.com

youtu.be

Stable Diffusion を MacOS で簡単に利用してみたいなら!「Diffusion Bee」

概要

Stable Diffusion なるものをご存知でしょうか?

Stable Diffusion とは 2022 年 8 月に無償公開された描画 AI で、ユーザーがテキストでキーワードを入力することでそれに応じた画像が自動生成してくれる OSS サービスとなります。

huggingface.co

Stable Diffusion はキーワードを入力するだけで写真のような画像からイラストのような画像を描画させることができる OSS として近年人気を博しています。

Wiki からの画像となりますが、「乗馬する宇宙飛行士の写真」としてキーワードを入力すると下のような画像が出力されます。

そんな Stable Diffusion ですが、MacOS のローカル上で簡単に実行することができる OSS を見つけましたので今回はこちらについてご紹介します。

今回ご紹介する OSS は、画像生成 AI である OSS の Stable Diffusion を MacOS で簡単に利用する事ができる「Diffusion Bee」になります。

こちらの「Diffusion Bee」を利用すると、ワンクリックで Stable Diffusion を MacOS にインストールして簡単に利用する事ができます。

目次

特徴

主な特徴としては以下のように記載がありましたので、こちらでも紹介します。

  • 完全なデータ プライバシー - クラウドには何も送信されない (画像のアップロードを選択しない限り)
  • ワンクリック インストーラーによるクリーンで使いやすい UI
  • 画像のアップスケーリング
  • M1/M2 チップ用に最適化
  • コンピューター上でローカルに実行

なお、「Diffusion Bee」はコンピューター上でローカル実行されるため、データがクラウドに送信されることはないそうです。

利用手順

利用方法としては以下になります。

  1. アプリケーションをダウンロードして起動する

  1. プロンプトを入力し、生成をクリックします

テキストから画像へ:

画像から画像へ:

マスク付きの画像から画像へ:

修復:

外塗り:

歴史:

要件

Diffusion Bee」を利用するには以下の要件が必要となります。

  • Intel または M1/M2 CPU を搭載した Mac
  • MacOS 12.3.1 以降

まとめ

今回は画像生成 AI である OSS の Stable Diffusion を MacOS で簡単に利用する事ができる「Diffusion Bee」をご紹介しました。

最近話題になっている画像生成 AI ソフトを気軽に試してみたいという MacOS ユーザーにとってはとても役立つ内容だったかと思います。

本当に簡単に利用する事ができるため、興味があるればぜひ一度参照してみて、利用されてみてはいかがでしょうか?

ライセンス

GNU General Public License v3.0

リンク

diffusionbee.com

github.com