ドシロウトがOSもどきみたいのをHTMLで作ってみる

## ０．初めに

私はエンジニアではないただのドシロウトです。

多分、エンジニアの方は興味をもたない「OSもどき」という物に興味を持ってしまいました。

この記事では簡単なホームページくらいしかつくれないドシロウトが作ったHTMLベースの`疑似OSもどき`について書いています。

## １．OSもどきとは

* 某サイトによるとこんな定義らしいです。

  > 「OSというのは、WindowsやMac、Linuxなどパソコンを動かすのに必要なソフトウェアです。 OSもどきはそんなOSのデザインや動きを真似て作った、OS上で動く実行アプリケーションです。 要はOSに見せかけたハリボテです。他に「擬似OS」「サブOS」などの呼び方があります。」

  > 【ネットでみかけたOSもどきの画像】
  > ![画像](https://i.imgur.com/LLwkOZa.jpg)

* c#,なでしこ,プチコンなど作成言語は色々らしい

* ニコ動、YoutubeにはOSもどき動画が沢山あるらしい

* OS.jsなんてライブラリもあるらしい⇒ https://www.os-js.org

## ２．なぜOSもどきに興味を持ったのか

### (1).小さい8インチWindowsタブレットで使いたかった

  * 小さく軽いので持ち運びが楽なのにフルWindows
  * 短時間のもくもく会とかで使いたかった
  * 画面サイズがたった8インチなのに1200×800
  * Chromeのアドレスバーなんて超見づらい
  * スケーリングで120%にしたがそれでもつらい
  * ストレージがＯＳ込みでたった ３２GB
  * JavaScriptやPythonのエディタくらいほしい
  * IDEインストールなんてとても無理!!

  【8インチWindowsタブレット】
   ![](https://i.imgur.com/5Jg9gmL.jpg)

### (2).色々な端末で動かしたかった

  * 複数のWindowsタブレットとかでも使いたかった
  * AndroidやLinux Mintの端末でも使いたかった

  【linux Mintの端末】
  ![](https://i.imgur.com/DSRiQ9N.jpg)

### (3).HTMLなら簡単に作れそう

  * ダッシュボードみたいのならなんでも良かった
  * パッと思い付いたのがWindowsぽい画面
  * マルチウィンドウの方が使いやすそう
  * たまたまフローティングウィンドウのＪＳを見つけた

  [jsPanel 4](https://jspanel.de/)

  [フローティング・ウィンドウ ライブラリ JSFrame.js の紹介](        https://qiita.com/riversun/items/1adffa5674bc5123b16d)

  * ＪＳなら過去に作った自作ツールも流用してアプリぽくつかえる
  * codepenやjsfiddleからもアプリ候補をパクれる


## ３．作ったもの

なんとなくOSもどきみたいな見た目になりました…

※自分では`疑似OSもどき`と呼んでます。

![](https://i.imgur.com/rsDvk6y.jpg)

一応デモ版サイトあります。

https://sfosdemo.bitbucket.io/

### 技術的な話

  * 言語 : HTML，CSS，JSで作成
  * ライブラリ : 本体はjsPanel 4、各ウィンドウ：JSライブラリ多数
  * ホスト先 : Bitbucket Cloud(xxxxx.bitbucket.io)
  * コンテンツ管理 : Bitbucket(git:リモートリポジトリ)
  * クラウドIDE : Codenvy(git:ローカルリポジトリ)
  * 制約１：iframeなのでCORS制約あり
  * 制約２：httpsなのでmixed contentに注意が必要


## ４．コードの例

jsPanel 4で各ウィンドウ（フレーム）を生成するfunctionの例は以下です。簡単だと思います、

fnameにウィンドウの名前、furlにウィンドウ内で表示するURLを指定するだけです。

```javascript:seisei.js
function seisei(fname,furl) {

  var randomLeft = Math.floor( Math.random() * 11 )*10+20;
  var randomTop = Math.floor( Math.random() * 11 )*10+70;

  var frameWidth;
  var frameHeight;
  if (window.innerWidth > 700) {
    frameWidth = Math.floor(window.innerWidth/2);
  } else {
    frameWidth = 320;
  };
  if (window.innerHeight > 500) {
    frameHeight = Math.floor(window.innerHeight/2);
  } else {
    frameHeight = 220;
  };

  var frameparm;
  frameparm = frameWidth+" "+frameHeight;
  

  jsPanel.create({
    headerTitle: fname,
    panelSize: frameparm,
    position: {
          my:      "left-top",
          at:      "left-top",
          offsetX: randomLeft,
          offsetY: randomTop
    },
    content: '<iframe src="'+furl+'" style="width: 100%; height: 100%;"></iframe>',
  });

}
```

## ５．まとめ

* HTML＋CSS＋JSベースなので文字の大きさが自由で見やすい
* ウィンドウ生成はjsPanel 4がやってくれるので割と簡単
* JSのツールサンプルはネット上に沢山
* マルチウィンドウしても意外とメモリ喰わない（想定外）

`疑似OSもどき`は案外便利かなと思います。

追記１：この記事も`疑似OSもどき`の疑似アプリMDエディターで書きました(^^)v

【記事編集中の`疑似OSもどき`画面】
![編集中画面](https://i.imgur.com/KOd4hiP.jpg)

追記２：沢山「いいね」を頂いたのでうれしくてmacosぽい（なんとなく…あくまでイメージです）デモも作りました。

macosみたいな…デモ
https://sfosdemo.bitbucket.io/indexosx.html

いらないですが一応説明の動画です。（音声付）

[![youtube動画](http://img.youtube.com/vi/cRHPhPWL7Sk/0.jpg)](http://www.youtube.com/watch?v=cRHPhPWL7Sk)


以　上