tag:crieit.net,2005:https://crieit.net/tags/Clipchamp/feed 「Clipchamp」の記事 - Crieit Crieitでタグ「Clipchamp」に投稿された最近の記事 2023-11-17T00:11:51+09:00 https://crieit.net/tags/Clipchamp/feed tag:crieit.net,2005:PublicArticle/18630 2023-10-29T13:16:05+09:00 2023-11-17T00:11:51+09:00 https://crieit.net/posts/Clipchamp 個人用 Clipchamp から組織ユーザーへプロジェクトを無理やり移行する <p>この記事では、 個人アカウント用 Clipchamp から組織(法人)ユーザーの Clipchamp へプロジェクトを移行する方法、およびその応用で、個人用から別の個人用ユーザーに Clipchamp プロジェクトを移行(コピー)する方法を説明する。</p> <hr /> <p>去る7月31日に、 <a target="_blank" rel="nofollow noopener" href="https://www.microsoft.com/ja-jp/microsoft-365/clipchamp-for-work">動画編集アプリ Clipchamp</a> が組織アカウントに対応し、ビジネス向け Microsoft 365 に加わることが発表された。<br /> → <a target="_blank" rel="nofollow noopener" href="https://forest.watch.impress.co.jp/docs/news/1520514.html">動画編集アプリ「Clipchamp」、ビジネス向け「Microsoft 365」にも導入開始 - 窓の杜</a></p> <p>これにより、 Microsoft での買収以降どのプランが商用利用可能なのか曖昧だった Clipchamp が、組織アカウント上で安心して商用利用できる事になる。<br /> <a target="_blank" rel="nofollow noopener" href="https://techcommunity.microsoft.com/t5/microsoft-365-blog/new-create-videos-and-images-at-work-with-clipchamp-and-designer/ba-p/3981574">北米時間の 2023年10月15日 に Clipchamp が商用ユーザーで利用可能になったことが発表</a> され、 Microsoft 365 の対象プランのライセンスを持つ全てのユーザーに対し Clipchamp が一般公開された。<br /> → <a target="_blank" rel="nofollow noopener" href="https://forest.watch.impress.co.jp/docs/news/1547562.html">動画編集アプリ「Clipchamp」が法人「Microsoft 365」に ~上位版・単体プランも提供へ - 窓の杜</a></p> <p>さて、 Clipchamp が組織アカウントに対応したことで、旧来の個人アカウント用 Clipchamp アカウントで作成していたプロジェクトを、組織アカウントに移行したくなる場合もあるだろう。</p> <p>しかし FAQ などをみると、</p> <p><a target="_blank" rel="nofollow noopener" href="https://support.microsoft.com/ja-jp/topic/how-to-access-microsoft-clipchamp-with-your-work-account-8122e9d2-b517-4230-8398-64cdaca9bef2#bkmk_move_projects">職場アカウントで Microsoft Clipchamp にアクセスする方法 - Microsoft サポート</a></p> <blockquote> <h4 id="個人アカウント用に Clipchamp で作成されたプロジェクトを作業バージョンに移動できますか?"><a href="#%E5%80%8B%E4%BA%BA%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%94%A8%E3%81%AB+Clipchamp+%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%95%E3%82%8C%E3%81%9F%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%A5%AD%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AB%E7%A7%BB%E5%8B%95%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B%3F">個人アカウント用に Clipchamp で作成されたプロジェクトを作業バージョンに移動できますか?</a></h4> <p>いいえ。</p> </blockquote> <p>無慈悲。</p> <p><a target="_blank" rel="nofollow noopener" href="https://clipchamp.com/ja/clipchamp-for-work/">仕事向けの Clipchamp - clipchamp.com</a></p> <blockquote> <h4 id="個人用アカウントの Clipchamp で作成したプロジェクトを職場アカウントに移行できますか?"><a href="#%E5%80%8B%E4%BA%BA%E7%94%A8%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE+Clipchamp+%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E8%81%B7%E5%A0%B4%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AB%E7%A7%BB%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B%3F">個人用アカウントの Clipchamp で作成したプロジェクトを職場アカウントに移行できますか?</a></h4> <p>現時点では、個人用アカウントで作成したプロジェクトを職場アカウントに移行することはできません。</p> </blockquote> <p>こちらは、もうちょいマイルドだ。</p> <p>将来的にやる気があるのかはわからんが、少なくとも現時点では、個人アカウントのデータの組織アカウントへの移行は、公式的にはできないらしい。</p> <p>ところで、実際に組織アカウントで Clipchamp を使ってみると、プロジェクトファイルが OneDrive for Bussiness の <code><ルート>\動画\Clipchamp\<プロジェクト名>\</code> あたりの、 <code>*.clipchamp</code> という、 JSON が実体のファイルとして保存されていることに気づく。</p> <p>個人用 Clipchamp の動作を思い出してみると、画像や音声などのアセットはローカルにキャッシュや保存されているものが参照されているだけで、別 PC でプロジェクトを開こうとすると、改めてアセットファイルを紐づける必要があった。</p> <p>このため、 個人用 Clipchamp のプロジェクトも、この JSON ファイル程度の情報しかサーバーで管理されていないのではと推測できる。</p> <p>つまり、何らかの方法でこの JSON ファイル相当の情報を個人用 Clipchamp から抜き出せれば、組織アカウントに移行できるかもしれない。</p> <p>試行錯誤してみたところ、どうやら上手くいったようなので、その方法を紹介しよう。</p> <ul> <li>対象者: <ul> <li>最低限の JSON の読み書きができる</li> <li>ブラウザの開発者ツールを多少触ったことがある</li> </ul></li> <li>対象環境: <ul> <li>Microsoft Store Clipchamp アプリ 又は Chromium 系ブラウザ <ul> <li>以降の説明は Clipchamp アプリ 又は Edge を例に説明</li> </ul></li> <li>何らかのテキストエディタ <ul> <li>vscode あたりがオススメ</li> </ul></li> </ul></li> </ul> <p>ちなみに Clipchamp は Firefox 非対応だ。<br /> Web 標準に仇なすクソがよ。</p> <h3 id="準備"><a href="#%E6%BA%96%E5%82%99">準備</a></h3> <p>まず、組織アカウントで一度は何らかの Clipchamp のプロジェクトを作成しておく。(但しそのプロジェクトは以降の手順では使わない)</p> <h3 id="個人アカウントからプロジェクトデータの取り出し"><a href="#%E5%80%8B%E4%BA%BA%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%8B%E3%82%89%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E5%8F%96%E3%82%8A%E5%87%BA%E3%81%97">個人アカウントからプロジェクトデータの取り出し</a></h3> <p>移行元の個人アカウントを使い、 Clipchamp アプリか Edge で、 Clipchamp サービスを開く。</p> <p>ウィンドウ内の何らかのコンテンツにフォーカスをあわせた状態で、 <code>Ctrl+Shift+I</code> または <code>F12</code> キーを押し、開発者ツールを起動する。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-01.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-01.png" alt="" /></a></p> <p>Clipchamp 側ではエクスポートしたいプロジェクトを開き、開発者ツール側でネットワークタブを開く。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-02.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-02.png" alt="" /></a></p> <p><code>Ctrl+F</code> でネットワークタブの検索窓を開いて、 <strong>URL に</strong> <code>/projects/</code> が含まれているものを探す。<br /> 例えば下のスクショの場合、検索結果の 2つ目, 3つ目のレコードは <code>/projects/</code> が含まれているのが URL ではないので該当しない。<br /> 該当するものが複数ある場合は、ヘッダーの要求方法 (METHOD) が <code>GET</code> となっているモノを探す。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-03.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-03.png" alt="" /></a></p> <p>URL 一覧からアクティブになっているレコードを右クリックし、「編集して再送信する」をクリックする。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-04.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-04.png" alt="" /></a></p> <p>すると、開発者ツールウィンドウの下半分にネットワークコンソールが開くので、 <code>Send</code> ボタンをクリックする。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-05.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-05.png" alt="" /></a></p> <p>すると、更にその下に再送信結果が表示されるので、 <code>Download</code> をクリック。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-06.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-06.png" alt="" /></a></p> <p>既定のダウンロード先に <code>.json</code> ファイルがダウンロードされているはずなので、任意のテキストエディタで開く。 (vscode がオススメ)</p> <p>JSON の <code>projectState</code> プロパティの中身だけを繰り出して、 <code>.clipchamp</code> の拡張子で保存する。<br /> 具体的には、 vscode の場合 <code>Shift+Alt+F</code> で JSON を整形し、 <code>{ "projectState": {</code> の部分まで削除したのち <code>Ctrl+Shift+\</code> で次の対応する括弧に移動して、その閉じ括弧 <code>}</code> より後ろを削除するとよいだろう。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-11.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-11.png" alt="" /></a><br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-12.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-12.png" alt="" /></a></p> <p>以上で、移行に用いる <code>.clipchamp</code> ファイルのエクスポートは完了だ。</p> <h3 id="組織アカウントへの取り込み"><a href="#%E7%B5%84%E7%B9%94%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%B8%E3%81%AE%E5%8F%96%E3%82%8A%E8%BE%BC%E3%81%BF">組織アカウントへの取り込み</a></h3> <p>OneDrive for Bussiness の <code><ルート>\動画\Clipchamp\</code> あたりにプロジェクトフォルダを作成して、そこに <code>.clipchamp</code> ファイルを移動する。</p> <p>OneDrive for Business の WebUI 上から上記ファイルを開いて、 Clipchamp のウェブエディタを起動する。</p> <p>もし、「予期しないエラーが見つかりました ... Error: Project schema is an unsupported version」 というエラーが発生した場合、<br /> 上記 <code>.clipchamp</code> ファイルの JSON の <code>$.schemaVersion</code> のところを、 <code>1.3.3</code> くらいに書き換えて、改めて開く。<br /> (組織アカウントで予め作製しておいた Clipchamp のプロジェクトの <code>.clipchamp</code> を開いてみて、それと同じ <code>schemaVersion</code> の値にしておくのが良いだろう。)</p> <p>Clipchamp の編集画面が読み込まれたら、不足しているアセットを「アセットを探す」をクリックしてたダイアログ上で探して取り込む。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-22.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-22.png" alt="" /></a></p> <p>アセットが一箇所にまとまっているなら、「フォルダーを選択」でアセットが入っているフォルダを選択すれば、そのフォルダに含まれているファイルが再帰的に検索され、プロジェクトで使われているアセットが自動的に読み込まれるはずだ。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-23.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-23.png" alt="" /></a></p> <p>読み込めないアセットが全て紐付けられたか、あるいはどうして見つからないファイルについてはタイムラインから削除すれば、「アセットを探す」の表示が消え動画のプレビューができるようになるはずだ。</p> <p>なお、 2023年10月現在、組織アカウントの Clipchamp では内蔵ストックアセットが使えないようだ。 これも <a target="_blank" rel="nofollow noopener" href="https://www.microsoft.com/ja-jp/microsoft-365/roadmap?filters=&searchterms=Clipchamp%2Ccontent">10月以降順次ロールアウトされる</a> らしいので、移行元プロジェクトでストックアセットを使っている場合、そのあとに移行した方が良さそうだ。</p> <hr /> <h3 id="キャッシュからアセットの取り出し"><a href="#%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%8B%E3%82%89%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%81%AE%E5%8F%96%E3%82%8A%E5%87%BA%E3%81%97">キャッシュからアセットの取り出し</a></h3> <p>更に突っ込んで、一部ファイルがローカルのどこにあるかわからなくなっている場合、キャッシュなどからリソースをファイルとして取り出せる場合もある。</p> <p>但しこの方法を使うと、移行元のプランで使える一部のストックアセットなども取り出せてしまうが、それはライセンス的に微妙なので要注意。</p> <p>読み込めていないアセットの ID を、 プロジェクトの JSON から 表示名をキーにして探す。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-31.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-31.png" alt="" /></a></p> <p>移行元の Clipchamp のプロジェクトを開発者ツールを開いた状態で開き、先ほどのプロジェクトデータの取り出しと同じ要領で、今度はネットワークタブの検索窓を開いて、 <strong>URL に</strong> <code>/local-cache/{id}</code> が含まれている要求方法 (METHOD) が <code>GET</code> となっているレコードを探し、同じくアクティブレコードを右クリックで「編集して再送信する」をクリックする。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-32.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-32.png" alt="" /></a></p> <p>開発者ツールウィンドウの下半分にネットワークコンソールが開かれるが、 <strong>まずは <code>Headers</code> を開き <code>Range</code> のチェックを外してから、</strong> <code>Send</code> ボタンをクリックする。 そして、再送信結果が表示されたら <code>Download</code> をクリック。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-33.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-33.png" alt="" /></a></p> <p>保存される拡張子は必ずしも正しく設定されないので、 動画なら <code>.mp4</code> や <code>.webm</code>, <code>.gif</code> など、 画像なら <code>.png</code>, <code>.jpg</code>, <code>.svg</code> などにファイル名を書き換えよう。</p> <p>このファイルを、移行先の「アセットを探す」で指定すれば、移行先に取り込めるはずだ。</p> <hr /> <h3 id="別の個人アカウントへプロジェクトの取り込み"><a href="#%E5%88%A5%E3%81%AE%E5%80%8B%E4%BA%BA%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%B8%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%8F%96%E3%82%8A%E8%BE%BC%E3%81%BF">別の個人アカウントへプロジェクトの取り込み</a></h3> <p>組織アカウントと異なり、個人アカウントでは <code>.clipchamp</code> ファイルが OneDrive 等の見える所に存在しないので、別の方法で取り込む必要がある。<br /> Clipchamp は、かなり綺麗な URI 設計となっているようで、取り出し方法を応用すれば、個人アカウントを跨いでプロジェクトの移行もできそうだ。</p> <p>移行先のアカウントで Clipchamp を開き、適当な名前で新しいプロジェクトを作成したのち、開発者ツールを開く。 タイトル名を変えるなど何らかの変更を加え、いったん編集した場所からフォーカスを外す。</p> <p>この状態で開発者ツールのネットワークタブの検索窓を開いて、 <strong>URL に</strong> <code>/projects/</code> が含まれているもののうち、今度はヘッダーの要求方法 (METHOD) が <strong><code>PUT</code></strong> となっているモノを探す。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-51.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-51.png" alt="" /></a></p> <p>ペイロードタブを開いて、 <code>"id"</code> プロパティの値をいったんどこかにコピペしておこう。<br /> ちなみにこの値は、 <code>/projects/</code> の URL に含まれている ID と同じ値のはずだ。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-52.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-52.png" alt="" /></a></p> <p>今度は、インポート対象となるエクスポート済みの <code>.clipchamp</code> ファイルを任意のテキストエディタで開く。 そして、<strong>ルート直下の <code>"id"</code> プロパティ</strong>の値を、前述のコピペしといた <code>"id"</code> プロパティの値に書き換える。<br /> <code>"id"</code> プロパティ自体は JSON の中にいくつもあるが、書き換えるのは<strong>ルート直下のひとつだけにすることに要注意</strong>だ。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-53.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-53.png" alt="" /></a></p> <p>更に、 <code>.clipchamp</code> ファイルの中身全体を <code>{ "projectState":</code> と <code>}</code> でくくって、 <code>.json</code> ファイルとして保存する。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-54.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-54.png" alt="" /></a><br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-55.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-55.png" alt="" /></a></p> <p>移行先の Clipchamp の開発者ツールに戻り、先ほどの PUT のレコードが選択されている状態で、アクティブレコードを右クリックして「編集して再送信する」をクリックする。 開発者ツールウィンドウの下半分に開いたネットワークコンソールの、今度は <code>Body</code> を開き、そこに、先ほどの書き換えた <code>.json</code> ファイルの中身をペーストして、 <code>Send</code> ボタンをクリックする。<br /> <a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-56.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2023/10/clipchamp-migrate-personal-to-business-56.png" alt="" /></a></p> <p>リクエストが成功して何らかのレスポンスが返ってきたら、いったん Clipchamp アプリ(またはブラウザタブ)をすぐに閉じる。</p> <p>その後、改めて Clipchamp アプリまたは、ブラウザの新しいタブで Clipchamp を開き、プロジェクト一覧を見ると、先ほど作成した新しいプロジェクトが移行したプロジェクトに置き換わっているはずだ。<br /> もしそのプロジェクトを開いた際にエラーが出る場合は、 <code>PUT</code> する JSON の書き換えや指定方法が誤っているので、一旦プロジェクトを削除後、もう一度最初の手順からやり直そう。</p> <hr /> <h3 id="おわりに"><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">おわりに</a></h3> <p>だいぶ無理矢理な方法だが、上記のような方法で 個人用アカウント同士や、 個人アカウントと組織アカウントの間でプロジェクトを移行できた。<br /> ただ、 Clipchamp の仕様変更で同じ方法が使えなくなくなっている可能性がある点にはご了承願いたい。</p> advanceboy