Last active
May 9, 2020 22:38
-
-
Save basictomonokai/0513df5ebfd495bebb759930eee2625e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class: center, middle | |
| # ＯＳもどきについて | |
| --- | |
| ### 自己紹介 | |
| @basictomonokai | |
| .left[] | |
| * ただのおじさん | |
| * .red[非エンジニア] | |
| * 趣味でプログラミング（ＪＳ、ＧＡＳあたり） | |
| * 元はBASIC界隈の人（低レベル） | |
| --- | |
| ### １．ＯＳもどきとは（１） | |
| * 某サイトによるとこんな定義らしい | |
| > 「OSというのは、WindowsやMac、Linuxなどパソコンを動かすのに必要なソフトウェアです。 | |
| OSもどきはそんなOSのデザインや動きを真似て作った、OS上で動く実行アプリケーションです。 | |
| 要は.red[OSに見せかけたハリボテです]。他に「擬似OS」「サブOS」などの呼び方があります。」 | |
| * c#,なでしこ,プチコンなど作成言語は色々らしい | |
| * ニコ動にはOSもどき動画が沢山あるらしい | |
| * OS.jsなんてライブラリもあるらしい⇒ [https://www.os-js.org](https://www.os-js.org) | |
| --- | |
| ### １．ＯＳもどきとは（２） | |
| <img src="https://i.imgur.com/LLwkOZa.jpg"> | |
| --- | |
| ###２．なぜ私がＯＳもどき？（１） | |
| #### .red[8インチWindowsタブレットで使いたかった] | |
| * 小さく軽いので持ち運びが楽なのにフルWindows | |
| * 短時間のもくもく会とかで使いたかった | |
| * 画面サイズがたった8インチなのに1200×800 | |
| * Chromeのアドレスバーなんて超見づらい | |
| * スケーリングで120%にしたがそれでもつらい | |
|  | |
| --- | |
| ###２．なぜ私がＯＳもどき？（２） | |
| #### .red[ストレージを節約したかった] | |
|  | |
| * ストレージがＯＳ込みでたった .red[３２GB] | |
| * ほとんどソフトを入れられない | |
| * JavaScriptやPythonのエディタくらいほしい | |
| * IDEインストールなんてとても無理!! | |
| --- | |
| ###２．なぜ私がＯＳもどき？（３） | |
| #### .red[色々な端末で動かしたかった] | |
| > <img src="https://i.imgur.com/xkVzKMH.jpg" width="20%"> | |
| * 複数のWindowsタブレットとかでも使いたかった | |
| * AndroidやLinuxの端末でも使いたかった | |
| --- | |
| ###２．なぜ私がＯＳもどき？（４） | |
| #### .red[いいデザインが思いつかなかった] | |
| * ダッシュボードみたいのならなんでも良かった | |
| * パッと思い付いたのがWindowsぽい画面 | |
| * マルチウィンドウの方が使いやすそう | |
| * たまたまフローティングウィンドウのＪＳを見つけた | |
| >jsPanel 4 | |
| >https://jspanel.de/ | |
| * ＪＳなら過去に作った自作ツールも流用できる | |
| * codepenやjsfiddleからもパクれる | |
| --- | |
| ### ３．作ったもの（１） | |
| #### .red[ダッシュボードのはずがＯＳもどきっぽく…] | |
| <img src="https://i.imgur.com/c18ycrt.png"> | |
| --- | |
| ### ３．作ったもの（２） | |
| #### .red[技術的な話] | |
| * 言語 : ＨＴＭＬ，ＣＳＳ，ＪＳで作成 | |
| * ライブラリ : 本体はJSFrame.js、各ウィンドウ：JSライブラリ多数 | |
| * ホスト先 : Bitbucket Cloud(xxxxx.bitbucket.io) | |
| * コンテンツ管理 : Bitbucket(git:リモートリポジトリ) | |
| * クラウドIDE : Codenvy(git:ローカルリポジトリ) | |
| * 制約１：iframeなのでCORS制約あり | |
| * 制約２：httpsなのでmixed contentに注意が必要 | |
| --- | |
| ### ４．いらない機能説明（１） | |
| * タスクバー…ただのランチャーボタン | |
| > <img src="https://i.imgur.com/J28hdcW.png"> | |
| * カレンダ…Codepen丸パクリ | |
| > <img src="https://i.imgur.com/SLuMoWx.png" height="250px"> | |
| --- | |
| ### ４．いらない機能説明（２） | |
| * マストドンリーダ…ほぼ自作だったと… | |
| > <img src="https://i.imgur.com/yVzKe49.png" height="350px"> | |
| --- | |
| ### ４．いらない機能説明（３） | |
| * エディタ…JS用、ほかにPython用、BASIC!用（入力補完あり） | |
| > <img src="https://i.imgur.com/sYWx6nN.png" height="350px"> | |
| --- | |
| ### ４．いらない機能説明（４） | |
| * スライド作成…このスライドもこれで作りました | |
| > <img src="https://i.imgur.com/JTWAckI.png" height="350px"> | |
| --- | |
| ### ４．いらない機能説明（その他） | |
| * その他…ニュース検索や音楽、マークダウンエディタなどいろいろ | |
| > <img src="https://i.imgur.com/FMRDkC2.png" height="350px"> | |
| --- | |
| ### ５．まとめ | |
| #### .red[ＯＳもどきっぽいのは意外と便利！！] | |
| * HTML＋CSS＋JSベースなので文字の大きさが自由で見やすい | |
| * ウィンドウ生成はjsPanel 4がやってくれるので割と簡単 | |
| * JSのツールサンプルはネット上に沢山 | |
| * マルチウィンドウしても意外とメモリ喰わない（想定外） | |
| --- | |
| class: center, middle | |
| ## OSは作れないけど… | |
| ## もどきなら…(^_^;) | |
| ## - おしまい - | |
| --- | |
| ### 補足．jsPanel 4の使い方 | |
| イベントリスナーでタスクバーのアイコンをタップすると | |
| ウィンドウを生成してるだけ… | |
| * アイコンのHTML | |
| > <img src="https://i.imgur.com/mgBTY3Y.png" width="80%"> | |
| --- | |
| * JS（ウィンドウの生成） | |
| > <img src="https://i.imgur.com/DrmRo9u.jpg" width="80%"> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment