Merge pull request #28 from 01397/dev

ドメイン変更とCI更新

Author: 01397

.github/workflows/deploy.yml

@@ -16,6 +16,8 @@ jobs:
           cache: 'npm'
       - run: npm install
       - run: npm run build
+        env:
+          VITE_APP_VERSION: ${{ github.ref_name }}
       - name: Publish to Cloudflare Pages
         uses: cloudflare/wrangler-action@v3
         with:

README.md

@@ -9,7 +9,7 @@ OuDiaファイル(.oud), OuDiaSecondファイル(.oud2)を開くことができ
 Chromeを推奨しています。おそらく、Edge, Firefox, Safariの最新版でも動作すると思います。Internet Explorerはサポートしていません。
 
 ## 試す
-[http://onemu.starfree.jp/clouddia/](http://onemu.starfree.jp/clouddia/)で公開しています。
+[https://clouddia.01397.dev/clouddia/](https://clouddia.01397.dev/clouddia/)で公開しています。
 
 ## DiagramParser.js
 [DiagramParser.js](dist/js/DiagramParser.js) を用いてOudia, OudiaSecondのファイルをロードするのに使うことができます。DiagramParser.jsは[Util.js](dist/js/Util.js)に依存しているのでDiagramParser.jsとUtil.jsは同じディレクトリに含める必要があります。もちろん[Typescript版](src)もあります。

index.html

@@ -5,12 +5,12 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta property="og:image" content="http://onemu.starfree.jp/clouddia/img/logo.png" />
+  <meta property="og:image" content="https://clouddia.01397.dev/clouddia/img/logo.png" />
   <meta property="og:locale" content="ja_JP" />
   <meta property="og:site_name" content="CloudDia" />
   <meta property="og:title" content="CloudDia" />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="http://onemeu.starfree.jp/clouddia/" />
+  <meta property="og:url" content="https://clouddia.01397.dev/clouddia/" />
   <meta property="og:description" content="oudiaファイルをブラウザで！" />
   <meta name="twitter:card" content="summary" />
   <meta name="twitter:site" content="@01397dev" />
@@ -28,7 +28,6 @@
   </script>
   <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,500&display=swap&subset=japanese"
     rel="stylesheet">
-  <link rel="stylesheet" href="/style.css?v0.4.4">
   <script src="src/main.ts" type="module"></script>
 </head>
 

package-lock.json

@@ -1,8 +1,7 @@
 {
   "name": "clouddia",
-  "version": "0.4.4",
   "description": "Online Diagram Editor",
-  "homepage": "http://onemu.starfree.jp/clouddia/",
+  "homepage": "https://clouddia.01397.dev/clouddia/",
   "main": "src/main.ts",
   "repository": "git@github.com:01397/clouddia.git",
   "author": "01397 <41501869+01397@users.noreply.github.com>",

package.json

@@ -13,7 +13,8 @@ import TrainTypeSettingView from './components/TrainTypeSettingView.js';
 import View, { viewTypeString } from './components/View.js';
 import DiagramParser, { DiagramFile, Train } from './DiagramParser.js';
 import Encoding from 'encoding-japanese';
-import { h, Menu } from './Util.js';
+import { Dialog, h, Menu } from './Util.js';
+import './styles/app.css';
 
 export interface SelectionObject {
   train?: Train;
@@ -94,7 +95,9 @@ export default class App {
   private menu: MenuItem[];
 
   constructor(root: Element) {
-    this.version = '0.4.4';
+    this.version = import.meta.env.PROD
+      ? import.meta.env.VITE_APP_VERSION
+      : 'dev-build';
     this.sidebarElm = h('aside', { id: 'sidebar' }, null);
     this.toolbarElm = h('div', { id: 'toolbar' }, null);
     this.tabbarElm = h('div', { id: 'tabbar' }, null);
@@ -221,7 +224,7 @@ export default class App {
   public save() {
     //const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
     const unicodeArray: number[] = [];
-    const oudiaString = this.data.saveAsOud('CloudDia v' + this.version);
+    const oudiaString = this.data.saveAsOud('CloudDia ' + this.version);
     for (let i = 0; i < oudiaString.length; i++) {
       unicodeArray.push(oudiaString.charCodeAt(i));
     }
@@ -248,6 +251,12 @@ export default class App {
       .catch((e: Error) => {
         // tslint:disable-next-line: no-console
         console.error('parse error.', e);
+        const dialog = new Dialog({
+          title: 'ファイル読み込みエラー',
+          message: '時刻表ファイルとして認識できませんでした。',
+          buttons: ['OK'],
+        });
+        dialog.show();
       });
   }
   public initialize(diagram: DiagramFile) {
@@ -260,19 +269,40 @@ export default class App {
     this.showTrainTimetableView(0, 0);
   }
   public loadOnlineFile(fileURL: string) {
-    const url = 'http://soasa.starfree.jp/fileRequest.php?url=' + fileURL;
-    fetch(url, { mode: 'cors' })
-      .then((response) => response.blob())
-      .then(
-        (blob) =>
-          new Promise(() => {
-            const reader = new FileReader();
-            reader.onload = () =>
-              this.loadOudia(reader.result as string, 'Web上のファイル');
-            reader.readAsText(blob, 'shift-jis');
-          })
-      )
+    fetch(fileURL, { mode: 'cors' })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTPステータスコード: ${response.status}`);
+        }
+        return response.blob();
+      })
+      .then((blob) => {
+        const reader = new FileReader();
+        reader.onload = () =>
+          this.loadOudia(reader.result as string, 'Web上のファイル');
+        reader.onerror = (e) => {
+          const dialog = new Dialog({
+            title: 'ファイル読み込みエラー',
+            message: 'ファイルの読み取りに失敗しました。',
+            buttons: ['OK'],
+          });
+          dialog.show();
+        };
+        reader.readAsText(blob, 'shift-jis');
+      })
       .catch((err) => {
+        const message =
+          err instanceof TypeError
+            ? 'CORSポリシーにより、読み込みがブロックされている可能性があります。'
+            : err instanceof Error
+              ? err.message
+              : '';
+        const dialog = new Dialog({
+          title: 'ファイル読み込みエラー',
+          message: '指定のURLからファイルを読み込めませんでした。' + message,
+          buttons: ['OK'],
+        });
+        dialog.show();
         throw err;
       });
   }

src/App.ts

@@ -112,7 +112,7 @@ export default class StartView extends View {
         h(
           'p',
           { class: 'start-readme-paragraph' },
-          'ブラウザ上で時刻表ファイルを見れたらいいなぁ〜という気持ちを込めて開発中の作品。OuDia, OuDiaSecondのファイルを表示することが多分できます。web上のファイルは"http://onemu.starfree.jp/clouddia/?url=[時刻表ファイルのURL]"で開くこともできます。'
+          'ブラウザ上で時刻表ファイルを見れたらいいなぁ〜という気持ちを込めて開発中の作品。OuDia, OuDiaSecondのファイルを表示することが多分できます。web上のファイルは"https://clouddia.01397.dev/clouddia/?url=[時刻表ファイルのURL]"で開くこともできます。'
         ),
         h('h1', { class: 'start-readme-heading' }, '注意事項'),
         h(
@@ -148,7 +148,7 @@ export default class StartView extends View {
           h('a', { href: 'https://github.com/01397/clouddia' }, 'GitHub'),
         ]),
         h('p', { class: 'start-readme-paragraph' }, [
-          document.createTextNode('バージョン: v' + this.app.version + ' '),
+          document.createTextNode('バージョン: ' + this.app.version + ' '),
           h(
             'a',
             {

src/components/StartView.ts

@@ -20,9 +20,9 @@ document.addEventListener('DOMContentLoaded', () => {
   // tslint:disable-next-line: no-console
   console.log(
     '%c %cWelcome To\n%c %cCloud %cDia',
-    'padding:0px 32px;background-image:url(http://onemu.starfree.jp/clouddia/img/logo_icon_dark.svg);background-size:cover;background-position:0 -10px;',
+    'padding:0px 32px;background-image:url(https://clouddia.01397.dev/clouddia/img/logo_icon_dark.svg);background-size:cover;background-position:0 -10px;',
     'font-size:14px;font-style:italic;',
-    'padding:16px 32px;background-image:url(http://onemu.starfree.jp/clouddia/img/logo_icon_dark.svg);background-size:cover;background-position:0 -24px;',
+    'padding:16px 32px;background-image:url(https://clouddia.01397.dev/clouddia/img/logo_icon_dark.svg);background-size:cover;background-position:0 -24px;',
     'padding:4px 0 4px 8px;color: #888888;font-size:24px;background-color:#1f1a24;background-image:linear-gradient(to right, #52a8ff00, #52a8ffaa );background-size: 100% 2px;background-position:0 calc(100% - 4px); background-repeat: no-repeat;border-radius:4px 0 0 4px',
     'padding:4px 8px 4px 0;color:#a852ff;font-size:24px;background-color:#1f1a24;background-image:linear-gradient(to right, #52a8ffaa, #52a8ff 90%);background-size: 100% 2px;background-position:0 calc(100% - 4px); background-repeat: no-repeat;border-radius:0 4px 4px 0'
   );

src/main.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  // VITE_APP_VERSIONは、GitHub Actionsによるビルド時にGit tagから取得したバージョン番号を設定する
+  // 例: "v0.1.0"
+  VITE_APP_VERSION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}