キーボードナビゲーションの機能を使って、1点から3点の「操作スイッチ」で、WWWを利用する方法を述べる。
(1)キーボードナビゲーションについて
GUI(Graphic User Interface)の操作環境は、マウスなどの「ポインティングデバイス」のみによる操作が一般的であった。キーボードナビゲーションは、コンピュータのGUIによる操作環境をキーボードで利用することを可能にする機能であり、ポインティングデバイスによる操作機能と並行して提供されている。
すなわち、「ポインティングデバイスによる操作」と「キーボードナビゲーションによる操作」はどちらも同時にしかも同様に利用することができる。
キーボードナビゲーションは、マウス以外の方法でコンピュータを利用したい人のための提供されている機能であり、マウスなどのポインティングデバイスの利用が困難な障害児・者にアクセシビリティをもたらすばかりでなく、モバイル環境などポインティングデバイスの利用が困難な状態のときにも有効である。
インターネットのWWWブラウザでは、Internet ExplorerのVer.3.x以降、Netscape CommunicatorのVer. 4 以降がこのキーボードナビゲーションを提供している。
なお、日本においてキーボードナビゲーションの経緯や提供しているアプリケーションソフトウェアなどの詳細な情報は、下記のホームページ等の情報が参考になる。
・Educational Assistive Technologyの広場
(日本におけるシリアルキーの経緯、キーボードによるアプリケーションの操作機能)
http://www.nise.go.jp/research/kogaku/hiro/index.html
(2)キーボードナビゲーションの機能
代表的なWWWブラウザであるInternet Explorer が提供しているキーボードナビゲーションの機能を紹介する。Internet Explorerは表4.5.2.1のように14個のキーボードナビゲーションを提供している。
表4.5.2.1 Internet Explorerキーボードナビゲーション
TAB |
リンクポインタが右方向、下方向に移動する リンクポインタが画面の最下行にあるときには画面がスクロールする ページの最後までスクロールすると、ページの先頭の戻る |
SHIFT+TAB |
リンクポインタが左方向、上方向に移動する リンクポインタが画面の最下行にあるときには画面がスクロールする ページの先頭までスクロールすると、ページの最後に戻る |
ENTER |
選択されているリンクポインタのリンク先にハイパーリンクする |
SHIFT+F10 |
ハイパーリンクのコンテキストメニューを表示する |
CTRL+TAB |
他のフレームに移動する |
SHIFT+CTRL+TAB |
前のフレームに戻る |
F5 |
画面を再度読み込む |
ESC |
画面の読み込みを停止する |
BACKSPACE または ALT+ LEFT ARROW |
前の画面に戻る |
SHIFT+BACKSPACE または ALT+RIGHT ARROW |
次の画面に進む |
CTRL+O |
新しいページを指定する |
CTRL+N |
新たな画面を開く |
CTRL+S |
表示画面を保存する |
CTRL+P |
表示画面を印字する |
注:例えば、SHIFT+TABは〔シフトキー〕を押しながら〔タブキー〕を押すことを示している。
なお、これらの機能のうちリンクポインタや画面の移動などの機能は、キーを押し続けるとキーリピートが作動しキーを放すまで連続的に実行されるので、特に不随意運動がある人が使用するときには対策が必要である。
(3)操作スイッチについて
「操作スイッチ」とは、マウスや標準キーボードの加えてコンピュータに接続し、アプリケーションソフトウェアなどを操作するための代替スイッチ(各種センサーも含む)の総称である。利用者は、障害の状態に応じていろいろな「操作形態」や「大きさ」の操作スイッチを接続して利用することができる。
図4.5.2.1-1 押下スイッチ
操作スイッチの操作形態としては、「押す」「引く」「触れる」「近づける」「たたく」「曲げる」「息を吐く」「息を吸う」「瞬きをする」などのスイッチが使用されている。また、大きさについても指先につける超小型のスイッチからB5サイズのスイッチまで使用されている。
図4.5.2.1-2 引くスイッチ
図4.5.2.1-3 自在アームに取り付けた押下スイッチ
(4)Wing-SKについて
一般に普及しているコンピュータは、「操作スイッチ」を直接接続できない。
このため、操作スイッチをコンピュータに接続するための入力ディバイスWing-SKを製作した。Wing-SKは、「シリアルキー」と呼ばれる入力インタフェースに対応している。
シリアルキーは、代替入力ディバイス(AAC Devices)をコンピュータに接続するための機能であり、日本ではWindows95のリリース以降OSの基本機能として提供されている。シリアルキーは、シリアルポート(RS-232C端子)からすべてのキーボードの信号とマウスの制御信号を入力する仕様を有しており、制御コマンドはGIDEI(The
General Input Device Emulating Interface)を採用している。
MacintoshでもTrace R&D CenterのWWWサイトで提供されているMacintoshSerialKeysと呼ばれるデバイスドライバソフトウェアをインストールすることにより、シリアルキーを利用することができる。すなわち、Wing-SKはWindowsマシンにもMacintoshマシンにも接続して使用することができる。
なお、「Wing-SK」、「シリアルキー」、「GIDEI」の詳細な情報は、下記のホームページ等の情報が参考になる。
・Educational Assistive Technologyの広場
(Wing-SKのホームページ、日本におけるシリアルキーの経緯、GIDEIの概要)
http://www.nise.go.jp/research/kogaku/hiro/index.html
(5)シリアルキーの設定
Wing-SKをコンピュータに接続して使用するには、コンピュータ側でシリアルキーデバイスからの入力を処理できるように設定しておく必要がある。
ここでは、Windows95、98、NT4を例にしてシリアルキーの設定方法を述べる。
1)ユーザー補助の起動
図4.5.2.1-4-1はWindowsのコントロールパネルを開いた状態を示している。
コントロールパネルのなかに、「ユーザー補助」と呼ばれる車椅子のアイコンがある。
この「ユーザー補助」アイコンをクリックすると図4.5.2.1-4-2に示す「ユーザー補助のプロパティ」が開く。
図4.5.2.1-4-1 コントロールパネルのユーザー補助
2)ユーザー補助のプロパティ
「ユーザー補助のプロパティ」において右側にある[全般]と表示されたタグを選択すると図4.5.2.1-4-2のようなシリアルキーデバイスの設定に関する画面が表示される。
図4.5.2.1-4-2の下方にある、
□シリアルキー ディバイスを使う |
選択し、[設定]をクリックすると、図4.5.2.1-4-3の画面が表示される。
図4.5.2.1-4-2 ユーザー補助のプロパティ
3)シリアルキーデバイスの設定
図4.5.2.1-4-3は、シリアルキーデバイスを接続する「シリアルポート」と信号の「ボーレート」を設定する画面である。
図4.5.2.1-4-3では、Wing-SKをシリアルポートの[COM1」に接続し、「ボーレート」を9600(bps)に設定した場合を示している。
図4.5.2.1-4-3 シリアルキーデバイスの設定
(6)1点スイッチによるWWWの操作
1)操作スイッチとコンピュータの接続
図4.5.2.1-5 は、1個の操作スイッチでWWWを操作するときの接続図である。1個の操作スイッチが入力ディバイスWing-SKに接続されており、Wing-SKはコンピュータのシリアルポートに接続されている状態を示している。
なお、図4.5.2.1-5 では図4.5.2.1-1 に示した押下スイッチが例示されているが、ユーザが操作することができるどのような操作スイッチであっても接続して使用することが可能である。
図4.5.2.1-5 1点スイッチでWWWを利用する接続図
2)1点スイッチによるWWWの操作方式
図4.5.2.1-5に示した1点スイッチによるWWWの操作方法は、自動走査方式(OneSwitch Auto Scan Mode)を採用している。
「操作スイッチ」を[ON]の(押した)状態に保持すると、Wing-SKから[タブキー]の信号が一定の時間間隔でコンピュータに送出される。コンピュータは、標準キーボードの[タブキー]が連続して入力された状態と同様に機能するので、表4.5.2.1で示したキーボードナビゲーションが作動し画面の「リンクポインタ」が左方向、あるいは下方向に移動する。(なお、[タブキー]の信号を送出する時間間隔は自由に設定することができる。)
選択したい位置に「リンクポインタ」が移動したときに「操作スイッチ」を[OFF]する(放す)と、Wing-SKは[エンターキー]の信号を送出する。このときコンピュータは、標準キーボードの[エンターキー]を押した状態と同様に機能するので、キーボードナビゲーションが作動して選択した「リンクポインタ」の示す画面にハイパーリンクする。
(7)2点スイッチによるWWWの操作
1)操作スイッチとコンピュータの接続
図4.5.2.1-6は、2個の操作スイッチでWWWを操作するときの接続図である。2個の操作スイッチ(操作スイッチ[A]と操作スイッチ[B])がWing-SKに接続されており、Wing-SKはコンピュータのシリアルポートに接続されている。
図4.5.2.1-6では、2種類の押下スイッチが例示されているが、これらの操作スイッチに限らずすべての操作スイッチを利用することができる。
図4.5.2.1-6 2点スイッチでWWWを利用する接続図
2)2点スイッチによるWWWの操作方式
・2点スイッチ自動走査方式(Two Switches Auto Scan Mode):その1
図4.5.2.1-6において、「操作スイッチ[A]」を[ON]の状態に保持すると[タブキー]の信号が一定間隔で送出され、「リンクポインタ」が右方向、あるいは下方向に移動する。(
(6)2)で述べた「1点スイッチによる自動走査方式」と同じ機能である。)
「操作スイッチ[B]」を[ON]の状態に保持すると、[シフトキー]+[タブキー]
の信号が一定間隔で送出され、「リンクポインタ」が左方向、あるいは上方向に移動する。( (6)2)の「1点スイッチによる自動走査方式」と反対の機能である。)
この方式は、(6)2)の方式に「操作スイッチ[B]」が追加されている。「操作スイッチ[B]」により「リンクポインタ」を反対方向に選択できることが特徴である。
・2点スイッチ自動走査方式(Two Switches Auto
Scan Mode):その2
図4.5.2.1-6において、「「操作スイッチ[A]」を[ON]の状態に保持すると[タブキー]の信号が一定間隔で送出され、「リンクポインタ」が右方向、あるいは下方向に移動する。(
(6)2)と同じの機能である。)
「操作スイッチ[A]」の機能は、(6)2)で述べた「1点スイッチによる自動走査方式」と同様である。
「操作スイッチ[B]」を[ON]すると、Wing-SKは「バックスペースキー」の信号を送出する。表4.5.2.1で示したように「バックスペースキー」が入力されると、キーボードナビゲーションにより前の画面が表示される。(「操作スイッチ[B]」を[ON]に保持しても「バックスペースキー」の信号は連続して送出されない。)
この方式の特徴は、前項(6)の方式に「操作スイッチ[B]」が追加され「前の画面に戻る」操作が可能になっている点にある。後述4.5.2.3(2)で述べる前の画面に戻ったときに「リンクポインタ」の位置が保持されるIE5βの機能が活かされることになる。
・自動走査方式(Two Switches Auto Scan
Mode):その3
図4.5.2.1-6において、「操作スイッチ[A]」を[ON]の状態に保持するとWing-SKは[タブキー]の信号を一定の時間間隔でコンピュータに送出する。キーボードナビゲーションが作動して画面の「リンクポインタ」が左方向、あるいは下方向に移動する。(ここまでの操作は、前項(6)2)の「1点スイッチ」の操作と同様である。)
選択したい位置に「リンクポインタ」が移動したときに「操作スイッチ」を[OFF]する(放す)と、Wing-SKは信号の送出を停止する。すなわち、画面には選択した「リンクポインタ」が示されている。
次に、「操作スイッチ[B]」を[ON]すると、Wing-SKは[エンターキー]の信号を送出する。コンピュータは、標準キーボードの[エンターキー]を押した状態と同様に機能し、キーボードナビゲーションが作動して選択した「リンクポインタ」が示す画面にハイパーリンクする。
この方式は、前項(6)で述べた「1点スイッチによる自動走査方式」と比較すると、「リンクポインタ」の選択の再試行が可能である、という特徴がある。
・2点スイッチ逐次走査方式(Two Switches Step
Scan Mode)
これまでの述べた自動走査方式(Auto Scan Mode)は、自動的に走査する「リンクポインタ」が選択したい位置に移動したときのタイミングに合わせて「操作スイッチ」を[OFF]することが要求される。このため、脳性麻痺などによる強い不随意運動ある障害児・者には利用が困難なことが多い。
不随意運動が強い障害児・者には、走査のタイミングを要求しない逐次走査方式が有効である。
この操作方式は、図4.5.2.1-6において「操作スイッチ[A]」を[ON]すると、Wing-SKは[タブキー]の信号を1回送出する。画面はキーボードナビゲーションにより「リンクポインタ」が1つ下方向(右方向)に移動する。連続して「操作スイッチ[A]」を逐次[ON]にすることにより「リンクポインタ」を選択する。このとき、「操作スイッチ[A]」が[ON]の状態に保持されても、Wing-SKはなにも信号を送出しない。すなわち、Wing-SKは4.5.2.1(2)で指摘した「標準キーボード」のようなオートリピート機能を回避する仕様になっている。
「操作スイッチ[B]」を[ON]すると、Wing-SKは[エンターキー]の信号を送り出し、画面がハイパーリンクする。(「操作スイッチ[B]」を[ON]に保持しても「エンターキー」の信号は連続して送出されない。)
(8)3点スイッチによるWWWの操作
1)操作スイッチとコンピュータの接続
図4.5.2.1-7は、3個の操作スイッチをコンピュータに接続する状態を示してい。3個の操作スイッチ(操作スイッチ[A]と操作スイッチ[B]、操作スイッチ[C])がWing-SKを介してコンピュータに接続されている。
図4.5.2.1-7では、2種類の押下スイッチと1個のプルスイッチが例示されているが、これらの操作スイッチに限らずすべての操作スイッチが接続できることは、前項で述べたとおりである。
図4.5.2.1-7 3点スイッチでWWWを利用する接続図
2)3点スイッチによるWWWの操作方式
・3点スイッチ自動走査方式(Three Switches Auto Scan Mode):その1
「操作スイッチ[A]」を[ON]の状態に保持すると、[タブキー]の信号が一定間隔で送出され、「リンクポインタ」が右方向、あるいは下方向に移動すし、[OFF]すると[エンターキー]の信号が送出されハイパーリンクが起こる。
「操作スイッチ[B]」を[ON]の状態に保持すると、[シフトキー]+[タブキー]の信号が一定間隔で送出され、「リンクポインタ」が左方向、あるいは上方向に移動し、[OFF]すると[エンターキー]の信号が送出されハイパーリンクが起こる。
「操作スイッチ[C]」を[ON]すると、「バックスペースキー」が送出され、「前の画面が表示」される。
この方式は、(7)2)で示した方式に「操作スイッチ[C]」による「前の画面が表示」が追加された方式である。また、(7)2)で示した方式に「操作スイッチ[B]」による「リンクポインタの逆移動」が追加された方式でもある。
・3点スイッチ自動走査方式(Three Switches Auto
Scan Mode):その2
「操作スイッチ[A]」を[ON]の状態に保持すると、[タブキー]の信号が一定間隔で送出され、「リンクポインタ」が左方向、あるいは下方向に移動する。
([OFF]のときは何も起こらない。)
「操作スイッチ[B]」を[ON]の状態に保持すると、[シフトキー]+[タブキー]の信号が一定間隔で送出され、「リンクポインタ」が左方向、あるいは上方向に移動する。([OFF]のときは何も起こらない。)
「操作スイッチ[C]」を[ON]すると、[エンターキー]の信号を送出され「ハイパーリンク」が起こる。
この方式は、(7)2)で述べた方式に「操作スイッチ[C]」による「ハイパーリンク」機能が追加されている。
・3点スイッチ逐次走査方式(Three Switches Step
Scan Mode)
「操作スイッチ[A]」を[ON]する度に[タブキー]の信号が1回送出され、「リンクポインタ」が1つ下方向(右方向)に移動する。
「操作スイッチ[B]」を[ON]する度に[シフトキー]+[タブキー]の信号が1回送出され、「リンクポインタ」が1つ上方向(左方向)に移動する。
「操作スイッチ[C]」を[ON]すると、[エンターキー]の信号が送出され、「ハイパーリンク」が起こる。
この方式は、(7)2)で述べた方式に「操作スイッチ[B]」による「リンクポインタ」の逆方向移動既往が追加されたている。
このように3点スイッチによる操作方式は、2点スイッチによる操作方式ににはない操作が可能になるため効率的にWWWを操作することができる。
なお、Wing-SKは8個までの「操作スイッチ」を接続できる仕様を有しており、4点スイッチ以上の「操作スイッチ」を使用するユーザのニーズに対しても、対応することが可能である。
4点スイッチ以上の「操作スイッチ」を使用する場合は、追加される「操作スイッチ」に表1のキーボードナビゲーションの機能を割り付けることになる。
本稿では、紙面の関係で1点から3点までの「操作スイッチ」を使用する場合について述べた。
(1)「リンクポインタ」の色表示の必要性
ポインティングデバイスによる操作は、マウスカーソルを「リンクポインタ」に移動し「マウススイッチ」をクリック(あるいは、ダブルクリック)する。
キーボードナビゲーションによる操作は、〔タブキー〕(あるいは、〔シフトキー〕+〔タブキー〕)を入力することにより「リンクポインタ」を選択する。
選択されている「リンクポインタ」は、情報のユーザ側の書式設定がない(ユーザ書式を設定する機能がない、またユーザ書式を設定していない)状態では、細い破線で囲まれて(枠取りされて)表示される。この表示は、破線が細いこと、背景色とのコントラスト、などが原因して大変見分けにくい。
このため、選択されている「リンクポインタ」を他のポインタや文字と異なった色で表示したり、背景色とコントラストのある色で表示したりすることが求められている。
「リンクポインタ」を色表示させるには、平成9年度「新100校プロジェクト」成果報告集(高度化に関する企画)(6.5重複障害児のアクセシビリティ環境改善に向けての研究参照)で述べているようにWWWの情報提供側でHTML(Hyper
Text Markup Language)のリストの中に、<body alink = "ff0000">などと記述する方法でも可能である(この場合、「リンクポインタ」が赤色で表示される)。しかしこの方法は、WWWの情報ユーザ側で異なった色などに設定することは不可能であった。
本稿では、情報のユーザ側で「リンクポインタ」の色指定などを設定することができるCSS(Cascading Style Sheets)を使用する。
(2)CSSについて
CSSは、WWWに関する仕様を整備・提案する機関であるW3C(The World WideWeb Consortium)が勧告しているスタイルシートである。
CSSを使用すると、情報の制作者(authors)と受信者(readers)がHTML文書に対してフォント、色分け、スペーシング、音声挿入などのスタイルシート(書式)を設定することができる。すなわち、これまでは情報の制作者側から好みのスタイルシートが設定されていたが、受信者側でも個人的あるいは技術的な不都合を改善するために個人的なスタイルシートの設定が可能になる。
一般に市販されているホームページ作成の参考書などでは、CSSを異なるWWWブラウザによる表示の差異を回避したり、HTMLでは不十分なより詳細な書式設定をしたりするための方法として紹介されている。しかしCSSは、情報の受信者側のスタイルシートの設定を、情報の制作者のスタイルシートに優先して設定することが可能である、という特徴がある。
アクセシビリティの改善という視点からは、このCSSの特徴を評価し積極的に利用することにより、ユーザの特性に応じたカスタマイズが可能になるという点が重要である。
(3)CSSの記述例
リスト1にCSS文書の記述例を示す。
リスト1.CSS文書の記述例
BODY { color: white; background-color: black } A:active { color: red } A:link { color: green } A:visited { color: purpule } |
リスト1のCSS文書は上から順にそれぞれ、
文字を白色、背景を黒色 リンクポインタを赤色 非訪問アンカーを緑色 訪問アンカーを紫色 |
に設定している。
リスト1のCSS文書はエディタなどで作成し、この場合は〔defult.css〕というファイル名でテキスト形式で保存する。このようにCSSは簡単に作成することができる。
(4) CSSの設定方法
情報の受信者(ユーザ)側でCSSを設定する方法をInternet ExExplorerにして述べる。
1)ユーザー補助を開く
Internet Explorerのコマンドバーからインターネット オプションを開く(図4.5.2.1-8-1)と、左下に〔ユーザー補助〕のボタンがある。
このボタンをクリックすると、図4.5.2.1-8-2のような〔ユーザー補助〕の窓が開く。
図4.5.2.1-8-1 インターネット オプションのボックス
2)CSSファイルの指定
〔ユーザー補助〕の下方にある〔ユーザースタイルシート〕を選択し、その下の白枠にCSSのファイル名を指定する。
図4.5.2.1-8-2では、〔Cドライブ〕の〔w3cフォルダ〕にあるリスト1が〔defult.css〕というファイル名で設定されている。
図4.5.2.1-8-2 ユーザー補助のボックス
3)書式設定の選択
〔ユーザー補助〕の窓の上方にはユーザースタイルシートとして、
□Webページで指定された色を使用しない □Webページで指定されたフォント スタイルを使用しない □Webページで指定されたフォント サイズを使用しない |
の選択肢がある。これらは、ユーザのカスタマイズに応じて選択する。
図4.5.2.1-8-2では、〔□Webページで指定された色を使用しない〕が選択されている。
(5)CSSによるユーザ書式指定の実行例
1)CSSを指定しない画面
図4.5.2.1-9-1は、ユーザ書式を指定していないWWW画面の1例である。
この画面は、情報提供側のHTMLリストで、文字が黒色と赤色、背景がグラフィックス、非訪問アンカーが青色、訪問アンカーが茶色に設定されており、これらの設定が画面に反映されている。
図4.5.2.1-9-1 CSSを設定しないときの表示
2)CSSを指定した画面
図4.5.2.1-9-2は、リスト1のCSS文書を(4)で述べた手順で設定したときに表示される画面である。
この画面では、文字が白色、背景が黒色、リンクポインタが赤色、非訪問アンカーが緑色、訪問アンカーが紫色で表示されている。すなわち、リスト1で指定したユーザ側の書式指定が、情報提供側のHTMLリストの指定に優先して反映されている。
CSSの設定により、背景色関係などでリンクポインタや非訪問アンカー、訪問アンカーなどが見分けにくいときには、ユーザにとって見分けやすい色に設定することが可能になっている。
図4.5.2.1-9-2 CSSを設定したときの表示
Internet Explorer Ver. 4.x (IE4)とInternet Explorer Ver. 5.xβバージョン(IE5β)ではキーボードナビゲーションの動作に以下のような違いがあることがわかった。
(1)IE4におけるキーボードナビゲーションの動作
1)リンクポイントの選択
図4.5.2.1-10-1は、キーボードナビゲーションにより「リンクポイント」を選択している画面の1例を示している。〔タブキー〕により選択された「リンクポイント」は2行目の「キーボードナビゲーションの操作機能」にある。破線で囲まれ、赤色で表示されてる。
2)ハイパーリンクの実行
図4.5.2.1-10-2の状態で、〔エンターキー〕を入力すると、図4.5.2.1-10-3で示すページにハイパーリンクする。
図4.5.2.1-10-1 リンクポインタの選択画面
図4.5.2.1-10-2 ハイパーリンクした画面
図4.5.2.1-10-3 バックスペースキーで戻った画面
3)前ページに戻る
図4.5.2.1-10-3の画面で〔バックスペースキー〕を入力すると、図4.5.2.1-10-2の状態に戻る。この画面には、「リンクポイント」が表示されていない。すなわち、「リンクポイント」がリセットされた状態になっている。
このためIE4では、前のページに戻ったときに最初から再度〔タブキー〕による「リンクポイント」の選択を実施しなければならない。
(2)IE5βにおけるキーボードナビゲーションの動作
1)リンクポイントの選択
図4.5.2.1-11-1は、図4.5.2.1-10-1と同じ画面である。
〔タブキー〕により選択された「リンクポイント」が2行目にある。
2)ハイパーリンクの実行
図4.5.2.1-11-1の状態で、〔エンターキー〕を入力すると、図4.5.2.1-11-2で示すページにリンクする。
3)前ページに戻る
図4.5.2.1-11-2の状態で〔バックスペースキー〕を入力すると、図4.5.2.1-11-3の画面に戻る。図4.5.2.1-11-3の画面は、図4.5.2.1-11-1と同じ画面である。
すなわち、キーボードナビゲーションにより選択した「ハイパーポイント」の位置が、前の画面の戻ったときに前と同じ位置に保存されている。このため、「リンクポイント」を連続的に選択することが可能となる。
図4.5.2.1-11-1 リンクポインタの選択画面
このようなIE5βの動作はIE4のそれに比べ、4.5.2.3(2)2)で述べるようにWing-SKに接続した「操作スイッチ」を使用して、キーボードナビゲーションによりWWWブラウザを利用するときに効率的に利用することができる。
図4.5.2.1-11-2 ハイパーリンクした画面
図4.5.2.1-11-3 バックスペースキーで戻った画面