こんにちは！Backlogブログ編集部です。
連載企画「ヌーラボのエンジニア・クリエイターが実践する、Backlog活用術」の第5弾をお届けします！
開発や制作の最前線に立つヌーラボのメンバーたちが、日々の業務でBacklogをどう使い倒しているのか——リアルなノウハウをお届けするシリーズです。
第5回となる今回は、プロダクトマネジメント本部の吉澤による「生成AIでつくったHTMLをBacklog『ブラウザで開く』でサクッと共有する方法」です！
「ChatGPTやClaudeで作った簡易ツールやプロトタイプを、チームメンバーにサクッと試してもらいたい！」「ファイルのダウンロード・アップロードの手間をなくしたい」という方は、ぜひ参考にしてみてください！
目次
「作ってみたけど、共有が面倒」問題
プロダクトマネジメント本部の吉澤です。
簡易なプロトタイプやツールを作っても、それを動かすのはコードを触れるメンバーだけ、ということはないでしょうか。上司やビジネスサイドのメンバーに共有したくても、結局スクショや動画を撮って送ったり、口頭で説明したりといった手間が発生しがちです。
ChatGPT、Claude、Geminiといった生成AIサービスを使うと、プロトタイプ、スライド、社内向けツール、データ分析、ちょっとしたゲームまで、HTMLファイルひとつで作れます。
HTMLファイルを共有する場合、多くはチャットやBacklogなどにファイルをアップロードし、受け取り側もそれをダウンロードしてローカルで開くことになります。専用サーバーにアップロードしない限り、ファイルを更新するたびにアップロードとダウンロードの手間がメンバー間で発生してしまいます。
ファイルプレビュー機能
今回はあまり知られていない、Backlogのファイル共有のプレビュー機能を使って、URLを送るだけでサクッと共有する方法を紹介します。コードに詳しくないメンバーでも、URLを開くだけでその場で内容を確認できる便利な機能です。
私も定量データ分析ツールやスライドをHTMLファイルとして生成して、プロジェクトにアップロードして、チームメンバーに共有するようになりました。
こちらは、ヌーラバーが作成したHTMLだけで動作するブログアイキャッチ画像メーカーを共有ファイルにアップロードしたものです。プロジェクト内で共有されており、シーンに合わせた背景を選んでタイトルを入力するだけで、簡単にアイキャッチ画像が作成できる超便利ツールです。今回、私もこのツールを使ってアイキャッチ画像を作成してみました。
共有手順
以下の手順で、共有先をプロジェクトメンバーに限定してHTMLファイルを公開しています。
- 生成AIサービスを介してHTMLファイルを作成し、ダウンロードする
- 共有したいBacklogプロジェクトの「ファイル」タブを開く
- 任意の場所にHTMLファイルをアップロードする
- アップロードしたファイルを選択し、「ブラウザで開く」をクリックする
- プレビュー表示された画面のURLをコピーして共有する
「ブラウザで開く」で求められる認証
プラウザで開くボタンから共有ファイルをプレビューする際には、Backlogへのログインに使うヌーラボアカウントでの認証が求められるため、以下の情報を入力してください。
- ユーザー名: ヌーラボアカウントのメールアドレス
- パスワード: ヌーラボアカウントのパスワード
2段階認証を設定している、または管理対象アカウントである場合は事前に特別なパスワードを発行しておく必要があります。発行方法はBacklogヘルプセンターの特別なパスワードを参照してください。
- ユーザー名: ヌーラボアカウントのメールアドレス
- パスワード: 特別なパスワード
利用時の注意点
今回紹介した方法は、1ファイルで完結するHTML形式での共有を想定としています。外部サーバーとの通信や外部スクリプトの読み込みを行わない場合にご利用ください。
まとめ
URLひとつでビジネスサイドのメンバーまで含めてプロジェクトメンバー全員が即座にプレビューできるのは、大きなメリットです。新しくサーバーを立て、権限周りを別途整備したりしなくても、普段使っているBacklogにファイルを置くだけで完結します。
HTMLだけでなく画像やPDFファイルなども同様に共有してプレビューできます。ぜひBacklogファイル共有機能をチームで使ってみてください。