自動クローン

Dockerfile

@@ -14,11 +14,13 @@ RUN chmod -R 777 /app
 # 依存関係をインストール（競合を無視）
 #RUN PNPM_SKIP_BUILDS_APPROVAL=true pnpm install --prefer-offline --strict-peer-dependencies=false
 RUN npm install --prefer-offline --no-audit --legacy-peer-deps
+RUN npm install --save-dev @svgr/webpack@5
 
 # OpenSSL の互換オプションを有効化
 #ENV NODE_OPTIONS="--openssl-legacy-provider"
 RUN sed -i 's/\$PORT/3000/g' package.json
-
+RUN export NODE_OPTIONS="--max-old-space-size=12288"
+ENV NODE_OPTIONS="--max-old-space-size=12288"
 #RUN PNPM_SKIP_BUILDS_APPROVAL=true pnpm install scratch-vm@git+https://huggingface.co/datasets/soiz1/s4s-vm
 RUN npm install scratch-vm@git+https://huggingface.co/datasets/soiz1/s4s-vm
 # コンテナの起動時にサーバーを実行

README.md

@@ -295,4 +295,5 @@ Here's what will happen in the project state machine:
 ## Donate
 We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
 
--->
+-->
+app_port: 3000

package.json

@@ -90,7 +90,7 @@
     "redux-throttle": "0.1.1",
     "scratch-audio": "github:PenguinMod/PenguinMod-Audio#develop",
     "scratch-blocks": "github:PenguinMod/PenguinMod-Blocks#develop-builds",
-    "scratch-paint": "github:PenguinMod/PenguinMod-Paint#develop",
+    "scratch-paint": "git+https://huggingface.co/datasets/soiz1/s4s-paint",
     "scratch-render": "github:PenguinMod/PenguinMod-Render#develop",
     "scratch-render-fonts": "github:PenguinMod/penguinmod-render-fonts#master",
     "scratch-storage": "github:PenguinMod/PenguinMod-Storage#develop",

src/addons/addons/hide-flyout/style.css

@@ -24,7 +24,7 @@
   right: -1px;
 }
 .sa-flyout-border-1 {
-  border-left: 1px solid var(--ui-primary, hsla(215, 100%, 95%, 1));
+  border-left: 1px solid var(--ui-primary, hsla(259, 100%, 95%, 1));
 }
 .sa-flyout-border-2 {
   border-left: 1px solid var(--ui-black-transparent, rgba(0, 0, 0, 0.15));
@@ -85,7 +85,7 @@
 }
 
 .sa-lock-object.locked .sa-lock-button {
-  background-color: #00c3ff;
+  background-color: #5100ff;
   border-color: #0099ff;
 }
 

src/addons/addons/onion-skinning/style.css

@@ -2,7 +2,7 @@
   position: relative;
 }
 .sa-onion-button:focus-within {
-  background-color: hsla(194, 100%, 50%, 0.2);
+  background-color: hsla(259, 100%, 50%, 0.2);
 }
 [theme="dark"] .sa-onion-image {
   filter: brightness(0) invert(0.8);
@@ -11,7 +11,7 @@
   filter: brightness(0) invert(1);
 }
 .sa-onion-button[data-enabled="true"] {
-  background-color: #00c3ff;
+  background-color: #5100ff;
 }
 
 .sa-onion-group {

src/addons/addons/paint-gradient-maker/userscript.js

@@ -284,7 +284,7 @@ export default async function () {
 
     /* GUI Utils */
     function getButtonURI(name, dontCompile) {
-        const themeHex = isPM ? "#00c3ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
+        const themeHex = isPM ? "#5100ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
         const guiSVG = guiIMGS[name].replace("red", themeHex);
         if (dontCompile) return guiSVG;
         else return "data:image/svg+xml;base64," + btoa(guiSVG);
@@ -497,7 +497,7 @@ export default async function () {
     }
 
     function genButtonTable(div) {
-        const themeHex = isPM ? "#00c3ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
+        const themeHex = isPM ? "#5100ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
         const btnStyle = `color: #fff; font-weight: 600; text-align: center; padding: 10px; margin: 10px 5px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: ${themeHex}; transition: transform 0.2s;`;
 
         const enterBtn = document.createElement("button");

src/addons/addons/paint-snap/userstyle.css

@@ -2,7 +2,7 @@
   position: relative;
 }
 .sa-paint-snap-button:focus-within {
-  background-color: hsla(194, 100%, 65%, 0.2);
+  background-color: hsla(259, 100%, 65%, 0.2);
 }
 .sa-paint-snap-button[data-enabled="true"] .sa-paint-snap-image {
   filter: brightness(0) invert(1);

src/components/filter/filter.jsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import filterIcon from './icon--filter.svg';
-import xIcon from './icon--x.svg';
+import { ReactComponent as FilterIcon } from './icon--filter.svg';
+import { ReactComponent as XIcon } from './icon--x.svg';
 import styles from './filter.css';
 
 const FilterComponent = props => {
@@ -21,10 +21,7 @@ const FilterComponent = props => {
                 [styles.isActive]: filterQuery.length > 0
             })}
         >
-            <img
-                className={styles.filterIcon}
-                src={filterIcon}
-            />
+            <FilterIcon className={styles.filterIcon} />
             <input
                 className={classNames(styles.filterInput, inputClassName)}
                 placeholder={placeholderText}
@@ -36,10 +33,7 @@ const FilterComponent = props => {
                 className={styles.xIconWrapper}
                 onClick={onClear}
             >
-                <img
-                    className={styles.xIcon}
-                    src={xIcon}
-                />
+                <XIcon className={styles.xIcon} />
             </div>
         </div>
     );

src/components/gui/dump.html

@@ -1,7 +1,7 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.00999"
     height="16.04844" viewBox="0,0,12.00999,16.04844">
     <g transform="translate(-233.95947,-171.97578)">
-        <g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill="none" fill-rule="nonzero" stroke="#00c3ff"
+        <g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill="none" fill-rule="nonzero" stroke="#5100ff"
             stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray=""
             stroke-dashoffset="0" style="mix-blend-mode: normal">
             <path d="M234.70947,187.27422v-14.54844h5.50805l4.96921,5.02909v9.51935z" />

src/components/gui/gui.css

@@ -130,7 +130,7 @@
     background: none;
     border-color: rgba(255,255,255,.15);
 }
-[theme="dark"] .add-tab-button img {
+[theme="dark"] .add-tab-button svg {
     filter: invert(1);
 }
 .add-tab-button-disabled {
@@ -141,7 +141,7 @@
     display: flex;
     align-items: center;
 }
-.tab-addition-item img {
+.tab-addition-item svg {
     width: 1.375rem;
 }
 
@@ -189,29 +189,29 @@
     background-color: $ui-secondary;
 }
 
-.tab img {
+.tab svg {
     width: 1.375rem;
     filter: grayscale(100%);
 }
 
-[dir="ltr"] .tab img {
+[dir="ltr"] .tab svg {
     margin-right: 0.125rem;
 }
 
-[dir="rtl"] .tab img {
+[dir="rtl"] .tab svg {
     margin-left: 0.125rem;
 }
 
 /* mirror blocks and sound tab icons */
-[dir="rtl"] .tab:nth-of-type(1) img {
+[dir="rtl"] .tab:nth-of-type(1) svg {
     transform: scaleX(-1);
 }
 
-[dir="rtl"] .tab:nth-of-type(3) img {
+[dir="rtl"] .tab:nth-of-type(3) svg {
     transform: scaleX(-1);
 }
 
-.tab.is-selected img {
+.tab.is-selected svg {
     filter: none;
 }
 

src/components/gui/gui.jsx

@@ -50,13 +50,13 @@ import {resolveStageSize} from '../../lib/screen-utils';
 import {isRendererSupported, isBrowserSupported} from '../../lib/tw-environment-support-prober';
 
 import styles from './gui.css';
-import plusIcon from './add-tab.svg';
-import addExtensionIcon from './icon--extensions.svg';
-import codeIcon from './icon--code.svg';
-import costumesIcon from './icon--costumes.svg';
-import soundsIcon from './icon--sounds.svg';
-import variablesIcon from './icon--variables.svg';
-import filesIcon from './icon--files.svg';
+import { ReactComponent as PlusIcon } from './add-tab.svg';
+import { ReactComponent as AddExtensionIcon } from './icon--extensions.svg';
+import { ReactComponent as CodeIcon } from './icon--code.svg';
+import { ReactComponent as CostumesIcon } from './icon--costumes.svg';
+import { ReactComponent as SoundsIcon } from './icon--sounds.svg';
+import { ReactComponent as VariablesIcon } from './icon--variables.svg';
+import { ReactComponent as FilesIcon } from './icon--files.svg';
 
 const urlParams = new URLSearchParams(location.search);
 
@@ -226,10 +226,7 @@ const GUIComponent = props => {
     // currently each tab can decide whether or not its hidden, remove this once rearranging tabs is supported
     const codeTab = (<Tab className={classNames(tabClassNames.tab, tabOrder.includes('code') ? null : styles.tabDisabled)}>
             <ContextMenuWrapTab tabId="code">
-                <img
-                    draggable={false}
-                    src={codeIcon}
-                />
+                <CodeIcon />
                 <FormattedMessage
                     defaultMessage="Code"
                     description="Button to get to the code panel"
@@ -239,10 +236,7 @@ const GUIComponent = props => {
         </Tab>);
     const costumesTab = (<Tab className={classNames(tabClassNames.tab, tabOrder.includes('costume') ? null : styles.tabDisabled)} onClick={onActivateCostumesTab}>
             <ContextMenuWrapTab tabId="costume">
-                <img
-                    draggable={false}
-                    src={costumesIcon}
-                />
+                <CostumesIcon />
                 {targetIsStage ? (
                     <FormattedMessage
                         defaultMessage="Backdrops"
@@ -260,10 +254,7 @@ const GUIComponent = props => {
         </Tab>);
     const soundsTab = (<Tab className={classNames(tabClassNames.tab, tabOrder.includes('sound') ? null : styles.tabDisabled)} onClick={onActivateSoundsTab}>
             <ContextMenuWrapTab tabId="sound">
-                <img
-                    draggable={false}
-                    src={soundsIcon}
-                />
+                <SoundsIcon />
                 <FormattedMessage
                     defaultMessage="Sounds"
                     description="Button to get to the sounds panel"
@@ -273,10 +264,7 @@ const GUIComponent = props => {
         </Tab>);
     const variablesTab = (<Tab className={classNames(tabClassNames.tab, tabOrder.includes('variable') ? null : styles.tabDisabled)} onClick={onActivateVariablesTab}>
             <ContextMenuWrapTab tabId="variable">
-                <img
-                    draggable={false}
-                    src={variablesIcon}
-                />
+                <VariablesIcon />
                 <FormattedMessage
                     defaultMessage="Variables"
                     description="Button to get to the variables panel"
@@ -286,10 +274,7 @@ const GUIComponent = props => {
         </Tab>);
     const filesTab = (<Tab className={classNames(tabClassNames.tab, tabOrder.includes('file') ? null : styles.tabDisabled)} onClick={onActivateFilesTab}>
             <ContextMenuWrapTab tabId="file">
-                <img
-                    draggable={false}
-                    src={filesIcon}
-                />
+                <FilesIcon />
                 <FormattedMessage
                     defaultMessage="Files"
                     description="Button to get to the files panel"
@@ -521,20 +506,14 @@ const GUIComponent = props => {
                                         id={`add-editor-tab-button`}
                                     >
                                         <button className={classNames(styles.addTabButton, addTabButtonDisabled ? styles.addTabButtonDisabled : null)}>
-                                            <img
-                                                draggable={false}
-                                                src={plusIcon}
-                                            />
+                                            <PlusIcon />
                                         </button>
                                     </ContextMenuTrigger>
                                     
                                     <ContextMenu id={`add-editor-tab-button`}>
                                         {!tabOrder.includes('code') && <MenuItem onClick={() => addTabToEditor('code')}>
                                             <div className={styles.tabAdditionItem}>
-                                                <img
-                                                    draggable={false}
-                                                    src={codeIcon}
-                                                />
+                                                <CodeIcon />
                                                 <FormattedMessage
                                                     defaultMessage="Code"
                                                     description="Button to get to the code panel"
@@ -544,10 +523,7 @@ const GUIComponent = props => {
                                         </MenuItem>}
                                         {!tabOrder.includes('costume') && <MenuItem onClick={() => addTabToEditor('costume')}>
                                             <div className={styles.tabAdditionItem}>
-                                                <img
-                                                    draggable={false}
-                                                    src={costumesIcon}
-                                                />
+                                                <CostumesIcon />
                                                 <FormattedMessage
                                                     defaultMessage="Costumes"
                                                     description="Button to get to the costumes panel"
@@ -557,10 +533,7 @@ const GUIComponent = props => {
                                         </MenuItem>}
                                         {!tabOrder.includes('sound') && <MenuItem onClick={() => addTabToEditor('sound')}>
                                             <div className={styles.tabAdditionItem}>
-                                                <img
-                                                    draggable={false}
-                                                    src={soundsIcon}
-                                                />
+                                                <SoundsIcon />
                                                 <FormattedMessage
                                                     defaultMessage="Sounds"
                                                     description="Button to get to the sounds panel"
@@ -570,10 +543,7 @@ const GUIComponent = props => {
                                         </MenuItem>}
                                         {!tabOrder.includes('variable') && <MenuItem onClick={() => addTabToEditor('variable')}>
                                             <div className={styles.tabAdditionItem}>
-                                                <img
-                                                    draggable={false}
-                                                    src={variablesIcon}
-                                                />
+                                                <VariablesIcon />
                                                 <FormattedMessage
                                                     defaultMessage="Variables"
                                                     description="Button to get to the variables panel"
@@ -583,10 +553,7 @@ const GUIComponent = props => {
                                         </MenuItem>}
                                         {/* {!tabOrder.includes('file') && <MenuItem onClick={() => addTabToEditor('file')}>
                                             <div className={styles.tabAdditionItem}>
-                                                <img
-                                                    draggable={false}
-                                                    src={filesIcon}
-                                                />
+                                                <FilesIcon />
                                                 <FormattedMessage
                                                     defaultMessage="Files"
                                                     description="Button to get to the files panel"
@@ -617,11 +584,7 @@ const GUIComponent = props => {
                                             title={intl.formatMessage(messages.addExtension)}
                                             onClick={onExtensionButtonClick}
                                         >
-                                            <img
-                                                className={styles.extensionButtonIcon}
-                                                draggable={false}
-                                                src={addExtensionIcon}
-                                            />
+                                            <AddExtensionIcon className={styles.extensionButtonIcon} />
                                         </button>
                                     </Box>
                                     <Box className={styles.watermark}>

src/components/icon-button/icon-button.jsx

@@ -19,11 +19,17 @@ const IconButton = ({
         role="button"
         onClick={disabled ? null : onClick}
     >
-        <img
-            className={styles.icon}
-            draggable={false}
-            src={img}
-        />
+        {typeof img === 'string' ? (
+            <img
+                className={styles.icon}
+                draggable={false}
+                src={img}
+                alt=""
+            />
+        ) : (
+            // Reactコンポーネントとして描画
+            React.cloneElement(img, { className: styles.icon })
+        )}
         <div className={styles.title}>
             {title}
         </div>
@@ -33,7 +39,10 @@ const IconButton = ({
 IconButton.propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool,
-    img: PropTypes.string,
+    img: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+    ]),
     onClick: PropTypes.func.isRequired,
     title: PropTypes.node.isRequired
 };

src/components/library-item/library-item.css

@@ -183,7 +183,7 @@
 
 .inspect-extension {
     position: relative;
-    background: #00c3ff;
+    background: #5100ff;
     color: white;
     font-weight: bold;
     padding: 0;

src/components/library/library.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import localforage from 'localforage';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import LibraryItem from '../../containers/library-item.jsx';
 import Modal from '../../containers/modal.jsx';
@@ -349,7 +350,13 @@ class LibraryComponent extends React.Component {
                         {/*
                             todo: translation?
                         */}
-                        <h3 className={classNames(styles.whiteTextInDarkMode)}>Filters</h3>
+                        <h3 className={classNames(styles.whiteTextInDarkMode)}>
+                            <FormattedMessage
+                                defaultMessage="Filters"
+                                description="Label for the library filter section"
+                                id="gui.library.filters"
+                            />
+                        </h3>
                         {this.props.filterable && (
                             <div>
                                     <Filter

src/components/menu-bar/google-drive-save.css

@@ -446,4 +446,107 @@
     border: 1px solid #ddd;
     border-radius: 3px;
     font-size: 12px;
+}
+/* Google Drive Save コンポーネント用の追加スタイル */
+.shareSection {
+    margin-bottom: 20px;
+}
+
+.shareSection h3 {
+    margin: 0 0 10px 0;
+    font-size: 14px;
+    color: #333;
+}
+
+.permissionRow {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 10px;
+}
+
+.emailInput {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.roleSelect {
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    min-width: 120px;
+}
+
+.addButton, .removeButton {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    background: #f5f5f5;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.addButton:hover, .removeButton:hover {
+    background: #e0e0e0;
+}
+
+.modalFooter {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 20px;
+    border-top: 1px solid #eee;
+}
+
+.applyButton, .cancelButton {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.applyButton {
+    background: #4CAF50;
+    color: white;
+}
+
+.applyButton:hover:not(:disabled) {
+    background: #45a049;
+}
+
+.cancelButton {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.cancelButton:hover:not(:disabled) {
+    background: #e0e0e0;
+}
+
+.applyButton:disabled, .cancelButton:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* 特定のクラス付き要素も固定 */
+.emailInput,
+.newFileNameInput,
+.permissionDropdown select,
+.roleSelect {
+    background-color: #fff !important;
+    color: #333 !important;
+}
+.publicButton {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.publicButton:hover:not(:disabled) {
+    background-color: #45a049;
+}
+
+.publicButton:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
 }

src/components/menu-bar/google-drive-save.jsx

@@ -20,14 +20,24 @@ class GoogleDriveSave extends React.Component {
             isProcessing: false,
             newFileName: props.projectTitle || '無題',
             showNewFileInput: false,
-            sharePermission: 'reader', // 'reader', 'writer', or 'owner'
-            selectedFileId: null
+            sharePermission: 'reader',
+            selectedFileId: null,
+            // 共有モーダル用の状態
+            isShareModalOpen: false,
+            currentSharingFileId: null,
+            emailPermissions: [{ email: '', role: 'reader' }],
+            linkPermission: 'reader',
+            groupPermission: 'reader'
         };
         this.modalContentRef = React.createRef();
+        this.shareModalContentRef = React.createRef();
     }
 
     componentDidMount() {
-        // 初期化処理
+        // アクセストークンがある場合はファイル一覧を取得
+        if (this.state.accessToken) {
+            this.fetchDriveFiles(this.state.accessToken);
+        }
     }
 
     handleClick = () => {
@@ -36,7 +46,11 @@ class GoogleDriveSave extends React.Component {
 
     handleCloseModal = () => {
         if (!this.state.isProcessing) {
-            this.setState({isModalOpen: false, showNewFileInput: false});
+            this.setState({
+                isModalOpen: false, 
+                showNewFileInput: false,
+                isShareModalOpen: false
+            });
         }
     };
 
@@ -67,6 +81,10 @@ class GoogleDriveSave extends React.Component {
                     isModalOpen: true
                 });
                 
+                localStorage.setItem('googleDriveAccessToken', event.data.token);
+                if (event.data.email) localStorage.setItem('googleDriveAccountEmail', event.data.email);
+                if (event.data.name) localStorage.setItem('googleDriveAccountName', event.data.name);
+                
                 this.fetchDriveFiles(event.data.token);
             }
         };
@@ -98,11 +116,19 @@ class GoogleDriveSave extends React.Component {
             this.setState({files: data.files || [], isLoading: false});
         } catch (error) {
             console.error("ファイル一覧取得エラー:", error);
-            alert("error", "ファイル一覧の取得に失敗しました");
+            this.showAlert("error", "ファイル一覧の取得に失敗しました");
             this.setState({isLoading: false});
         }
     };
 
+    showAlert = (type, message) => {
+        if (this.props.showAlert) {
+            this.props.showAlert(type, message);
+        } else {
+            alert(`${type}: ${message}`);
+        }
+    };
+
     renderModal() {
         if (!this.state.isModalOpen) return null;
 
@@ -218,7 +244,7 @@ class GoogleDriveSave extends React.Component {
                 <button 
                     onClick={() => this.setState({
                         showNewFileInput: true, 
-                        newFileName: window.vm.runtime.projectName || '無題',
+                        newFileName: window.vm && window.vm.runtime ? window.vm.runtime.projectName || '無題' : '無題',
                         sharePermission: 'reader'
                     })}
                     className={styles.newFileButton}
@@ -255,102 +281,74 @@ class GoogleDriveSave extends React.Component {
         );
     }
 
-renderFileItem(project, thumbnailFiles) {
-    const thumbnail = thumbnailFiles.find(
-        thumb => thumb.name === `Scratch-Thumbnail-${project.id}.png`
-    );
-
-    return (
-        <div key={project.id} className={styles.fileItem}>
-            <div className={styles.thumbnailContainer}>
-                {thumbnail ? (
-                    <img 
-                        src={`https://drive.google.com/thumbnail?id=${thumbnail.id}&sz=w300`}
-                        alt="プロジェクトサムネイル"
-                        className={styles.thumbnail}
-                    />
-                ) : (
-                    <div className={styles.thumbnailPlaceholder}>
-                        サムネイルなし
-                    </div>
-                )}
-            </div>
-            
-            <h3 className={styles.fileName}>
-                {project.name.replace('.s4s.txt', '')}
-            </h3>
-            
-            {this.renderShareLink(project.id)}
-            
-            <div className={styles.buttonGroup}>
-                <button 
-                    onClick={() => this.handleLoadFile(project)}
-                    className={styles.actionButton}
-                    disabled={this.state.isProcessing}
-                >
-                    読み込む
-                </button>
-                <button 
-                    onClick={() => this.handleReplaceFile(project)}
-                    className={styles.actionButton}
-                    disabled={this.state.isProcessing}
-                >
-                    上書き
-                </button>
-                <button 
-                    onClick={() => this.handleShareFile(project.id)}
-                    className={classNames(styles.actionButton, styles.shareButton)}
-                    disabled={this.state.isProcessing}
-                >
-                    共有
-                </button>
-                <button 
-                    onClick={() => this.handleDeleteFile(project, thumbnailFiles)}
-                    className={classNames(styles.actionButton, styles.deleteButton)}
-                    disabled={this.state.isProcessing}
-                >
-                    削除
-                </button>
-            </div>
-
-            {/* ここにアクセス権限設定のドロップダウンを追加 */}
-            <div className={styles.permissionDropdown}>
-                <label>アクセス権限: </label>
-                <select
-                    value={this.state.sharePermission}
-                    onChange={(e) => this.updateFilePermission(project.id, e.target.value)}
-                    disabled={this.state.isProcessing}
-                >
-                    <option value="reader">閲覧のみ</option>
-                    <option value="writer">編集可能</option>
-                    <option value="owner">所有者</option>
-                </select>
+    renderFileItem(project, thumbnailFiles) {
+        const thumbnail = thumbnailFiles.find(
+            thumb => thumb.name === `Scratch-Thumbnail-${project.id}.png`
+        );
+    
+        return (
+            <div key={project.id} className={styles.fileItem}>
+                <div className={styles.thumbnailContainer}>
+                    {thumbnail ? (
+                        <img 
+                            src={`https://drive.google.com/thumbnail?id=${thumbnail.id}&sz=w300`}
+                            alt="プロジェクトサムネイル"
+                            className={styles.thumbnail}
+                        />
+                    ) : (
+                        <div className={styles.thumbnailPlaceholder}>
+                            サムネイルなし
+                        </div>
+                    )}
+                </div>
+                
+                <h3 className={styles.fileName}>
+                    {project.name.replace('.s4s.txt', '')}
+                </h3>
+                
+                {this.renderShareLink(project.id)}
+                
+                <div className={styles.buttonGroup}>
+                    <button 
+                        onClick={() => this.handleLoadFile(project)}
+                        className={styles.actionButton}
+                        disabled={this.state.isProcessing}
+                    >
+                        読み込む
+                    </button>
+                    <button 
+                        onClick={() => this.handleReplaceFile(project)}
+                        className={styles.actionButton}
+                        disabled={this.state.isProcessing}
+                    >
+                        上書き
+                    </button>
+                    <button 
+                        onClick={() => this.openShareModal(project.id)}
+                        className={classNames(styles.actionButton, styles.shareButton)}
+                        disabled={this.state.isProcessing}
+                    >
+                        共有
+                    </button>
+                    <button 
+                        onClick={() => this.handleShareFile(project.id)}
+                        className={classNames(styles.actionButton, styles.publicButton)}
+                        disabled={this.state.isProcessing}
+                    >
+                        公開
+                    </button>
+                    <button 
+                        onClick={() => this.handleDeleteFile(project, thumbnailFiles)}
+                        className={classNames(styles.actionButton, styles.deleteButton)}
+                        disabled={this.state.isProcessing}
+                    >
+                        削除
+                    </button>
+                </div>
             </div>
-        </div>
-    );
-}
-
-updateFilePermission = async (fileId, permission) => {
-    this.setState({isProcessing: true});
-    try {
-        await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}/permissions/anyone`, {
-            method: "PATCH",
-            headers: {
-                Authorization: `Bearer ${this.state.accessToken}`,
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                role: permission,
-            }),
-        });
-        alert("success", "アクセス権限を更新しました");
-    } catch (error) {
-        console.error("権限更新エラー:", error);
-        alert("error", "アクセス権限の更新に失敗しました");
-    } finally {
-        this.setState({isProcessing: false});
+        );
     }
-};
+
     renderShareLink(fileId) {
         const SHORT_URL = "https://s4.rf.gd/";
         
@@ -391,6 +389,239 @@ updateFilePermission = async (fileId, permission) => {
         );
     }
 
+    // 共有モーダルを開く
+    openShareModal = (fileId) => {
+        this.setState({
+            isShareModalOpen: true,
+            currentSharingFileId: fileId,
+            emailPermissions: [{ email: '', role: 'reader' }],
+            linkPermission: 'reader',
+            groupPermission: 'reader'
+        });
+    };
+
+    // 共有モーダルを閉じる
+    closeShareModal = () => {
+        if (!this.state.isProcessing) {
+            this.setState({ isShareModalOpen: false });
+        }
+    };
+
+    // オーバーレイクリックで共有モーダルを閉じる
+    handleShareOverlayClick = (e) => {
+        if (!this.state.isProcessing && this.shareModalContentRef.current && 
+            !this.shareModalContentRef.current.contains(e.target)) {
+            this.closeShareModal();
+        }
+    };
+
+    // メール権限入力欄を追加
+    addEmailPermission = () => {
+        this.setState(prevState => ({
+            emailPermissions: [...prevState.emailPermissions, { email: '', role: 'reader' }]
+        }));
+    };
+
+    // メール権限入力欄を更新
+    updateEmailPermission = (index, field, value) => {
+        this.setState(prevState => ({
+            emailPermissions: prevState.emailPermissions.map((item, i) => 
+                i === index ? { ...item, [field]: value } : item
+            )
+        }));
+    };
+
+    // メール権限入力欄を削除
+    removeEmailPermission = (index) => {
+        this.setState(prevState => ({
+            emailPermissions: prevState.emailPermissions.filter((_, i) => i !== index)
+        }));
+    };
+
+    // 権限設定を適用
+    applyPermissions = async () => {
+        this.setState({ isProcessing: true });
+        try {
+            const { currentSharingFileId, accessToken, emailPermissions, linkPermission } = this.state;
+
+            // メールごとの権限設定
+            for (const permission of emailPermissions) {
+                if (permission.email.trim()) {
+                    await this.setFilePermission(
+                        currentSharingFileId, 
+                        accessToken, 
+                        permission.email.trim(), 
+                        permission.role
+                    );
+                }
+            }
+
+            // リンクを知っている全員への権限設定
+            await fetch(`https://www.googleapis.com/drive/v3/files/${currentSharingFileId}/permissions`, {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${accessToken}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    type: "anyone",
+                    role: linkPermission,
+                }),
+            });
+
+            this.showAlert("success", "共有設定を適用しました");
+            this.closeShareModal();
+        } catch (error) {
+            console.error("権限設定エラー:", error);
+            this.showAlert("error", "共有設定の適用に失敗しました");
+        } finally {
+            this.setState({ isProcessing: false });
+        }
+    };
+
+    // ファイル権限設定メソッド
+    async setFilePermission(fileId, accessToken, email, role = "reader") {
+        const response = await fetch(
+            `https://www.googleapis.com/drive/v3/files/${fileId}/permissions`,
+            {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${accessToken}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    type: "user",
+                    role: role,
+                    emailAddress: email
+                }),
+            }
+        );
+
+        if (!response.ok) {
+            throw new Error(await response.text());
+        }
+        return await response.json();
+    }
+
+    // 共有モーダルのレンダリング
+    renderShareModal() {
+        if (!this.state.isShareModalOpen) return null;
+
+        return (
+            <div className={styles.modalOverlay} onClick={this.handleShareOverlayClick}>
+                <div className={styles.modalContent} ref={this.shareModalContentRef} style={{maxWidth: '500px'}}>
+                    <div className={styles.modalHeader}>
+                        <h2>共有設定</h2>
+                        <button 
+                            onClick={this.closeShareModal} 
+                            className={styles.closeButton}
+                            disabled={this.state.isProcessing}
+                        >
+                            ×
+                        </button>
+                    </div>
+                    
+                    <div className={styles.modalBody}>
+                        <div className={styles.shareSection}>
+                            <h3>ユーザーごとの共有</h3>
+                            {this.state.emailPermissions.map((permission, index) => (
+                                <div key={index} className={styles.permissionRow}>
+                                    <input
+                                        type="email"
+                                        placeholder="メールアドレス"
+                                        value={permission.email}
+                                        onChange={(e) => this.updateEmailPermission(index, 'email', e.target.value)}
+                                        className={styles.emailInput}
+                                        disabled={this.state.isProcessing}
+                                    />
+                                    <select
+                                        value={permission.role}
+                                        onChange={(e) => this.updateEmailPermission(index, 'role', e.target.value)}
+                                        className={styles.roleSelect}
+                                        disabled={this.state.isProcessing}
+                                    >
+                                        <option value="reader">閲覧可能</option>
+                                        <option value="writer">編集可能</option>
+                                    </select>
+                                    {this.state.emailPermissions.length > 1 && (
+                                        <button
+                                            onClick={() => this.removeEmailPermission(index)}
+                                            className={styles.removeButton}
+                                            disabled={this.state.isProcessing}
+                                        >
+                                            ×
+                                        </button>
+                                    )}
+                                </div>
+                            ))}
+                            <button
+                                onClick={this.addEmailPermission}
+                                className={styles.addButton}
+                                disabled={this.state.isProcessing}
+                            >
+                                ＋
+                            </button>
+                        </div>
+
+                        <div className={styles.shareSection}>
+                            <h3>リンクを知っている全員</h3>
+                            <div className={styles.permissionRow}>
+                                <select
+                                    value={this.state.linkPermission}
+                                    onChange={(e) => this.setState({ linkPermission: e.target.value })}
+                                    className={styles.roleSelect}
+                                    disabled={this.state.isProcessing}
+                                >
+                                    <option value="reader">閲覧のみ</option>
+                                    <option value="writer">編集可能</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className={styles.shareSection}>
+                            <h3>グループ内</h3>
+                            <div className={styles.permissionRow}>
+                                <select
+                                    value={this.state.groupPermission}
+                                    onChange={(e) => this.setState({ groupPermission: e.target.value })}
+                                    className={styles.roleSelect}
+                                    disabled={this.state.isProcessing}
+                                >
+                                    <option value="reader">閲覧のみ</option>
+                                    <option value="writer">編集可能</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div className={styles.modalFooter}>
+                        <button
+                            onClick={this.applyPermissions}
+                            className={styles.applyButton}
+                            disabled={this.state.isProcessing}
+                        >
+                            適用
+                        </button>
+                        <button
+                            onClick={this.closeShareModal}
+                            className={styles.cancelButton}
+                            disabled={this.state.isProcessing}
+                        >
+                            キャンセル
+                        </button>
+                    </div>
+                    
+                    {this.state.isProcessing && (
+                        <div className={styles.processingOverlay}>
+                            <div className={styles.spinner}></div>
+                            <div>処理中...</div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <div>
@@ -409,6 +640,7 @@ updateFilePermission = async (fileId, permission) => {
                 </Button>
                 
                 {this.renderModal()}
+                {this.renderShareModal()}
             </div>
         );
     }
@@ -419,7 +651,8 @@ updateFilePermission = async (fileId, permission) => {
         this.setState({
             accessToken: null,
             currentAccountEmail: null,
-            currentAccountName: null
+            currentAccountName: null,
+            files: []
         });
         localStorage.removeItem('googleDriveAccessToken');
         localStorage.removeItem('googleDriveAccountEmail');
@@ -430,12 +663,12 @@ updateFilePermission = async (fileId, permission) => {
         this.setState({isProcessing: true});
         try {
             await this.saveToGoogleDrive(null, `${this.state.newFileName}.s4s.txt`, this.state.sharePermission);
-            alert("success", "新規保存しました");
+            this.showAlert("success", "新規保存しました");
             this.setState({showNewFileInput: false});
             this.fetchDriveFiles(this.state.accessToken);
         } catch (error) {
             console.error("新規保存エラー:", error);
-            alert("error", "新規保存に失敗しました");
+            this.showAlert("error", "新規保存に失敗しました");
         } finally {
             this.setState({isProcessing: false});
         }
@@ -459,24 +692,56 @@ updateFilePermission = async (fileId, permission) => {
             this.setState({isProcessing: true});
             try {
                 await this.saveToGoogleDrive(project.id, project.name);
-                alert("success", "上書き保存しました");
+                this.showAlert("success", "上書き保存しました");
                 this.fetchDriveFiles(this.state.accessToken);
             } catch (error) {
                 console.error("ファイル上書きエラー:", error);
-                alert("error", "ファイルの上書きに失敗しました");
+                this.showAlert("error", "ファイルの上書きに失敗しました");
             } finally {
                 this.setState({isProcessing: false});
             }
         }
     };
 
-    handleShareFile = (fileId) => {
+    handleShareFile = async (fileId) => {
         if (this.state.isProcessing) return;
         
-        const SHARE_URL = "https://scratch-school.ct.ws/upload?id=";
-        window.open(`${SHARE_URL}${fileId}`, "_blank");
+        this.setState({ isProcessing: true });
+        try {
+            // ファイルを公開設定（anyoneに閲覧権限を付与）
+            await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}/permissions`, {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${this.state.accessToken}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    type: "anyone",
+                    role: "reader",
+                }),
+            });
+    
+            const SHARE_URL = "https://scratch-school.ct.ws/upload?id=";
+            const shortUrl = `${SHARE_URL}${fileId}`;
+            
+            // 短縮URLをクリップボードにコピー
+            navigator.clipboard.writeText(shortUrl)
+                .then(() => {
+                    this.showAlert("success", "公開リンクをクリップボードにコピーしました");
+                    // 新しいタブで公開ページを開く
+                    window.open(shortUrl, "_blank");
+                })
+                .catch(() => {
+                    this.showAlert("error", "リンクのコピーに失敗しました");
+                });
+    
+        } catch (error) {
+            console.error("公開エラー:", error);
+            this.showAlert("error", "ファイルの公開に失敗しました");
+        } finally {
+            this.setState({ isProcessing: false });
+        }
     };
-
     handleDeleteFile = async (project, thumbnailFiles) => {
         if (this.state.isProcessing) return;
         
@@ -493,11 +758,11 @@ updateFilePermission = async (fileId, permission) => {
                     await this.deleteFile(thumbnailToDelete.id);
                 }
                 
-                alert("success", "ファイルを削除しました");
+                this.showAlert("success", "ファイルを削除しました");
                 this.fetchDriveFiles(this.state.accessToken);
             } catch (error) {
                 console.error("削除エラー:", error);
-                alert("error", "ファイルの削除に失敗しました");
+                this.showAlert("error", "ファイルの削除に失敗しました");
             } finally {
                 this.setState({isProcessing: false});
             }
@@ -508,8 +773,8 @@ updateFilePermission = async (fileId, permission) => {
         if (this.state.isProcessing) return;
         
         navigator.clipboard.writeText(text)
-            .then(() => alert("success", "リンクをクリップボードにコピーしました"))
-            .catch(() => alert("error", "リンクのコピーに失敗しました"));
+            .then(() => this.showAlert("success", "リンクをクリップボードにコピーしました"))
+            .catch(() => this.showAlert("error", "リンクのコピーに失敗しました"));
     };
 
     async deleteFile(fileId) {
@@ -526,6 +791,10 @@ updateFilePermission = async (fileId, permission) => {
     }
 
     async saveToGoogleDrive(fileId, fileName, permission = 'reader') {
+        if (!window.vm) {
+            throw new Error("VMが初期化されていません");
+        }
+
         const blob = await window.vm.saveProjectSb3();
         
         const metadata = {
@@ -606,18 +875,25 @@ updateFilePermission = async (fileId, permission) => {
                     "Content-Type": "application/json",
                 },
                 body: JSON.stringify({
-                    role: permission, // ここで公開設定を使用
+                    role: permission,
                     type: "anyone",
                 }),
             });
         }
+
+        return fileData;
     }
 
     getProjectThumbnail() {
-        return new Promise(resolve => {
-            window.vm.renderer.requestSnapshot(uri => {
-                resolve(uri);
-            });
+        return new Promise((resolve) => {
+            if (window.vm && window.vm.renderer && window.vm.renderer.requestSnapshot) {
+                window.vm.renderer.requestSnapshot(uri => {
+                    resolve(uri);
+                });
+            } else {
+                // デフォルトのサムネイル
+                resolve('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==');
+            }
         });
     }
 }
@@ -627,7 +903,9 @@ GoogleDriveSave.propTypes = {
     showAlert: PropTypes.func.isRequired,
     projectTitle: PropTypes.string
 };
+
 const mapStateToProps = state => ({
     projectTitle: state.scratchGui.projectTitle
 });
+
 export default connect(mapStateToProps)(GoogleDriveSave);

src/components/sound-editor/sound-editor.css

@@ -91,7 +91,7 @@ $border-radius: 0.25rem;
     background-color: $ui-primary;
 }
 
-.button > img {
+.button > svg {
     flex-grow: 1;
     max-width: 100%;
     max-height: 100%;
@@ -119,7 +119,7 @@ $border-radius: 0.25rem;
     border-color: transparent;
 }
 
-.round-button > img {
+.round-button > svg {
     flex-grow: 1;
     max-width: 100%;
     max-height: 100%;
@@ -147,7 +147,7 @@ $border-radius: 0.25rem;
     margin-right: 1rem;
 }
 
-.trim-button > img {
+.trim-button > svg {
     width: 1.25rem;
 }
 
@@ -169,7 +169,7 @@ $border-radius: 0.25rem;
     margin: 0;
 }
 
-.effect-button img {
+.effect-button svg {
     width: 1.25rem;
     height: 1.25rem;
     margin-bottom: -0.375rem;
@@ -187,13 +187,13 @@ $border-radius: 0.25rem;
     margin: 0;
 }
 
-.tool-button img {
+.tool-button svg {
     width: 4rem;
     height: 1.5rem;
     margin-bottom: -0.375rem;
 }
 
-[dir="rtl"] .flip-in-rtl img {
+[dir="rtl"] .flip-in-rtl svg {
     transform: scaleX(-1);
 }
 
@@ -242,7 +242,7 @@ $border-radius: 0.25rem;
     border-bottom-right-radius: $border-radius;
 }
 
-.button:disabled > img {
+.button:disabled > svg {
     opacity: 0.25;
 }
 

src/components/sound-editor/sound-editor.jsx

@@ -14,33 +14,50 @@ import {SOUND_BYTE_LIMIT} from '../../lib/audio/audio-util.js';
 
 import styles from './sound-editor.css';
 
-import playIcon from './icon--play.svg';
-import stopIcon from './icon--stop.svg';
-import redoIcon from './icon--redo.svg';
-import undoIcon from './icon--undo.svg';
-import modifyIcon from './icon--modify.svg';
-import formatIcon from './icon--format.svg';
-import fasterIcon from './icon--faster.svg';
-import slowerIcon from './icon--slower.svg';
-import louderIcon from './icon--louder.svg';
-import softerIcon from './icon--softer.svg';
-import robotIcon from './icon--robot.svg';
-import echoIcon from './icon--echo.svg';
-import highpassIcon from './icon--highpass.svg';
-import lowpassIcon from './icon--lowpass.svg';
-import reverseIcon from './icon--reverse.svg';
-import fadeOutIcon from './icon--fade-out.svg';
-import fadeInIcon from './icon--fade-in.svg';
-import muteIcon from './icon--mute.svg';
+import { ReactComponent as PlayIcon } from './icon--play.svg';
+import { ReactComponent as StopIcon } from './icon--stop.svg';
+import { ReactComponent as RedoIcon } from './icon--redo.svg';
+import { ReactComponent as UndoIcon } from './icon--undo.svg';
+import { ReactComponent as ModifyIcon } from './icon--modify.svg';
+import { ReactComponent as FormatIcon } from './icon--format.svg';
+import { ReactComponent as FasterIcon } from './icon--faster.svg';
+import { ReactComponent as SlowerIcon } from './icon--slower.svg';
+import { ReactComponent as LouderIcon } from './icon--louder.svg';
+import { ReactComponent as SofterIcon } from './icon--softer.svg';
+import { ReactComponent as RobotIcon } from './icon--robot.svg';
+import { ReactComponent as EchoIcon } from './icon--echo.svg';
+import { ReactComponent as HighpassIcon } from './icon--highpass.svg';
+import { ReactComponent as LowpassIcon } from './icon--lowpass.svg';
+import { ReactComponent as ReverseIcon } from './icon--reverse.svg';
+import { ReactComponent as FadeOutIcon } from './icon--fade-out.svg';
+import { ReactComponent as FadeInIcon } from './icon--fade-in.svg';
+import { ReactComponent as MuteIcon } from './icon--mute.svg';
 
-import deleteIcon from './icon--delete.svg';
-import copyIcon from './icon--copy.svg';
-import pasteIcon from './icon--paste.svg';
-import copyToNewIcon from './icon--copy-to-new.svg';
+import { ReactComponent as DeleteIcon } from './icon--delete.svg';
+import { ReactComponent as CopyIcon } from './icon--copy.svg';
+import { ReactComponent as PasteIcon } from './icon--paste.svg';
+import { ReactComponent as CopyToNewIcon } from './icon--copy-to-new.svg';
 
 const BufferedInput = BufferedInputHOC(Input);
 
 const messages = defineMessages({
+    modify: {
+        id: 'gui.soundEditor.modify',
+        description: 'Title of the button to modify the sound',
+        defaultMessage: 'Modify'
+    },
+    lowpass: {
+        id: 'gui.soundEditor.lowpass',
+        defaultMessage: 'Low pass'
+    },
+    highpass: {
+        id: 'gui.soundEditor.highpass',
+        defaultMessage: 'High pass'
+    },
+    format: {
+        id: 'gui.soundEditor.format',
+        defaultMessage: 'Format'
+    },
     sound: {
         id: 'gui.soundEditor.sound',
         description: 'Label for the name of the sound',
@@ -154,21 +171,13 @@ const formatTime = timeSeconds => {
 };
 
 const formatDuration = (playheadPercent, trimStartPercent, trimEndPercent, durationSeconds) => {
-    // If no selection, the trim is the entire sound.
     trimStartPercent = trimStartPercent === null ? 0 : trimStartPercent;
     trimEndPercent = trimEndPercent === null ? 1 : trimEndPercent;
-
-    // If the playhead doesn't exist, assume it's at the start of the selection.
     playheadPercent = playheadPercent === null ? trimStartPercent : playheadPercent;
-
-    // If selection has zero length, treat it as the entire sound being selected.
-    // This happens when the user first clicks to start making a selection.
     const trimSize = (trimEndPercent - trimStartPercent) || 1;
     const trimDuration = trimSize * durationSeconds;
-
     const progressInTrim = (playheadPercent - trimStartPercent) / trimSize;
     const currentTime = progressInTrim * trimDuration;
-
     return `${formatTime(currentTime)} / ${formatTime(trimDuration)}`;
 };
 
@@ -203,11 +212,7 @@ const SoundEditor = props => (
                         title={props.intl.formatMessage(messages.undo)}
                         onClick={props.onUndo}
                     >
-                        <img
-                            className={styles.undoIcon}
-                            draggable={false}
-                            src={undoIcon}
-                        />
+                        <UndoIcon className={styles.undoIcon} />
                     </button>
                     <button
                         className={styles.button}
@@ -215,31 +220,27 @@ const SoundEditor = props => (
                         title={props.intl.formatMessage(messages.redo)}
                         onClick={props.onRedo}
                     >
-                        <img
-                            className={styles.redoIcon}
-                            draggable={false}
-                            src={redoIcon}
-                        />
+                        <RedoIcon className={styles.redoIcon} />
                     </button>
                 </div>
             </div>
             <div className={styles.inputGroup}>
                 <IconButton
                     className={styles.toolButton}
-                    img={copyIcon}
+                    img={<CopyIcon />}
                     title={props.intl.formatMessage(messages.copy)}
                     onClick={props.onCopy}
                 />
                 <IconButton
                     className={styles.toolButton}
                     disabled={props.canPaste === false}
-                    img={pasteIcon}
+                    img={<PasteIcon />}
                     title={props.intl.formatMessage(messages.paste)}
                     onClick={props.onPaste}
                 />
                 <IconButton
                     className={classNames(styles.toolButton, styles.flipInRtl)}
-                    img={copyToNewIcon}
+                    img={<CopyToNewIcon />}
                     title={props.intl.formatMessage(messages.copyToNew)}
                     onClick={props.onCopyToNew}
                 />
@@ -247,7 +248,7 @@ const SoundEditor = props => (
             <IconButton
                 className={styles.toolButton}
                 disabled={props.trimStart === null}
-                img={deleteIcon}
+                img={<DeleteIcon />}
                 title={props.intl.formatMessage(messages.delete)}
                 onClick={props.onDelete}
             />
@@ -277,10 +278,7 @@ const SoundEditor = props => (
                         title={props.intl.formatMessage(messages.stop)}
                         onClick={props.onStop}
                     >
-                        <img
-                            draggable={false}
-                            src={stopIcon}
-                        />
+                        <StopIcon />
                     </button>
                 ) : (
                     <button
@@ -288,97 +286,94 @@ const SoundEditor = props => (
                         title={props.intl.formatMessage(messages.play)}
                         onClick={props.onPlay}
                     >
-                        <img
-                            draggable={false}
-                            src={playIcon}
-                        />
+                        <PlayIcon />
                     </button>
                 )}
             </div>
             <div className={styles.effects}>
                 <IconButton
                     className={styles.effectButton}
-                    img={modifyIcon}
-                    title={"Modify"}
+                    img={<ModifyIcon />}
+                    title={<FormattedMessage {...messages.modify} />}
                     onClick={props.onModifySound}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={fasterIcon}
+                    img={<FasterIcon />}
                     title={<FormattedMessage {...messages.faster} />}
                     onClick={props.onFaster}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={slowerIcon}
+                    img={<SlowerIcon />}
                     title={<FormattedMessage {...messages.slower} />}
                     onClick={props.onSlower}
                 />
                 <IconButton
                     disabled={props.tooLoud}
                     className={classNames(styles.effectButton, styles.flipInRtl)}
-                    img={louderIcon}
+                    img={<LouderIcon />}
                     title={<FormattedMessage {...messages.louder} />}
                     onClick={props.onLouder}
                 />
                 <IconButton
                     className={classNames(styles.effectButton, styles.flipInRtl)}
-                    img={softerIcon}
+                    img={<SofterIcon />}
                     title={<FormattedMessage {...messages.softer} />}
                     onClick={props.onSofter}
                 />
                 <IconButton
                     className={classNames(styles.effectButton, styles.flipInRtl)}
-                    img={muteIcon}
+                    img={<MuteIcon />}
                     title={<FormattedMessage {...messages.mute} />}
                     onClick={props.onMute}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={fadeInIcon}
+                    img={<FadeInIcon />}
                     title={<FormattedMessage {...messages.fadeIn} />}
                     onClick={props.onFadeIn}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={fadeOutIcon}
+                    img={<FadeOutIcon />}
                     title={<FormattedMessage {...messages.fadeOut} />}
                     onClick={props.onFadeOut}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={reverseIcon}
+                    img={<ReverseIcon />}
                     title={<FormattedMessage {...messages.reverse} />}
                     onClick={props.onReverse}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={robotIcon}
+                    img={<RobotIcon />}
                     title={<FormattedMessage {...messages.robot} />}
                     onClick={props.onRobot}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={echoIcon}
+                    img={<EchoIcon />}
                     title={<FormattedMessage {...messages.echo} />}
                     onClick={props.onEcho}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={lowpassIcon}
-                    title={"Low Pass"}
+                    img={<LowpassIcon />}
+                    title={<FormattedMessage {...messages.lowpass} />}
                     onClick={props.onLowPass}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={highpassIcon}
-                    title={"High Pass"}
+                    img={<HighpassIcon />}
+                    title={<FormattedMessage {...messages.highpass} />}
                     onClick={props.onHighPass}
                 />
                 <IconButton
                     className={styles.effectButton}
-                    img={formatIcon}
-                    title={"Format"}
+                    img={<FormatIcon />}
+                    title={<FormattedMessage {...messages.format} />}
                     onClick={props.onFormatSound}
                 />
             </div>
@@ -446,6 +441,7 @@ const SoundEditor = props => (
     </div>
 );
 
+
 SoundEditor.propTypes = {
     isStereo: PropTypes.bool.isRequired,
     duration: PropTypes.number.isRequired,

src/components/sprite-info/sprite-info.jsx

@@ -17,8 +17,8 @@ import styles from './sprite-info.css';
 
 import xIcon from './icon--x.svg';
 import yIcon from './icon--y.svg';
-import showIcon from './icon--show.svg';
-import hideIcon from './icon--hide.svg';
+import { ReactComponent as ShowIcon } from './icon--show.svg';
+import { ReactComponent as HideIcon } from './icon--hide.svg';
 
 const BufferedInput = BufferedInputHOC(Input);
 
@@ -200,10 +200,7 @@ class SpriteInfo extends React.Component {
                                 onClick={this.props.onClickVisible}
                                 onKeyPress={this.props.onPressVisible}
                             >
-                                <img
-                                    className={styles.icon}
-                                    src={showIcon}
-                                />
+                                <ShowIcon className={styles.icon} />
                             </div>
                             <div
                                 className={classNames(
@@ -219,10 +216,7 @@ class SpriteInfo extends React.Component {
                                 onClick={this.props.onClickNotVisible}
                                 onKeyPress={this.props.onPressNotVisible}
                             >
-                                <img
-                                    className={styles.icon}
-                                    src={hideIcon}
-                                />
+                                <HideIcon className={styles.icon} />
                             </div>
                         </div>
                     </div>
@@ -294,4 +288,4 @@ SpriteInfo.propTypes = {
     ])
 };
 
-export default injectIntl(SpriteInfo);
+export default injectIntl(SpriteInfo);

src/containers/extension-library.jsx

@@ -5,6 +5,7 @@ import VM from 'scratch-vm';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import log from '../lib/log';
 import { manuallyTrustExtension } from './tw-security-manager.jsx';
+import { FormattedMessage } from 'react-intl';
 
 import extensionLibraryContent from '../lib/libraries/extensions/index.jsx';
 import extensionTags from '../lib/libraries/extension-tags';
@@ -212,7 +213,12 @@ class ExtensionLibrary extends React.PureComponent {
                 tags={extensionTags}
                 id="extensionLibrary"
                 actor="ExtensionLibrary"
-                header={"Extensions"}
+                header={
+                    <FormattedMessage
+                        defaultMessage="Extensions"
+                        description="Name for the 'Extension'"
+                        id="gui.extensions"
+                />}
                 title={this.props.intl.formatMessage(messages.extensionTitle)}
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}

src/containers/play-button.jsx

@@ -19,7 +19,7 @@ class PlayButton extends React.Component {
             touchStarted: false
         };
     }
-    getDerivedStateFromProps (props, state) {
+    static getDerivedStateFromProps (props, state) {
         // if touchStarted is true and it's not playing, the sound must have ended.
         // reset the touchStarted state to allow the sound to be replayed
         if (state.touchStarted && !props.isPlaying) {

src/containers/sound-editor.jsx

@@ -526,7 +526,7 @@ class SoundEditor extends React.Component {
         menu.textarea.append(pitchDiv, volumeDiv);
 
         const previewButton = document.createElement("button");
-        previewButton.style = "border-radius: 1000px;padding: 5px;width: 45px;height: 45px;margin-right: 10px;border-style: none;background: #00c3ff;";
+        previewButton.style = "border-radius: 1000px;padding: 5px;width: 45px;height: 45px;margin-right: 10px;border-style: none;background: #5100ff;";
         previewButton.innerHTML = `<img draggable="false" style="max-width: 100%;max-height: 100%" src="${playURI}">`;
         menu.textarea.append(previewButton);
 

src/lib/libraries/extension-tags.js

@@ -1,4 +1,6 @@
+import React from 'react';
 import messages from './tag-messages.js';
+import { FormattedMessage } from 'react-intl';
 
 let tags = [
     { tag: 'penguinmod', intlLabel: messages.penguinmod },
@@ -17,16 +19,19 @@ let tags = [
     { tag: 'library', intlLabel: messages.library },
     { tag: 'extcreate', intlLabel: messages.extcreate },
     { tag: 'divider3', intlLabel: messages.scratch, type: 'divider' },
-    { tag: 'divider1', intlLabel: 'Actions', type: 'title' },
+    { 
+      tag: 'divider1',
+      intlLabel: { id: 'gui.library.actions', defaultMessage: 'Actions' },
+      type: 'divider'
+    },
     { tag: 'custom', intlLabel: messages.customextension, type: 'custom', func: (library) => {
         library.select('');
     } },
 ];
 
-// 条件によって tags をフィルター
 if (typeof ENV !== 'undefined' && ENV.CanLoadCustomExtension === false) {
     tags = tags.filter(item => {
-        if (item.tag === 'divider1' && item.intlLabel === 'Actions') return false;
+        if (item.tag === 'divider1') return false; // divider1 はすべて除外
         if (item.tag === 'custom') return false;
         return true;
     });

src/lib/libraries/sound-tags.js

@@ -1,13 +1,16 @@
+import React from 'react';
 import messages from './tag-messages.js';
+import {FormattedMessage} from 'react-intl';
+
 export default [
     {tag: 'penguinmod', intlLabel: messages.penguinmod},
     {type: 'divider'},
-    {type: 'subtitle', intlLabel: "Types"},
+    {type: 'subtitle', intlLabel: <FormattedMessage id="gui.extension.types" defaultMessage="Types" />},
     {tag: 'themes', intlLabel: messages.themes},
     {tag: 'loops', intlLabel: messages.loops},
     {tag: 'effects', intlLabel: messages.effects},
     {type: 'divider'},
-    {type: 'subtitle', intlLabel: "General"},
+    {type: 'subtitle', intlLabel: <FormattedMessage id="gui.extension.general" defaultMessage="General" />},
     {tag: 'animals', intlLabel: messages.animals},
     {tag: 'monster', intlLabel: messages.monsters},
     {tag: 'notes', intlLabel: messages.notes},
@@ -16,13 +19,13 @@ export default [
     {tag: 'wacky', intlLabel: messages.wacky},
     {tag: 'ui', intlLabel: messages.ui},
     {type: 'divider'},
-    {type: 'subtitle', intlLabel: "Objects"},
+    {type: 'subtitle', intlLabel: <FormattedMessage id="gui.extension.objects" defaultMessage="Objects" />},
     {tag: 'footsteps', intlLabel: messages.footsteps},
     {tag: 'space', intlLabel: messages.space},
     {tag: 'sports', intlLabel: messages.sports},
     {tag: 'swords', intlLabel: messages.swords},
     {tag: 'guns', intlLabel: messages.guns},
     {type: 'divider'},
-    {type: 'subtitle', intlLabel: "Materials"},
-    {tag: 'metal', intlLabel: messages.metal},
+    {type: 'subtitle', intlLabel: <FormattedMessage id="gui.extension.materials" defaultMessage="Materials" />},
+    {tag: 'metal', intlLabel: messages.metal}
 ];

src/lib/tw-load-scratch-blocks-hoc.jsx

@@ -12,25 +12,35 @@ const LoadScratchBlocksHOC = function (WrappedComponent) {
                 loaded: LazyScratchBlocks.isLoaded(),
                 error: null
             };
-            //console.log(this.state.loaded);
+            this._isMounted = false;
+        }
+
+        componentDidMount () {
+            this._isMounted = true;
             if (!this.state.loaded) {
                 LazyScratchBlocks.load()
                     .then(() => {
-                        this.setState({
-                            loaded: true
-                        });
+                        if (this._isMounted) {
+                            this.setState({ loaded: true });
+                        }
                     })
                     .catch(e => {
                         log.error(e);
-                        this.setState({
-                            error: e
-                        });
+                        if (this._isMounted) {
+                            this.setState({ error: e });
+                        }
                     });
             }
         }
+
+        componentWillUnmount () {
+            this._isMounted = false;
+        }
+
         handleReload () {
             location.reload();
         }
+
         render () {
             if (this.state.error !== null) {
                 return (
@@ -41,18 +51,12 @@ const LoadScratchBlocksHOC = function (WrappedComponent) {
                 );
             }
             if (!this.state.loaded) {
-                return (
-                    <LoadingSpinner />
-                );
+                return <LoadingSpinner />;
             }
-            return (
-                <WrappedComponent
-                    {...this.props}
-                />
-            );
+            return <WrappedComponent {...this.props} />;
         }
     }
     return LoadScratchBlocks;
 };
 
-export default LoadScratchBlocksHOC;
+export default LoadScratchBlocksHOC;

src/reducers/custom-ja.js

@@ -279,7 +279,20 @@ const customJa = {
     "pm.settingsModal.stageSize": "ステージの大きさ",
     "gui.defaultProject.variable": "変数",
     "pm.menuBar.loadFromFolder": "フォルダから読み込む",
-    "pm.menuBar.exportToFolder": "フォルダに保存"
+    "pm.menuBar.exportToFolder": "フォルダに保存",
+    "pm.confirmBuggyUnstableExtension": "この拡張機能は実際のプロジェクトには推奨されません。不安定になり、後でプロジェクトに問題を引き起こす可能性があります。有効にしてもよろしいですか？",
+    "gui.extensions": "拡張機能",
+    "gui.library.filters": "フィルター",
+    "gui.library.actions": "",
+    "paint.paintEditor.more": "その他",
+    "gui.extension.types": "タイプ",
+    "gui.extension.general": "一般",
+    "gui.extension.objects": "物",
+    "gui.extension.materials": "金属",
+    "gui.soundEditor.modify": "修正",
+    "gui.soundEditor.lowpass": "高音除去",
+    "gui.soundEditor.highpass": "低音除去",
+    "gui.soundEditor.format": "フォーマット"
   }
 };
 

webpack.config.js

@@ -152,6 +152,10 @@ const base = {
                     }
                 }
             }]
+        },
+        {
+            test: /\.svg$/,
+            use: ['@svgr/webpack']
         }]
     },
     plugins: [
@@ -310,7 +314,7 @@ module.exports = [
             module: {
                 rules: base.module.rules.concat([
                     {
-                        test: /\.(svg|png|wav|gif|jpg|mp3|ttf|otf|ico)$/,
+                        test: /\.(png|wav|gif|jpg|mp3|ttf|otf|ico)$/,
                         loader: 'file-loader',
                         options: {
                             outputPath: 'static/assets/',