ElcamyTECH
Articles
🤲

OpenHandsの応用的な使い方

Tech生成AIOSS2025/05/28

はじめに

この記事では、OpenHandsの応用的な使い方として下記の3つを紹介します。

  1. 画像のアップロード

  2. Jupyterを使ったデータ分析

  3. Webブラウジング

    OpenHandsとは何なのか、導入手順や基本的な使い方については、過去の記事をご覧ください。

    :::message

    https://blog.elcamy.com/posts/f6719338/

    :::

1. 画像のアップロード

チャットでは画像のアップロードをする機能があります。 今回はアップロードした画像をもとに、HTML/CSSを使ってフロンドエンドの作成を依頼してみました。

  1. チャットで指示を出す際に、併せて画像をアップロードします。
  • 入力画面

image

image

  • アップロードした画像

image

  1. タスクが完了するとWorkspaceにHTMLファイルとCSSファイルが作成されます。

    image

  2. 下記のような見た目のサイトになっていました。 タイトル、記事バナー、記事タイトルなどのパーツは作成されていますが、レイアウトやデザインの元の画像とは異なる結果になりました。

    image

2. Jupyterを使ったデータ分析

Jupyterタブではデータ分析から可視化までを行うことができます。 今回はGitHubにアップしたこちらのCSVファイルを使用します。

  1. CSVファイルをアップしたリポジトリを選択します。

    image

  2. チャットが開始できる状態になってから、まずはデータセットを読み込みます。

  • 指示文 Jupyterタブで作業するように明確に指示しないと、WorkspaceタブでJupyterをインストールしてしまうことがあります。
Jupyterタブで作業をしてください。 
sample_data_small.csv を読み込んで先頭の5行を表示してください。
  • 実行結果画面

image

  1. グラフを指定して可視化します。 今回は「Column 0」を使用するように指定したのですが、「Column 1」を使ってしまっています。

    image

    :::message

    外部のデータセットを読み込むことも可能です。 例えば、BigQueryに接続した結果は下記のとおりになります。

    :::

    • GCPサービスアカウントのロール
  • BigQueryジョブユーザー
  • BiguQueryデータ閲覧者
  • BigQueryユーザー
  • 指示文
Jupyterタブで作業してください。 
このservice_accountを使用してBigQueryに接続してください。

[ここにservice_accountのJSONをコピペ]
  • 実行結果画面

image

3. Webブラウジング

OpenHandsはWebブラウジングの機能も備えています。 この機能を直接使うケースは殆ど無いと思いますが、これによって必要な場合にはWeb検索から最新の情報を得たうえでタスクを実行できるようになっています。

Googleニュースから注目ニュースの要約を依頼した例

image

おわりに

ここまで読んでいただき、ありがとうございました。 OpenHandsによるタスクは失敗したり期待通りにならないことも少なくないですが、色んなことができることに可能性を感じられました。

最後に、今回OpenHandsを試すなかでLLMモデルとしてgpt-4o miniではなくgpt-4oを選んでしまい、予想外の料金が発生してしまいました。 想定どおりのLLMモデルが使用されていることを設定画面で確認してから使用した方が安心です。

参考

https://github.com/All-Hands-AI/OpenHands

関連記事

Elcamyについて

AI・データエンジニアリング・クラウドを中心に、技術で事業課題を解決しています。 お気軽にご相談ください。