Skip to content

Instantly share code, notes, and snippets.

@basictomonokai
Last active October 17, 2023 05:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save basictomonokai/1855a0884727f345f175ada989a6b749 to your computer and use it in GitHub Desktop.
Save basictomonokai/1855a0884727f345f175ada989a6b749 to your computer and use it in GitHub Desktop.
SF-OSブログのデータ
【その他】はじめに
このブログはSF-OS(Simple Fake OS(疑似OSもどき))に関する情報を掲載する場所として利用しています。
SF-OSに関する情報ポータルは以下のサイトです。
<a target="_blank" href="https://sf-os.landen.co/">Simple Fake OS(Mock OS)(疑似OSもどき)</a>
このブログではSF-OSに搭載可能だった世の中の便利なJSライブラリ等について投稿する予定です。
よろしくお願いいたします。
SF-OS Team
【疑似アプリ】パソコン画面を録画するツール
SF-OSに疑似アプリとして搭載可能なJSライブラリのご紹介です。
<a target="_blank" href="https://www.moongift.jp/2020/02/web-video-capture-web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%a7%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3/">Web Video Capture - Webブラウザでスクリーンキャプチャ MOONGIFT</a>
なんとパソコン画面をキャプチャしてWebM形式の動画にできます。
実際に搭載してテストしたときの画像が以下。
<img width="30%" src="https://i.imgur.com/ZcZufJv.jpg">
見た目のCSSの調整のみでSF-OSに搭載可能です。
SF-OS Team
【その他】アイコン作成に便利なサイト
SF-OSでは疑似アプリ起動用に48pxのアイコンが必要となります。
アイコンの作り方が分からない方にお勧めのサイトが以下です。
<a target="_blank" href="https://icons8.jp/">Icons8-フリーアイコン、音楽、写真素材、ベクターをダウンロード</a>
沢山のアイコンが無料でダウンロードできます。
さらに簡単な加工や色変更もできますので便利です。
SF-OS Team
【その他】疑似アプリ候補をさがすのに便利なサイト
疑似アプリに使えそうなJSを探すのに便利なサイトはスニペット共有サイトになります。
おすすめサイト
1.CodePen
<a target="_blank" href="https://codepen.io/">CodePen: Build, Test, and Discover Front-end Code.</a>
以下の様に電卓のスニペットがあります。
<iframe height="265" style="width: 100%;" scrolling="no" title="Memory-first Calculator" src="https://codepen.io/jakealbaugh/embed/hAdel?height=265&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/jakealbaugh/pen/hAdel'>Memory-first Calculator</a> by Jake Albaugh
(<a href='https://codepen.io/jakealbaugh'>@jakealbaugh</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
2.JSFiddle
<a target="_blank" href="https://jsfiddle.net/">JSFiddle - Code Playground</a>
JSFiddleは老舗のスニペット共有サイトです。
<img width="30%" src="https://i.imgur.com/E75YQ2a.jpg">
ほかにもスニペット共有サイトはたくさんありますので疑似アプリを探すのに便利です。
SF-OS Team
【疑似アプリ】電子書籍リーダ
WEB版の電子書籍リーダのJSライブラリもあり疑似OSもどきに組み込み可能です。
<a target="_blank" href="https://bibi.epub.link/">Bibi | EPUB Reader on your website</a>
<a target="_blank" href="https://bibi.epub.link/manual.html">Bibi | Manual - ビビ 設置マニュアル</a>
[動作テスト時のアニメGIF]
<img width="50%" src="https://i.imgur.com/s0oVakN.gif">
SF-OS Team
【疑似アプリ】任意のWebサイトをスクショ
公開されている以下のWEBAPIを使って疑似アプリ用画面を作る例です。
<a target="_blank" href="http://kachibito.net/useful-resource/apiflash">任意のWebサイトのスクリーンショットを撮れるAPI・「ApiFlash」 | かちびと.net</a>
無料利用の場合、APIキーを取得すれば月に100スクショまで取得できるみたいです。
ApiFlashの場合、JavaScriptのFetch APIが使えましたので作ったHTMLファイルが以下。
<iframe src="https://pastebin.com/embed_iframe/DSjeLkYN" style="border:none;width:100%"></iframe>
動作確認時のアニメGIFが以下になります。
[動作テスト時のアニメGIF]
<img width="50%" src="https://i.imgur.com/R4uaoK9.gif">
割と簡単に疑似アプリ画面がつくれます。
参考記事:
<a target="_blank" href="https://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574">お疲れさまXMLHttpRequest、こんにちはfetch - Qiita</a>
<a target="_blank" href="https://developer.mozilla.org/ja/docs/Web/API/Body/blob">Body.blob() - Web API | MDN</a>
<a target="_blank" href="http://placehold.jp/">Placehold.jp|ダミー画像生成 モック用画像作成</a>
SF-OS Team
【やっと0.3へ】SF-OS V0.3p1 Released!
<iframe width="560" height="315" src="https://www.youtube.com/embed/lGPPx-tVWTY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
長い間、Version0.2だったSF-OSが、ようやくVersion0.3になりました。
おもな機能変更は、以下です。
・デスクトップを右クリックでクイックメニューを起動。
・クイックメニュー内に、壁紙設定機能を追加。
・アイコンをトップバーからデスクトップにドラッグドロップ可能。(但し、タッチパネル非対応。)
・アイコンにツールチップ設定。
SF-OSはWebベースの疑似OSもどきです。
SF-OSは、いつでも、どこでも、どのコンピュータでも、"Same Desktop!"を方針として開発されています。
SF-OSは、同じデスクトップをあなたのパソコンにお届けします。
SF-OS, which was Version 0.2 for a long time, has finally become Version 0.3.
Main function changes are as follows.
-Right-click on the "Desktop" to launch "Quickmenu".
-Added a wallpaper setting function in "Quickmenu".
-Icons can be drag and drop from "Top-bar" to "Desktop". (However, touch panel is not supported.)
-Set tooltips for Icons.
SF-OS is a web-based fake OS.
SF-OS is developed with "Same Desktop!" as a policy,anytime, anywhere,any computer.
SF-OS brings "Same Desktop!" to your computer.
SF-OS Team
【テスト中】ユーザー作成Fake-Appへの挑戦。
<iframe width="560" height="315" src="https://www.youtube.com/embed/7K7Udb7kjC0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
SF-OSは、プリセットされたFake-Appしか、利用できません。
ユーザが作成したFake-AppをSF-OSに追加できませんでした。
今、ユーザー作成Fake-Appを、Codepen.io経由でSF-OSに追加できる機能をテスト中です。
Codepen.ioは、有名なオンラインIDEであり、セキュアなサンドボックスでもあります。
ユーザーは、Codepen.ioでFake-Appを作成、テストします。次にEmbed用snippetをSF-OSに貼り付けるだけです。
上記の変更により、ユーザー自身のFake-AppをSF-OSで利用できる予定です。
Challenge to user-created Fake-App.
SF-OS was only available in the preset Fake-App.
User-created Fake-App cannot be added to SF-OS.
We are currently testing the ability to add user-created Fake-Apps to SF-OS via Codepen.io.
Codepen.io is a well-known online IDE and a secure sandbox.
Users create and test Fake-Apps on Codepen.io. Then just paste Snippet for Embed into SF-OS.
With the above changes, users' own Fake-App will be available on SF-OS.
SF-OS is a web-based fake OS.
SF-OS is developed with "Same Desktop!" as a policy,anytime, anywhere,any computer.
SF-OS brings "Same Desktop!" to your computer.
SF-OS Team
<span id="androidapp"></span>【その他】iPlay 50 mini Pro上でSF-OSアプリを動かす。
0.はじめに
SF-OSをAndroidアプリ化したらどうなったのかレポートします。
SF-OSはただのWEBサイトベースのOSもどきであり、Androidでも
<a target="_blank" href="https://sfosdemo.bitbucket.io/">ブラウザーに表示</a>して利用可能です。
どのサイトでやったのか覚えていないのですが、一般のWEBサイトを
Androidアプリ(APKファイル)に変換するWEBサービスはたくさんあります。
例えば、<a target="_blank" href="https://www.webintoapp.com/">WEBINTOAPP</a>などは有名だと思います。
アプリ化しないでもPWAというWEB技術で同じようなことはできますが、
より簡単にアプリ化できるところがメリットだと思います。
今回、8.4インチのAndroidタブレットiPlay 50 mini Pro(写真)で
SF-OSを動かすのに、APKが便利だったので、記事にしてみました。
<img width="50%" src="https://media.mstdn.jp/media_attachments/files/111/140/312/035/834/407/original/70aa9e7917de0b93.jpeg">
1.テストしたAPK
一応、ダウンロードできるようにしてありますが、あくまで自己責任でお願いします。
<a target="_blank" href="https://laboratory.main.jp/sfosapk/">【ダウンロードページ】</a>
※APKファイルをAndroidにインストールする方法は、この記事では説明しません。
2.テストした動画
インストール後に実際に動かしてみた動画が以下です。
<a target="_blank" href="https://streamable.com/kehz56">【テスト動画】</a>
動画の通り、基本的には、問題なく、普通に動きます。
3.おわりに
アプリ化のメリットは、以下かなぁと思ってます。
* PWAより簡単にアプリ化できる
* アドレスバー、タイトルバーがなく、面が広く使える
* SF-OSの本体(WEB版)が更新されると更新される
OSもどきをアプリ化してもいいかもしれませんね。
SF-OS Team
【紹介】SF-OSターミナル版
すでに、公開されていますが、SF-OSにはターミナル版があります。
ターミナル版
<img width="50%" src="https://i.imgur.com/klyfvCd.png">
通常の<a target="_blank" href="https://sfosdemo.bitbucket.io/">SF-OS</a>は、アイコンから疑似アプリを起動して利用しますが、ターミナル版は、
コマンド入力欄からコマンドを入力して利用します。
ターミナル版は、通常のSF-OSの画面を右クリックしてサブメニューから「ターミナル版切替」を選択して起動します。
ターミナル版切替
<img width="50%" src="https://i.imgur.com/r1a7plf.png">
ターミナル版でどのようなコマンドが利用できるかは、「help」コマンドで確認できます。
helpの画面
<img width="50%" src="https://i.imgur.com/tQg9sph.png">
例えば、Youtubeの動画を表示できる機能や、SF-OSを利用してるPC同士でのメッセージ通信機能などがあります。
youtubeコマンド
<img width="50%" src="https://i.imgur.com/9pAfo9i.png">
ターミナル版では、主に実験的な機能を取り扱っています。
SF-OS Team
【100日限定無償ダウンロード開始】SF-OSがZIP形式でダウンロードできます。
<img width="50%" src="https://i.imgur.com/N7A5ZDW.png">
SF-OSは、<a target="_blank" href="https://sfosdemo.bitbucket.io/">デモサイト</a>があり、無料で利用できますが、自分用にカスタマイズしたい方向けに100日間限定で無償ダウンロードを可能にしました。
無料ダウンロードは、ギガファイル便経由でZIP形式でダウンロードできます。
<a target="_blank" href="https://jbbs.shitaraba.net/bbs/read.cgi/computer/44945/1696902295/3">ダウンロードの説明ページ(掲示板)</a>
ただのHTML,CSS,Javascriptのファイル群なので、そのままWEBサイトにアップすれば、ほぼ利用できると思います。
改造したいニーズがどの程度のあるのかわかりませんが、よろしければお試しください。
SF-OSの紹介は<a target="_blank" href="https://sf-os.landen.co/">こちら</a>をご覧ください。
SF-OS Team
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment