SlideShare a Scribd company logo
1 of 39
Download to read offline
HTML5でセマンティックなマークアップ,[object Object],2011/8/23 白石俊平,[object Object]
よりセマンティックな,[object Object],文書プラットフォーム,[object Object],+,[object Object],よりリッチな,[object Object],アプリケーション,[object Object],プラットフォーム,[object Object],HTML5 =,[object Object]
HTML5においては、「セマンティックなマークアップ」というパラダイムシフトが必要。,[object Object]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,[object Object],<html><body>,[object Object],<div>,[object Object],  <div>,[object Object],    <div>,[object Object],      <div>,[object Object],HTML4では、こんなマークアップが普通でした。,[object Object],      </div>,[object Object],      <div>,[object Object],        <div>,[object Object],        </div>,[object Object],      </div>,[object Object],    </div>,[object Object],    <div>,[object Object],      <div>,[object Object],        <div>,[object Object],          <div>「分け入っても分け入ってもdiv」,[object Object],          </div>,[object Object],          <div>,[object Object],          </div>,[object Object],        </div>,[object Object],      </div>,[object Object],    </div>,[object Object],    <div>,[object Object],    </div>,[object Object],  </div>,[object Object],</div>,[object Object],</body></html>,[object Object]
これからは?,[object Object],文書に内在する,[object Object],「意味」(=セマンティック),[object Object],を意識しながらマークアップする必要がある。,[object Object]
エンジニアがマークアップに意味を「吹きこむ」,[object Object],Chrome+HTML5 Conference 開催のご案内,[object Object],最近、スマートフォンサイトを中心に活用事例が目立つようになり、HTML5への注目は日々高まっています。,[object Object],その一方、,[object Object],「HTML5について勉強したいけど、どこから始めればよいか分からない」,[object Object],という方も少なくないのではないでしょうか?,[object Object],HTML5 Developers JPでは、そんなディベロッパーの皆さんに向けて、,[object Object],HTML5を学んで頂くための勉強会「HTML5とか勉強会」をこれまで毎月開催してきました。その回数は既に19回に及びます。,[object Object],今回はそんな「HTML5とか勉強会」の第20回を記念し、HTML5 Developers JPとグーグル株式会社の共催で,[object Object],2011年8月21日、"Chrome+HTML5 Conference"を開催いたします。,[object Object],ここは強調したいな,[object Object],ここは見出し,[object Object],ここは固有名詞だ,[object Object],ここで第一節終了!,[object Object],ここは日付だな,[object Object],ここは固有名詞、,[object Object],かつ強調したいな,[object Object]
エンジニアがマークアップに意味を「吹きこむ」,[object Object],マークアップを通じた、,[object Object],他者との「コミュニケーション」,[object Object],と言って良い。,[object Object],すると、吹きこまれた「意味」を他のプログラムが解釈することも可能になる。,[object Object],Semantic,[object Object],Semantic,[object Object],<!DOCTYPE html>,[object Object],<html>,[object Object], …,[object Object],</html>,[object Object]
HTML5における「セマンティック」の実際,[object Object],[object Object]
30種類の新要素
14種類の既存要素が変化
マイクロデータ
WAI-ARIAとの統合,[object Object]
セクション要素とは?,[object Object],[object Object]
章、節、項…
メニュー、本文、サイドバー…
ページ、ダイアログ…
HTML5では、以下の4要素がセクション要素として追加
section/article/aside/nav,[object Object]
<article>/<aside>/<nav>以外のセクションは全て<section>で。,[object Object]
<article>か?<section>か?
->そのセクションをRSSリーダーで全文配信しても意味が通るならば<article>,[object Object]
例えば広告やサイドバーガジェットなど
<aside>か?<section>か?
->そのセクションをざっくり削ってしまっても、ページの意味内容がほとんど損なわれないなら、<aside>,[object Object]
内部に<ul>と<a>を用いてリンク一覧を作るのが基本。
<nav>を使うか?使わないか?
<nav>の部分のみが「メニュー」として提示された場合に、ユーザにとって便益があるかどうかで考える。,[object Object]
<nav>,[object Object],サイトナビゲーション,[object Object],ヘッダ,[object Object],<article>,[object Object],本文,[object Object],<section>,[object Object],<section>,[object Object],新着記事,[object Object],アフィリエイト,[object Object],広告,[object Object],<aside>,[object Object],<nav>,[object Object],著者のTwitter近況,[object Object],<aside>,[object Object],<section>,[object Object],月別,[object Object],アーカイブ,[object Object]
セクションとアウトライン,[object Object],[object Object]
「セクション要素の利用=アウトライン操作」であることを常に意識して!!
<div>と同じ感覚で利用するとか、ほんとNG
スタイル用途でブロックを作成する場合は<div>を使用する
「HTML5 Outliner」で遊ぼう!,[object Object]
セクションに関連する要素,[object Object],[object Object]
セクションルート(body/blockquote/details/fieldset/figure/td)
ヘッダ、フッタ(header/footer),[object Object]
見出しのランクはセクションごとにリセットされる。
基本的には、<h1>のみを使うべし!
セクション要素は、常に見出しとセットだと考えるべし。,[object Object]

More Related Content

Similar to HTML5でセマンティックなマークアップ

webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術ina job
 
XMPP仕様簡単解説
XMPP仕様簡単解説XMPP仕様簡単解説
XMPP仕様簡単解説Keiichi Daiba
 
Html5 入門編 その2
Html5 入門編 その2Html5 入門編 その2
Html5 入門編 その2ngi group.
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門柴田 篤志
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座Atsushi Miura
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみようSaeki Tominaga
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座annulus
 
IT研修講座
IT研修講座IT研修講座
IT研修講座annulus
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
kyoto IT
kyoto ITkyoto IT
kyoto ITannulus
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008annulus
 
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策Kensaku Komatsu
 

Similar to HTML5でセマンティックなマークアップ (20)

webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
 
XMPP仕様簡単解説
XMPP仕様簡単解説XMPP仕様簡単解説
XMPP仕様簡単解説
 
Html5 入門編 その2
Html5 入門編 その2Html5 入門編 その2
Html5 入門編 その2
 
Module02
Module02Module02
Module02
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
最速HTML勉強会
最速HTML勉強会最速HTML勉強会
最速HTML勉強会
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
Java Script4
Java Script4Java Script4
Java Script4
 
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみよう
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座
 
IT研修講座
IT研修講座IT研修講座
IT研修講座
 
It01
It01It01
It01
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
it研修講座
it研修講座it研修講座
it研修講座
 
kyoto IT
kyoto ITkyoto IT
kyoto IT
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008
 
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
 

More from Shumpei Shiraishi

コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術Shumpei Shiraishi
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶShumpei Shiraishi
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門Shumpei Shiraishi
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門Shumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るShumpei Shiraishi
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカShumpei Shiraishi
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでShumpei Shiraishi
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んでShumpei Shiraishi
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門Shumpei Shiraishi
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだことShumpei Shiraishi
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありきShumpei Shiraishi
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトShumpei Shiraishi
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んでShumpei Shiraishi
 

More from Shumpei Shiraishi (20)

俺的GEB概論(前半)
俺的GEB概論(前半)俺的GEB概論(前半)
俺的GEB概論(前半)
 
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
 
漫☆画太郎論
漫☆画太郎論漫☆画太郎論
漫☆画太郎論
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
 
秒速一億円
秒速一億円秒速一億円
秒速一億円
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んで
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 

Recently uploaded

IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG-Audio
 
チームで開発するための環境を整える
チームで開発するための環境を整えるチームで開発するための環境を整える
チームで開発するための環境を整えるonozaty
 
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜Naomi Yamasaki
 
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。iPride Co., Ltd.
 
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」IGDA Japan SIG-Audio
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りiPride Co., Ltd.
 
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024Hideki Saito
 
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))yoshidakids7
 
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版Takayuki Nakayama
 
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析sugiuralab
 
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_2024031300001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313ssuserf8ea02
 
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~honeshabri
 

Recently uploaded (12)

IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
 
チームで開発するための環境を整える
チームで開発するための環境を整えるチームで開発するための環境を整える
チームで開発するための環境を整える
 
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
 
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
 
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
 
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
 
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
 
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
 
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
 
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_2024031300001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
 
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~