長年に渡って眼精疲労や肩こりに悩んでいる人は居ませんか?
その辛さの原因はまぶたの病気にあるかも知れません。
私がまぶたの病気、眼瞼下垂(がんけんかすい)と眼瞼痙攣(がんけんけいれん)と診断されてから、3度の手術を受けるに至った体験について書いていきたいと思います。
尚、私は医療関係者ではありませんので、ここに書いた事は私が患者として経験した主観に偏った内容であり、客観的・医学的に正確な情報ではありません。あくまで参考として、実際の病気に関わる全ての事は診察を受ける医師の指示に従って下さい。
ずっと昔の話ですが、私は2006年頃から夕方になると現れる重い目の疲れに悩まされていました。何件も眼科を廻り検査を受けましたが、「ただの疲れ目」「眼精疲労」という診断ばかりで、原因は分かりませんでした。
最初の何年かは「ただの疲れ目」で済んでいた症状が、次第に「疲れ」から「痛み」になり、ついに2009年には仕事をするのも難しいまでに悪化していました。目の奥の疲れが翌日の朝にも残り、連休中であっても目の疲れが取れない程になっていました。以下にその時の症状を書きます。
目を酷使して仕事をしていると、夕方に近づくにつれ目の上奥が痛くなる。筋肉のコリにも似た「ズーンズーン」「ガーンガーン」とした痛みを感じ、仕事から帰る頃には吐き気も感じる程に悪化する。ホットタオルを目に乗せ休ませると一時的に回復する痛み。
後頭部からうなじにかけて、特に耳の後ろの強いこり。目の奥から耳の後ろに向かって貫通するように首がこる。耳の後ろを指圧すると、眼球の裏まで繋がっているように「ジーンジーン」と気持ちが良く感じるこり。
首ほどでは無いが肩こりも始まり、今まで着れていた服が着れなくなった。新たに買う服は肩がラグランの服ばかり。目が疲れてくると、背骨の真ん中の体の芯が重くなり呼吸が浅くなる。常に首や肩をぐるぐると回していて、その癖をよく人に指摘されていた。
辛い症状を少しでも和らげるために色々な事を試していました。
「サンコバ点眼液」と言う、眼精疲労の治療用ビタミンB12目薬を処方され使用していました。眼科の先生の「目薬は気休め程度」という説明通り、あまり効果を実感できませんでした。
電子レンジで温めたタオルで両目を覆うと、とても気持良く疲れが取れました。眼科の先生も、「目を温め血行を良くする事や適度な休憩が重要」と推奨していました。花王めぐりズム 蒸気でホットアイマスクは使い捨てのアイマスクで、自動で発熱するので手軽に使うことができました。
視線を下げモニタを見ると、疲れの蓄積が全く違う事に気づいたので、下の動画のようにモニタ位置を下げる事に試行錯誤していました。具体的には、モニタのスタンドを外し、モニタパネルを机に直置きにしたり、イスの高さを精一杯に上げ、ひざの上にキーボードを乗せるなど、少しでも視線を下げるように仕事をしていました。
自宅では、後ろにのけぞった姿勢で作業できるイスとモニタアームを購入し使っていました。高い買い物でしたが、少しでも眼精疲労が軽減できるならと藁にも縋る思いでした。
その頃、ちょうど裸眼からメガネをかけ始めるようになっていたので、メガネの矯正に問題があるのかと疑い、色々な眼科でメガネの処方箋を作りました。近視や乱視の度数を弱めに作ったり、疲労軽減効果を謳うHOYAのオフィスカラーでレンズを作ったりと、色々試しましたがほとんど違いはありませんでした。
他にも、眼精疲労に関する様々な書籍を買い、ブルーベリーの食品に凝ったりと、できる事は全て試しましたが効果は薄く、1日8時間を働く事すらも精一杯な状況となっていきました。「もう仕事は続かないかも知れない…休日にまで目が辛く疲れが抜けないのはどうしてだろうか…」そう悩んでいた時にふと目にした方法を試してみたら、自分でも驚くほど劇的に症状が改善しました。
それは、まぶたにテープを貼って上に引っ張る事。
最初知った時は半信半疑でしたが、いざ試してみると、あれだけ悩んでいた眼精疲労・首こり・肩こりの辛さが、貼ってすぐに劇的に軽減!驚いて調べてみると「眼瞼下垂症」という病気らしいと分かりました。
テープの張り方は、NHKためしてガッテン 眼瞼下垂の回のページで詳しく紹介されていたので引用します。
テープを4~5センチの長さに切ります。
目をつぶった状態でテープの片側を眉毛の下のまぶたに止めます。 (この時、まぶた全体を持ち上げようとすると、テープを貼った後に目が閉じなくなってしまいます。眉毛のすぐ下の皮膚を止めて下さい)
テープを引っ張り上げながら目を開き、テープのもう片方の端を額の皮膚に貼ります。 (強く引っ張りあげる必要はありません。皮膚を軽く持ち上げる程度で十分です)
さっそく眼瞼下垂症について調べてみました。
眼瞼下垂症を一言で現すと「まぶたが垂れてきて目が開かない状態」の事で、まぶたを持ち上げる筋肉(眼瞼挙筋やミュラー筋)とそれに繋がる挙筋腱膜が、加齢やコンタクトレンズの長期使用など様々な原因によって繋がりが緩み、目を上げる役割を果たせなくなった状態、と説明されていました。
私自身、人よりまぶたが下がっているとは思っていましたが、そこまで大きく気になった事はなく、ましてや病気の説明にある「まぶたが垂れてきて目を開けたくても開けられない状態」には当てはまらないのではないかと感じました。しかし調べていくと、頑張ればまだ目が開く状態(代謝期と呼ぶ)であっても、眼精疲労や肩こりなどの様々な症状が発生する場合がある事が分かりました。
その状態では目を開けるために強く力を入れる必要があるので、
などの頭を取り囲む他の筋肉にも連動して負担がかかり、眼精疲労・肩こり・頭痛などを引き起こす場合があると解説されています。
また最近の研究で、目を上げる筋肉の一つ、「ミュラー筋」にはセンサーの役割がある事が分かってきたようです。ミュラー筋に負担がかかると、交感神経への刺激によって自律神経症状が現れるという事が解説されています。また、ミュラー筋を介した刺激については医師によって見解が違い、エビデンス構築段階のようです。
根本改善には残念ながら外科手術しかなく、まぶたの二重になる部分を切り、挙筋腱膜をまぶたの先端の瞼板に縫い付け、緩みを取る方法などが解説されています。まぶたへのテーピングと同じ事を外科手術で行うようです。
私自身、今までディスプレイの高さ調整や後傾チェアを使って、視線を下げて仕事をする事に異常なほど拘りを持っていました。また、いつもお酒を飲んだ後に眠くもないのにまぶたが下がり、人から指摘される度に「体質なんだろうか?」と不思議に感じていました。
テープを貼ってから直ぐに、首から肩にかけての力が抜けた事を実感でき、1ヶ月ほど続けると、ガチガチだった耳の後ろのうなじの筋肉がとても柔らかくなりました。逆にテーピングをしていない状態では、耳を後ろに引っ張るように頭皮に力を入れてしまっている事が分かりました。
仕事も続けられないほど悩んでいた眼精疲労が、テープ1枚で劇的に良くなり、1ヶ月前まであれだけ悩んでいたのが嘘のようでした。少々大げさですが、私にとっては人生が変わったような劇的な効果でした。
当初はまぶたを上げるのにセロハンテープを使っていましたが、剥がす時に肌が荒れてしまい治るまで苦労しました。一日に何度も貼る状況であれば、早めにサージカルテープと言う種類のテープを買う事をお勧めします。
色々なテープを試しましたが、ニトムズ – 優肌絆 プラスチック 細 肌にやさしいテープ 幅12mmが肌に優しく目立ちづらかったです。ドラッグストアで取り寄せ300円ほどで購入できます。
病気の詳細は下記参考サイトや、書籍が参考になりました。
信州大学形成外科 松尾 清教授の書籍が、一般患者向けに体系的に眼瞼下垂症の事が書かれていてとても参考になりました。まぶたへのテーピングを知ることが出来たのもこの書籍のお陰です。
テーピングには非常に満足できましたが、まずは病気なのかどうかを確認するため病院へ行くことにしました。眼瞼下垂をメインに扱っている病院は余り多くなく、「眼瞼を扱う極一部の眼科」と「一部の形成外科」という事が分かったので、早速札幌市内の眼科と形成外科へ向かいました。
最初に行ったのは眼瞼を主に扱う眼科です。症状を伝えた後に先生がぱっと顔を見るなり、「眼瞼下垂ですね。」と一言。余りにもあっけなく診断が付いたので、この何年かの眼科廻りは一体なんだったのか、と力が抜ける思いでした。
今まで何度も病院を受診してきた事を話すと、「あなたのように何年も苦労してから辿り着く人が多い」との事で、眼科医の間でも眼瞼下垂から起こる様々な付帯症状はあまり認知されていない、という話を伺いました。
手術と料金(3割負担で約5万円、70歳以上は1割負担で約2万円)の説明を受け、手術以外に改善は難しいとの話を受けました。その時はテーピングに満足していた事もあり、一度考えさせて欲しい旨を伝え病院を後にしました。
手術となるとそう簡単に決められる事ではないので他の病院も受診する事にし、後に手術を受けることになる蘇春堂形成外科へ。待合室の前には眼瞼下垂についてのプリント(北海道新聞の記事やシンガーソングライター三浦 久さんの体験記など。)が置いてあり、眼瞼下垂をメインに扱っている事が良く伝わって来る病院でした。病院内は還暦くらいの女性患者さんが多い印象。
野平先生の診察では、パチパチと早い瞬き・ぐっと目をつぶる強い瞬きなど細かく確認して頂き、「眼瞼下垂もあるが、眼瞼痙攣(がんけんけいれん)の疑いもある」との事で、札幌市内の神経内科を紹介して頂く事となりました。
自覚症状ではまぶたがピクピクと痙攣する事は無かったので、診察で「痙攣」と言われた時は少し不思議な印象を持ちましたが、さらに話を伺うと痙攣には目がピクピクする間代性の痙攣とは別に、目にグッと力を入れてしまう強直性の痙攣があるという事を伺いました。
「目に力を入れてしまう」という感覚はまったく無かったので「痙攣」という言葉にさらに不思議な印象を持ちましたが、手術以外の方法で改善する可能性がある事を聞き安心できました。
早速家に帰り眼瞼痙攣について調べてみました。製薬会社のWebページには以下のように説明されています。
眼瞼けいれんとは、目の周りの筋肉がけいれんして、目があけにくくなり、まばたきがうまくできなくなる病気です。 脳内の運動を抑制するシステムが機能障害を起こすことによって生じると考えられています。 しかし、発症の原因が完全には解明されていないため、症状を抑える治療が中心となっています。
Btx-a.jp kao こんな症状ありますか? 顔や目のまわりがけいれんする病気:眼瞼けいれん
目を閉じる時に使う、目の回りを丸く取り囲んでいる眼輪筋が痙攣する事で、まぶたの不快感など眼瞼下垂と似た症状や、まぶしく感じる・まばたきが多くなるなどの症状が出る病気のようです。下記は詳しく紹介されている参考サイトです。
そして紹介状を持ち脳神経外科で有名な病院の神経内科ボツリヌス治療外来へ。そこでも蘇春堂と同じく瞬きのチェックがあり、特に症状が強い訳ではないが眼瞼痙攣の可能性もあるという事で、治療法について説明がありました。
その治療法とは、目の周りに極少量のボツリヌス菌毒素を注射し、筋弛緩作用により眼輪筋の緊張を取る方法との事でした。病気を治す原因療法ではなく、あくまでも症状を軽減させるだけの対症療法で、平均3ヶ月ごとに再度の注射が必要な事、高額な治療である事(3割負担で100単位約3万円、70歳以上は1割負担で約1万円)、価格に対しての効果に満足出来ない方もいるが、そこは納得して欲しいという旨の説明がありました。
自覚症状では眼瞼痙攣で説明された症状は特にありませんでしたが、3ヶ月で効果がほぼ消失する事と、ひょっとしたら手術やテーピングが不要になるかもしれない、と期待を持って打つ事にしました。
後日、ボトックス100単位を目の周り10箇所以上に注射して頂きました。「細い注射針なので痛くありません」との説明通り、腕に指す注射のように痛くはありませんでした。ただ、一箇所づつは痛くなくても、何箇所も打たれた後は顔全体がジワーっと熱くなるような痛痒さがありました。治療代は10割約97000円の3割負担分で29000円程度。これが3ヶ月おきにと考えると高額ですが、それでもテープや手術が要らなくなるのなら、と前向きに考える事にしました。
打った当日は何も変わりませんでしたが、一週間経った頃から効果が出てきたようで、入浴時に普段通り目をつぶって顔にシャワーをかけると、水が目に染みてしまったので、目を閉じる力が弱まっている事が分かりました。大体1ヶ月半位から徐々に効果が弱くなり、3ヶ月で効果が分からなくなるような感覚でした。(本当にその期間だったかもはっきり分からないというのが正直な感想ですです。)
目を閉じる力が弱まっている事は実感出来ましたが、それ以外の効果は実感できず、テープを貼らなければ眼精疲労と首こりなどの辛い症状は変わらないままで、テーピングを止める事は出来ませんでした。
再度3ヶ月後に2度目のボトックス100単位を打って頂きましたが、やはり1度目と同じで、筋弛緩の効果ははっきり自覚出来てもそれ以外には何も変わらないという感覚でした。
ボトックスの効果に満足できない事を伝えると、次にリボトリールという飲み薬を1日0.5mg処方されました。これを飲むと、まるで風呂上りのように体の力が抜け、テープを貼っていない時でも眼精疲労や首こりが軽減される感覚があったので継続する事にしました。
初めて飲んだ時は、まるで「インスタント風呂あがり薬」というくらいストレートに肩こりに効いて驚くほどでした。ただデメリットもあり、飲むと直ぐに眠気が出る事や、寝る時に夢を全く見ないほど深く眠てしまい、朝に起きづらい事などがありましたが、段々と慣れて問題にならなくなりました。
この薬は、眼瞼痙攣の治療以外にも抗てんかん薬や抗不安薬としても使われているようで、緊張してもお腹が痛くならない・人前でもあがらなくなるなど、目の辛さとは関係ない方面にも効いてしまい、シュンとする緊張感が無くなってちょっと嫌かなという印象はありました。こういう薬は初めての経験だったので、ただの飲み薬が精神に作用する事には驚きました。
まさかこの時は、後々この薬の離脱症状で苦しむ事になるとは考えもしていませんでした。
テーピングを知ってからは、テープを貼っている間は仕事が問題無く出来るようになり、眼精疲労も首こりも問題にならなくなりました。しかし、毎日行うテーピングの煩わしさには疲れてしまい、何とかならないものかと半年ぶりに蘇春堂に相談へ。
診察で状況を説明した所、皮膚の余剰が多く眼瞼下垂の症状が出ている事、手術をする事でまぶたを上げるテーピングが不要になる可能性が高い事の説明を受けました。私の症状の重さについて伺った所、下垂はどちらかと言うと皮膚の部分がかなり多い状態、眼瞼痙攣気味の人は、閉じる力に負けて症状が出てくる事があり、そのバランスが難しいという話を伺いました。
今まで生きてきて手術の経験は一度もなく、それもあり手術を受けるかどうかの判断は迷いました。しかし、家のチャイムが鳴る度にテープを剥がすという生活は煩わしく、外で貼れる訳でもないテーピングは私にとって満足できるものでは無かったので手術を受ける事に決めました。
他にも複数の病院に行きましたが、蘇春堂意外の病院では眼瞼下垂という診断だけで眼瞼痙攣に関しては否定されたり特に問題とされなかった事、野平先生はその点の指摘があった事や、質問に対して自信を持ってお答え頂ける事、術後も1ヶ月・3ヶ月・半年と定期診察で見て行くという事で安心感があり、何よりも眼瞼下垂をライフワークとしている事が強く伝わって来た事が理由で、考えた末に手術を決意しました。
手術に向け、親や友人に手術の事を話し情報収集を始めました。意外にも私の祖母が眼瞼下垂の事を知っていて驚きました。高齢者の間では特別マイナーな病気では無いようです。男友達でこの病気を知っている人は殆どいませんでしたが、何年も原因が分からず苦労してきたので皆喜んでくれました。一体ここに至るまで何年を費やしてきたのか…。
女友達にも相談した所、だいたいの人が眼瞼下垂の事を知っていました!しかも全員が興味津々で、反応の違いには驚きました。眼瞼下垂の手術で行う事が、美容整形で目を大きくする事と同じ内容の手術でもあるらしく、男女間でその知名度には大きな差がある事を実感しました。
2010年春、会社を早退し夕方に蘇春堂へ。手術前に見た目の希望を聞かれ、今のままとにかく変えたくないという事を伝えました。鏡を渡された後に針金のような器具で二重を作られ、「もうすこし細く、もうすこし細く」と何度かのやり取りがあり、今のままの限りなく一重に近い奥二重にして欲しかったのですが、「これ以上細くすると年を取ってからまた皮が被ってくる、最低限は開けないとまた症状が出てくるのでこれ位がいい所でしょう」と説明を受け、不安でしたが納得し手術室へ。結果は控えめな見た目にして頂き、全く問題はありませんでした。しつこいやり取りに付き合って頂きありがとうございました。
ついに人生初の手術が始まり、ちょうどシンガポール?の大学教授が野平先生の手術を見学されている所で、時折英語で会話が飛び交う中でまぶたに麻酔がされていきました。目を瞑っているので周りは見えないのですが、電気メスか何かの「ジジッ」と焼ける音や器具の感触で、何をされているかが嫌でも想像できてしまいます。何度か起き上がり先生がまぶたのバランスを確認されながら手術が進んで行きました。
手術の途中、眼瞼挙筋を引き上げた直後から、上を向こうとすると目の上奥が引っ張られるようにズキンと痛くなり、一瞬しか目を上げられなくなってしまいました。水平を見てもすぐに疲れてしまう状態で、視線を下げて物を見る事しか出来なくなってしまいました。
手術自体が初めての経験だったので、「麻酔がかかっているしこれが普通なのかな?」とも思いましたが、先生の反応を見るにそうではないらしく、とても珍しい、難しい問題が発生してるという風でした。
緊張からかあっという間に手術は終了。はっきり覚えていませんが、1時間位だったでしょうか。最初の麻酔がよく効き、痛みは全く無し。歯科で虫歯の神経を抜く治療よりも楽なくらいで、豆腐メンタルな私でも最後までリラックスして終える事ができました。手術後の会計は、両目の眼瞼下垂手術で3割負担、約45000円でした。
手術後も、上を見るのが辛い状況は変わりませんでした。上を見たり睨むように目に力を入れると、目の上奥の筋がまるでゴムの反発のように、上げれば上げるほどギュンギュンと痛くなります。重いというより、かなりクリアではっきりとした痛みです。先生の反応も非常に珍しい、難しい問題らしく、まずは様子を見る事となりました。
尚、手術の後に先生に聞きましたが、眼瞼下垂の手術内容は挙筋前転との事で、事前に頂いた眼瞼下垂手術の冊子にもそのような事が書いてありました。
帰りはサングラスをかけ家族に迎えに来て貰い、余裕があったので会社に顔を見せに行きました。社内には事前に説明していましたが、会った人全員の顔が引きつっていたような…。鏡で自分の顔を見ると、タラコの様に赤く腫れていたので納得。麻酔が切れ痛みも出てきてしまい、寄らずにさっさと帰れば良かったと後悔。何日か自宅勤務で迷惑をお掛けします…。
家に帰ると視力が少し違う事に気づきました。いつもより乱視が強く感じ、近視が進んだから乱視が進んだようにも見えるような、文字やLEDランプが縦に2重に見えてしまうのに気づきました。これは手術前のテーピングをしていた時にも弱く感じていた事でした。
私の仕事は、画面の1ピクセルの違いが分からなければコーディング中にものすっごいストレスを感じるのですぐ分かりましたが、PCを使わない仕事であれば気にならない程度の変化で、メガネを作り直せばいいだけの事、特に何の問題もないと感じる程度でした。原因は、まぶたが上がるから目の絞りが開いて被写界深度が浅くなるからとか、筋や結び目の圧力の問題とか、色々いわれる中で未だはっきりしないようです。
後に眼瞼下垂の手術を受けた患者さんと何人か話す事になりますが、視力の変化は大なり小なり感じている人が多いんだなという印象を受けました。
1週間ほどで腫れはスーッと引き、見た目は特に気にならなくなりました。しかし手術後から発生した症状は1ヶ月経っても変化が無く、術後眼瞼痙攣との診断を頂きました。その後、神経内科で追加のボトックスを打ちましたがいつも通り大きな変化は無く、神経眼科を紹介して頂き眼瞼部のMRIを撮りましたが何も問題は見つかりませんでした。
ただ目の上奥がこんなに痛いにも関わらず、手術後は首こり肩こりがテープを貼らなくても治っている感覚がありました。しかしテープを貼って強く引っ張れば痛い角度が少し上に修正されるので、手術前と目的は違いますが手術後もテーピングは継続していました。
毎日何とか会社に出勤してはいましたが、手術前の半分程の時間しか働けなくなってしまい、ひょっとして症状はこのまま変わらないんだろうか、と思うと段々と焦りが出てきました。駅までの自転車通勤が地獄で、体は前傾であごは目一杯上げる、というかなり情けない姿で通勤していました。
そんな状況で救いだったのは野平先生の責任感で、私のような術後に問題が発生する患者というのは極少数なのだと思いますが、最後まで見捨てず責任を持つという姿勢は、今後見習って生きようと思わせるものがありました。感謝します。
[手術に当たって決心したこと]術前/術後の写真をブログにアップすること。自分の写真を乗せるのは物凄い抵抗があるけど、眼精疲労でどうしようもない人・仕事を諦めようとしている人の助けになれるのなら、小さなことは気にするなと思えた。
— RINさん (@rin316) 5月 17, 2010
自分の顔を人目にさらすというのはあまり気の進む事ではありませんが、既に公言している通り術後の写真を公開します。公開の理由は、私のように眼精疲労や肩こりで苦しんでいる人が、少しでも病気に気づくきっかけになればと考えたからです。
もう一つの理由は、病気の情報が余りにも少なく不満を感じた事です。私は今まで「手に入らない情報など無い」と考えていた所がありました。TwitterやFaceBookなどのSNSをアンテナにし、Amazonレビューや各種掲示板のソーシャルなレコメンドの空気を感じ、ネットや書籍に知識を求め、その知識を持った人に直接会い相談し、勉強会で同じ志の仲間と交流しアンテナを広げるという、今では多くの人が当たり前に行なっている評価社会の恩恵を受け生きてきました。
そんな中であっても、病気に関しては実際に手術を受けた方の声を聞くというのはとても難しく、医師や患者から発信される、当事者性を持った情報というのは本当に少なく感じました。
見た目の問題を含む事もあり写真を公開している人はほとんどおらず、「外見はどう変わってしまうんだろうか?」「テーピングと同じように眼精疲労は良くなるだろうか?」という不安を強く感じていました。次に受ける人が持つだろう不安を少しでも取り除ければと思い写真も載せる事にしました。
写真の公開に関して友人達から「誤解や不利益を被る可能性もあるので慎重に考えた方が良い」と親身な意見を貰いました。そもそもこの病気を最初に知ったきっかけはWebページでした。私は、Webから得た情報はWebに還元されるべきという強い思いがあります。多少なりとも公共の福利にもなるのだから、これは避けられない事と考えました。心配ありがとう。
なお、病院名と術後の写真の掲載に関しては、手術前に先生より「患者さんの責任の元で自由に判断する事なので、あなたが構わないなら」と快く了承を頂きました。感謝いたします。
転載の場合は、当記事へのリンクを貼って頂き、下記写真の転載はご遠慮頂ければと思います。
その後も手術後に発生した症状は変わらず、紆余曲折があり何ヶ月も後、信州大学病院形成外科 松尾教授の診察を受ける事になりました。
私が最初に眼瞼下垂を知ったきっかけはWebでしたが、テーピングについては松尾先生の著書がきっかけでした。この分野のオーソリティという事もあり診察前は緊張しましたが、実際はとても話しやすく研究熱心な先生という印象を受けました。
診察室の中では、サーモグラフィを使った顔や手の温度測定、鼓膜の筋肉測定、まぶたに重りを載せるテスト、まばたきのスローモーション撮影など、様々なテストが行われました。
様々な情報を教えて頂いた中で、痙攣で下まぶたの筋肉を奥に引くと、持病の喘息を誘発する事や、眼瞼下垂手術前の写真で、下まぶたに縦ジワがあり土手が膨らんで見える事を指摘され、これは盛り上がっているのではなくて、痙攣で下まぶたを引いてしまっている状態で、私達はこういうのを見ると痙攣と考えるという話しを伺い、下まぶたの切開も必要になる可能性を説明されました。
最終的に、私の瞼には痙攣とうまく折り畳まれない瞼の問題がある事、それに対し、目を開く事に抵抗する組織を軽減する事で、眼瞼下垂手術後に発生した症状が改善する可能性が高い事の説明を受け、眼瞼痙攣に対して上まぶたと下まぶたを切り眼輪筋を切除する手術を受ける事になりました。
手術のデメリットについては、とても良く腫れ出血やしびれもある事や、最低限必要な手術だけをやるので再手術の可能性がある事を伺いました。見た目が変わってしまうのがとても心配でしたが、1度目の切開線をそのまま使うという事と、高齢者と比べ若い人は重症ではなく、大きく組織を取る事はしないので、そこまで恐れる手術ではないという事を聞き安心しました。
松尾先生の説明は非常に納得出来るもので、なぜここまで腑に落ちるのかを考えましたが、見えている世界があり、その世界への興味が非常に強く、その興味が結果的に患者への粘り強い聴取と説明となって現れているからなのだろうと感じました。
診察では大変便利なテーピング方法がある事を教えて頂きました。それはフィルムドレッシング材を切っておでこに貼る方法で、私は勝手におでこテープと名付けていました。写真を見て頂くと分かる通り、透明で非常に目立ちにくいテープです。おでこに貼った後に前髪を下ろすと、テープを付けている事が分かりづらく、またバレてもあまり恥ずかしく感じない利点があります。ただのテーピングはどうしてもモノマネのコロッケさん風になってしまうのでこれは利点です。ただし夏場は汗でろんでろんで剥がれます。早速ネット上で取り寄せ使い始めました。
商品名は「日東メディカル 優肌パーミロール14R10(10cm幅)」で、私が普段まぶたを上げるのに使っていた優肌絆テープと同じメーカーでした。
優肌パーミロール14R10 10cm幅
さらに何ヶ月も待ち、2010年秋に手術の前日を迎えました。まず入院窓口に行って手続きを済まし病棟に移動。看護師の方から病棟案内とオリエンテーションを受け、体重と身体測定。夕食後に松尾先生が病室に来られ相談室に移動。明日の手術の説明を受けました。基本的には以前の説明通りの手術との事。診察室とは違うリラックスした雰囲気に少し緊張が解け安心させて頂きました。病院名や写真の公開に関しては「あなたが良いならもちろん良いですよ」との温かい言葉を頂き、手術中の写真まで頂ける事になりました。
手術当日の朝、1Fで喘息の肺活量検査。ピークフロー値と完全に吸ってから吐く検査を受け、その後再度2Fのナースステーションで同じ検査を色々にテープを貼った状態で受けました。喘息は持っていますが普段薬で管理できているのでテープを貼ってもあまり変化はなく、平均値の81%程度でぎりぎり正常範囲内でした。
本日2例目の手術という事で、予定を一時間過ぎた辺りに看護師の方から呼ばれ、「10分後に移動です。お手洗を済ましてください」と説明を受け移動。
手術中、筋肉を取っても目はあまり上がらず、上眼瞼挙筋を下げて頂いた所から、痛みが減少し目を上げられるようになりました。2週間後に退院。
まだ書きかけなので、後日追記します。
眼瞼下垂の手術の時と同じく公開します。
現状、眼輪筋手術前と比べて手術後の方が何倍も辛い状況となりました。1度目の下垂手術後の悪化では何とか4時間程度働けていましたが、2度目の痙攣手術後は退院後から一切働けなくなり外出も出来ていません。
上を向こうとする時の眼の奥の痛みは軽減されました。
1度目の手術前: 左右目の辛さを 左0/右0 とすると、
1度目の下垂手術後: 左10/右8 くらいに悪化し、
2度目の痙攣手術後: 左5/右3 くらいに自覚的に軽減されました。
しかし手術直後から目にかなりの違和感を感じ、常に目の回りが興奮するようになってしまいました。手術後4週目位から左目下眼瞼に氷を入れたような疼痛を感じ始め、左目下眼瞼に常に力が入るようになり、右も左ほどではないですが力が入り、両頬・両顎奥・両口角にも力が入り抜けない状態で非常に辛いです。目を閉じるように上眼瞼・下眼瞼にテープを貼ると多少辛さが軽減されます。
また、睡眠時に左目を上にして横向きになると下眼瞼の辺りを中心に顔面全体が引きつり、目の乾燥や違和感から仰向けには寝れず、左目を下にして寝る事しか出来なくなりました。寝る時は目を閉じるようにテープを貼らないととても眠れない状態です。朝起きると目をギュンギュンに見開いてしまい、興奮して長く横になっていられない状況。
別の症状で、目が強く乾燥し、瞬きをしても上まぶたが下まぶたの縁まで届いた感じがせず、涙や目薬を指しても、下まぶたの真ん中に溜まってしまうようで辛いです。上手く瞬きができない感覚があり、顔中に力を入れて瞬きをしてしまうようになりました。顔中筋肉が疲れます。
手術2ヶ月後、神経内科から眼瞼痙攣の治療で7ヶ月間処方されていたリボトリール1日0.5mgを、目には効いていない感覚を話し断薬となりました。1ヶ月ほどの強い離脱症状の後になんとか断薬出来ましたが、左右の口角が歪む感覚があります。
後日追記します。
約1年半待ち、再手術(上眼瞼挙筋をほぼ外し下垂手術前の状態に近くする)で改善の可能性を説明され、明日手術を受ける予定です。
まだ書きかけではありますが、手術後しばらくPCを触れなくなると思うので、ひとまずテーピングの事を伝えるために公開する事にしました。
病気に関わらずどんな事でも、自分の困っている問題をどう発見し、どう理解し、どう伝えるかはとても重要だと思います。今振り返ると、私は病気と分かるまで、ただ「目の奥が痛い」とだけ訴え何年も眼科を巡っていました。もう少し問題を理解した上で眼科の先生に伝える努力をしていれば、こんな何年もかからずに眼瞼下垂・眼瞼痙攣と言うキーワードに出会えていたのではないかと感じています。
私が本気で動き初めたのは、眼精疲労で仕事ができなくなる直前でした。人間、本当にぎりぎりにならなければ動けないものです。眼瞼下垂・眼瞼痙攣に限らず、辛い症状で悩んでいて病気の見つからない人が、少しでも早く自分の問題に向き合うきっかけになれば、と思い書きました。
このブログの内容は、これから手術を受ける人を悪戯に不安にさせるだけかも知れないと思い、今の経過での公開は迷いました。しかし、もしも経過が良かったならば受ける印象は全く違っていたと思います。
最初に眼瞼下垂の手術を受ける際、色々な病院を廻りまぶたへのテーピング可否について話を聞きましたが、「まぶたは皮が薄くデリケートな構造なので、テープで引っ張る事はあまり肯定出来ない」と、良い印象を持っていない先生が多いのだなと感じました。
テーピング自体、最初こそ感動的でしたが、人前や外出中に貼れるわけではないので、本音を書けばテーピングは多くの人に現実的では無いのかも知れないとも感じています。最終的に手術を避けられる人はいるのかと思うと余計に公開を迷わせました。
しかし、私のような経過を辿る患者というのは全体の極一握りであって、手術を受ける多くの人は、平均的な症状・平均的な確率の元に粛々と手術がなされ良くなっています。
実際、私の経過について複数の先生から受けた説明は、「ほとんどの患者さんは手術によって良くなっている。悪くなるのは極々一部の例外」という内容でした。
また、「病気に強い思い入れのある患者さんは、見た目より実際の症状が強いため悪い経過が目に付き、逆に医療側の出す情報はチャンピオンケース(一番良い症例)が多いので通常より良い経過となりがち。インターネット上の情報は両極端」と話す先生もいました。
迷った時に大事なのは診察を受け質問する事で、もしそこで手術しか無いと説明されたのなら、危険性や確率を伺い、自分の判断を信じ、先生を信じ、最終的にはその先生が信じる方法で直して貰う、それが全てだと思います。どんな病気も、最後は手術を受けるメリットに対する損失の可能性で割り切るしかないのだと思います。
手術に限らず、どんな事でも「絶対に安全」は存在しません。ただ蘇春堂・信州大学の両先生から治療を受け思ったのは、「絶対に安心」は存在するかも知れないという事でした。両病院の先生とも、診察を通して眼瞼下垂をライフワークにしている事がとても良く伝わってきました。また同じ病気の患者さんが、1日に2人や3人も手術で良くなっている状況は、「絶対に安心」を感じさせてくれるものがありました。診察を通し説明を聞き、信頼を通して、絶対に安全は無くとも絶対に安心は、先生が作っていけるものなのだなと強く感じました。
「他人に対して大げさな」、「人の本心は分からない」と思いますか?私はそんな事はないと思ってます。素朴に信じるという事は、周りにとっても、自分にとっても良きことをもたらすと思っています。
経過に感謝する患者さんや私のような患者、極端な振れ幅の中で毎日病気と戦っている医師や看護師の姿を見て、心から尊敬しました。
病気について書いたのは、医師への不満や中傷を書こうとしたつもりは全くなく、患者が一番知りたい、同じ病気の、同じ傾向の患者がどんな経験をして、どう対処したかを伝えようとしただけなのでご理解頂ければと思います。もし手術を受けられる方がこの文章を読んだのならば、経過が良くなる事を心から願っています。
私は今まで、自分自身の向上心や情熱、ポジティブな考え方というのは、何があっても変わらないものと考えていました。それが2度の手術の悪化で先が見えなくなると大きく揺らぎ、今はネガティブな感情に心が支配される事もあります。それは、自分の性格まで奪われてしまったようで悲しい事です。
ただ、人は経験によって考え方は変わってしまうものだし、振り動かされる情熱は一瞬で長く保ってはいられない。過去の気持ちに戻る事はできない。今見える世界は、そう思えなくても全てが自身の選択によってもたらした世界なのだから、残念だけどそれはしょうがない事で、後は変わってしまった世界をどう捉え受け入れていくか、満足していくかしかないのだと思う。
手術前に戻る事はできないのだから、心からの満足というのは難しいかも知れない。本音を言えば、ポジティブな魔法がかかったままの世界で生きていきたかった。こんな状態で生かされている事の意味は何だろうかと、神に取引も試みたが、そもそも自分自身の苦痛や内なる感情というのは他者にとっては意味の無い事で、何かを伝えたい情熱と、生きてきた自分が相手に伝えられた事、行動した事の総量だけが、それが他者から見た自分の全てだ。
なぜ今まで自分が「作る」事にこだわって来たのか、病気になって少し理解できた。私に取って「伝える」という事は「作る」事で、制作を通した他者との関係性の中で、コミュニケーションの中で感動や影響が生まれて、そこから自信を貰う事が、それが向上心と行動の好循環を生む軸になっていたのだ。
何かを作る作業をしている時・それを通して人とコミュニケーションをしている時というのが、自分が生きていると実感する瞬間であり、その辺りが自分を構成する成分なんだと思う。もし人間の性格が変わるとしたら、それは肉体的な苦痛や病気というものは実は関係なくて、人と人とのコミュニケーションを通してしか変わらない。今まで自分がいかに恵まれた環境で生きてきたのかが分かった。本当に多くの人に感謝している。ありがとう。
これからもその環境の中の、気持ちの循環の中で生きていきたい。そのためにはどうしても今より快適に作業できる体が必要で、そこは譲れないし満足できない。ただこの先の経過というのは神の差配なのだから、誰にも分からないものなのだから、どういう結果であっても受け入れ、先生に感謝し、出会った人に感謝し、少しでも満足して作業をしていきたいと思う。
私が伝えたかった事は、「その眼精疲労・肩こりは、テープ一枚で治るよ!仕事は続けられるよ!辞めなくてもいいんだよ!」という事、それだけです。
写真は2009年5月に撮った札幌新川通りの桜。2010年・2011年と病気で撮れなかったので、今年こそは叶えられればと思います。それでは手術に行ってきます。
よく使う日本語や同じようなコードを、毎回同じように打つのは面倒くさいな…
思考した事がそのままの感覚でアウトプットできれば生産性はもっと高まるはず。
コードを書いている時、いつもそう感じていました。
Texterというソフトに出会ってから、そんな日常が少し変わりました。
キーを打った事を忘れて、
頭の中で浮かんだ事がそのまま目の前に現れるような感覚、
まるで、「速記」を自動展開しているような心地良さを味わえました。
今回はSACSSコーディング勉強会 vol.5のライトニングトークでお話した「Texter」を紹介します。
このTexterを使うようになってから、打つ事が革命的に早く・楽しくなりました。
効率化を追求している人にはお勧めのツールです。
Texterを一言で説明すると「英語圏の辞書登録ソフト」です。
設定したトリガー、例えば[yrq]を入力した瞬間に、
yrq → 宜しくお願いいたします。
maq → margin: |カーソルキー|0px 0px 0px 0px;
上記の様に、トリガーを登録した単語に瞬時に置換してくれます。
さらに置換後のカーソルの位置が指定できます。
実際に下の動画を見て貰うと分かりやすいと思います。
Lifehacker Code: Texter (Windows) – Clips – Lifehacker
これだけを見ると、IMEの単語登録と変わらないと思う人もいると思います。
純正の単語登録とTexterとの違いをまとめてみました。
Texterの作者は、ライフハック界隈では有名なLife Hacker。
MACで使われていた単語登録ソフト、「Text Expander」に影響を受けて、
そのWindows版を目指して作られたとの事です。
さすがLife Hacker、いつも人生をハックしてくれます。
前置きが長くなりましたが、早速Texterのダウンロードと使い方を紹介します。
GNUライセンスなので少しだけ改造して公開。
[ソースいじる方は参考までに]
Life Hackerの公開ソースには、右クリックでhotstringを変更する際にバグがあったため、
Exe2Ahkで逆コンパイルし、
includes/GUI/management_GUI.ahkの31~39行目に関数[EDITNAME]を追加。
ソース
オリジナル版(Life Hacker – Texter)
早速、使い方の紹介です。
日本語化Texterをダウンロードした人は、テキストエディタで
yrq
と打ってみましょう!
[diq][ulq][dlq][imq][taq][h11][12q][scjq][$q][ [q ][phq][ifq]とか色々設定しています。
入力した瞬間に文字が置換されて、カーソルが設定箇所に来ているはずです。
私は初めてTexterが動作した時、すごい感動しました!
永年続くであろうキーボード入力の呪縛から開放されたような気分でした。
Texter日本語化版は初期設定は不要です
オリジナル版は、そのままだと日本語が文字化けしてしまうので下記の変更が必要です。
「Compatibility mode (default)」を
「Clipboard mode (Faster,but less compatible)」に変更。
その他の項目は、全てチェックを外してしまってOKです。
単語登録する時はショートカット[Ctrl+Shift+H]を押すか、
Texterアイコンを右クリックして「Create new hotstring」を選択。
「Text」モードと「Script」モードはそれぞれ挙動が違います。
登録文によって使い分ける事で幸せになれます。
「Text」を選んだ場合はクリップボード経由で貼り付けされるので、
<div>%|</div>
<a href=”%clipboard”>%|</a>
[%ds] → 3/9/2007
[%dl] → Friday, March 09, 2007.
[%t] → 1:30 PM.
例文だと、[yrq]は日本語を含むのでTextで登録しています。
下はTextモードのデモンストレーション。
[youtube:http://www.youtube.com/watch?v=yP4scl4nfqY]
Lifehacker Code: Texter (Windows) – Clips – Lifehacker
「Script」モードを選んだ場合はキーボードタイピングがエミュレートされます。
Textモードより高度な設定が可能。
{up}{left}{down}{right}{home}{end}{bs}{tab}
改行を入れる場合は、
「</タグ>{up}{end}{tab}」を活用。(※エディタのオートインデントがONの状態前提)
<div>
</div>{up}{end}{tab}
^ = Control
! = Alt
# = Win
+ = Shift
^c = コピー
^v = 貼り付け
^s!{f4} = 保存してから終了
例文だと、[yrq]以外は全てScriptで登録しています。
下はScriptモードのデモンストレーション。
[youtube:http://www.youtube.com/watch?v=JuyezZCLzt8]
Lifehacker Code: Texter (Windows) – Clips – Lifehacker
登録して、凄く便利に感じた個人的なオススメ登録です。
今回配布のTexterには下のリストの何倍も入れています。
PHPとjQuery書く時の気持ち良さが3割増しになります。
{
|カーソル|
}
“|カーソル|”;
$(“|カーソル|”).();
if (|カーソル|){
}
else {
|カーソル|
}
いつもお世話になっております。
■の■です。
Dreamweaverコードヒントのほぼ全てを代替して使っています。
margin: |カーソル|0px 0px 0px 0px;
padding: |カーソル|0px 0px 0px 0px;
border: 1px solid #|カーソル|;
background: url(img/|カーソル|) no-repeat 0px 0px;
width: |カーソル|px;
height: |カーソル|px;
CSSハックは、できるだけ知識として覚えたくないので、Texterに覚えさせています。
font-size: 77%; ~ font-size: 197%;
/*–IE7 hack–*/
*:first-child+html |ペースト| {
}
/*–IE6 hack–*/
* html |ペースト| {
|カーソル|
}
float: left;
display: inline;
float: right;
display: inline;
min-height: |カーソル|px;
/* IE6 fix */
height: auto !important;
height: px;
min-width: |カーソル|px;
/* IE6 fix */
width: auto !important;
width: px;
/* IE8 fix */
head~/* */body |ペースト| {
|カーソル|
}
<style type=”text/css”>
<!– body { behavior: url (“common/js/csshover3.htc”); } –>
</style>
Texter使用時に起きた問題の対処法をまとめてみました。
Dreamwerverや他のテキストエディタなどで、
「</」や「>」を入れると閉じタグを自動補完するように使っている場合は、
素直に登録すると「<div></div></div>」と二重になってしまいます。
それを避ける方法としては、
>{left}<div{right}
/{left}<{right}div>
例えば[yoroq]を[宜しく]に変換しようとすると、
IME ONの状態だと[よろq]となり3文字ですが、
Texterの認識は[yoroq]で5文字となるため、置換時に2文字多く消されてしまいます。
解決策としては、[yrq]のように母音を含まないトリガーで登録します。
もしくはトリガーの最初の一文字入力時に、Shiftキーを押すようにすれば、
IME ONの状態でも[Yoroq]と5文字になるので問題なく使えます。
先にTexterを起動させてからAutoHotKeyのスクリプトを実行すればOKです。
スタートアップに起動の順番を登録したい人は、テキストエディタで下記スクリプトを入力、
フォルダ階層を合わせた後、拡張子を[.txt]から[.vbs]に変えて起動時に実行させればOKです。
Dim WshShell
Set WshShell = Wscript.CreateObject(“Wscript.Shell”)
WshShell.Run(“■\texter\texter.exe”)
WScript.Sleep 4000
WshShell.Run(“■\autohotkey\autohotkey.ahk”)
Texterのプログラム自体はAutoHotKeyベースで作られていて、
Hot Strings関数を利用、GUIで登録をリスト表示するように出来ています。
ahkファイルも公開されているので、自分でカスタマイズも可能。
Texterを使わず、直接AutoHotKeyでスクリプトを書けば、
キー間のタイミング、キー押下時間、正規表現等で、
想像を超える変態的なHackが可能です。
日本語圏でもAutoHotKeyのユーザーが増えて、
打つ事の世界観が変わるライフハックが増えると嬉しいな~と願っています。
辞書登録と聞くと、時間短縮が一番のメリットのように映りますが、
私が感じる本質的なメリットは、「集中力が途切れない」点にあると思います。
集中力が途切れる瞬間を考えてみると、
上の操作を行った瞬間、キーボードを打っている自分に気がついて、
「ディスプレイの内面世界」から「外の現実世界」に引き戻され、集中力が途切れると感じます。
例えばループさせる時。
自分が打ちたいのはあくまでも、
for ($i = 0; $i <= ■ココ■; $i++){
■ココ■
}
だけなのに、最初に枠組みを書いてから戻る打ち方をすると、
1. for($i = 0; $i <= ■; $i++){
2. Enterを2回
3. }を入力
4. 手をホームポジションからカーソルキーに移動、↑キー
5. Tabを押してインデント。
ここでやっと書きたかった場所まで到達できます。
Texterを使えば、魔法の一言”forq”の直後に整形完了します。
今の制作会社に入った時に、
どうすれば、出来ない仕事の生産性を上げられるんだろうってずっと考えていました。
スキル足りない、コードはぱっと出てこない、スペル・文法ミス多い。
そんな時に、このエントリーに出会いました。
剣道の達人は剣が身体の一部になっています。
まるで、剣の先にまで神経が生えているように、剣で感じ、剣を操ります。
もはや、道具を使っているという意識はなく、剣も含めて身体意識が形成されているのです。
これを見てから、PCを意識せず自分の体の一部として認識、洗練させていく行為が
言語スキルを磨くのと同じ様に生産性を強く高める!と感じて、攻めのハックを考える様になりました。
実際に仕事のスピードが飛躍的に高まったので、
人生を共にする仕事道具への接し方って大事だな~と実感しました。
コードを書く仕組みを変える事は、自分へのメリットはもちろん、
そのノウハウ・スニペットが共有されればweb全体の生産性も上がって快適な世界に!
などと言う崇高な気持ちは置いておいても、
世界観が変わる様なライフハックを実践している人や、
変態キーバインドの実践をしている人になかなか出会えないので、
少しでもそんな「攻めのライフハック」な人が増えれば良いなと思って書きました。
小さな事かも知れないけど、毎日積み重なっていくモノの力は凄いです。
Texterを通した入力から得られる、「ストレスのない速記」の世界は
きっと制作人生を、時間単価の面でも、打つ楽しさの面でも豊かにしてくれるはずです!
今回は誰でも簡単に導入できるTexterの紹介をしました。
これからは、もっと根本的なAutoHotKeyを使ったキーバインドを書いていきたいと思います。
RSS登録をyrq.
Life Hackerに感謝します。
先週土曜日のSaCSSコーディング勉強会 vol.4のライトニングトークでお話した、
AutoHotKeyのスクリプトを作ったので、取り急ぎ公開します。
Dreamweaverで「Ctrl + s」を押して上書き保存された瞬間に、
バックグラウンドのFirefoxに「F5」を送って自動でブラウザをリロードさせるスクリプトです。
htmlやcssを書き換える度にブラウザを更新しなくても良くなるので、
活用すればコーディング速度がアップして集中力も途切れなくなるはずです。
zipを解凍した中に、起動するだけで使えるexeファイルがあるので実行。
セキュリティ不安な人は、
AutoHotkey公式サイトのDownloadページから「AutoHotkey Installer」でインストール。
その後、テキストファイルを作って下のソースを貼り付け、拡張子をtxtからahkに変えて実行。
zipの中にahkファイルも入れておきました。
ウィルスバスター起動していてうまくキーを乗っ取り出来ない場合は、例外指定するか、
exeファイルを使わず、インストール後ahkファイルを起動でOKです。
;FireFoxリロード
SetTitleMatchMode, 2
#IfWinActive, Dreamweaver
^s::
Send, ^s
sleep 700
WinGet, Fx,, Mozilla Firefox
ControlSend,, {F5}, ahk_id %Fx%
return
フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか?
そんな時、押した項目によってその後の内容を変化させれば
項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。
JavaScriptはかなりの初心者なので忘れないようメモしてみました。
・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。
・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。
利用方法 |
|
---|---|
紹介者 | 紹介された方のお名前を入力してください。 |
会員番号 | 会員番号を入力してください。 |
HTML
<form>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>利用方法</th>
<td>
<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />初めて申し込む</label>
<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />2度目以降の利用</label>
</td>
</tr>
<!-- 表示非表示切り替え -->
<tr id="firstBox">
<th>紹介者</th>
<td><input type="text" />
<p>紹介された方のお名前を入力してください。</p></td>
</tr>
<!-- 表示非表示切り替え -->
<tr id="secondBox">
<th>会員番号</th>
<td><input type="text" />
<p>会員番号を入力してください。</p></td>
</tr>
</table>
</form>
<!-- 表示非表示切り替え -->
<div id="firstNotice">
特典:初めての方は30%オフ!
</div>
JavaScript
<script type="text/javascript">
function entryChange1(){
var radio = document.getElementsByName('entryPlan')
if(radio[0].checked) {
//フォーム
document.getElementById('firstBox').style.display = "";
document.getElementById('secondBox').style.display = "none";
//特典
document.getElementById('firstNotice').style.display = "";
}else if(radio[1].checked) {
//フォーム
document.getElementById('firstBox').style.display = "none";
document.getElementById('secondBox').style.display = "";
//特典
document.getElementById('firstNotice').style.display = "none";
}
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;
</script>
inputに「onclick=”関数名() 」を追加する。
<input type="radio" name="entryPlan" value="firstEntry" onclick="entryChange1(); />
最初にfunctionで関数名【entryChange1】を作る。
function entryChange1(){
//内容
}
変数【radio】に、フォームのname【entryPlan】が一致するものを代入する。
radio = document.getElementsByName(‘entryPlan’)
もし1つ目のラジオボタンがチェックされたら1を実行、もし2つ目なら2を実行。
if(radio[0].checked) {
//1を実行
}else if(radio[1].checked) {
//2を実行
}
表示/非表示の切り替えはIDのdisplayを変える。
document.getElementById(‘【ID名】’).style.display = “【表示方法】”;
こんな感じで切り替え。
if(radio[0].checked) {
document.getElementById(‘firstBox’).style.display = “”;
}else if(radio[1].checked) {
document.getElementById(‘firstBox’).style.display = “none”;
}
最初「display = “inherit”;」と書いたらIE6でエラーが出て切り替わらなかったので、
「display = “”;」と空白で記載したらうまく動いきました。
今回であれば表示される行の所は「display = “table-row”;」
特典の所は「display = “block”;」でもOK
このままだと読み込み時にラジオボタンをクリックするまで両方の行が出てしまうので、
作った関数【entryChange1】をオンロードさせます。
最初「entryChange1()」のように「()」を付けていたら動かなくて困った。。
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;
htmlのbodyに記載する方法もあります。
ただbodyに入れるとjsとhtmlが分離されず管理が大変になりそう
<body onload="entryChange1()">
利用方法 | |
---|---|
紹介者 | 紹介された方のお名前を入力してください。 |
会員番号 | 会員番号を入力してください。 |
HTML
<form>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>利用方法</th>
<td>
<select id="changeSelect" name="hoge" onchange="entryChange2();">
<option value="select1">初めて申し込む</option>
<option value="select2">2度目以降の利用</option>
</select>
</td>
</tr>
<!-- 表示非表示切り替え -->
<tr id="firstBox2">
<th>紹介者</th>
<td><input type="text" />
<p>紹介された方のお名前を入力してください。</p></td>
</tr>
<!-- 表示非表示切り替え -->
<tr id="secondBox2">
<th>会員番号</th>
<td><input type="text" />
<p>会員番号を入力してください。</p></td>
</tr>
</table>
</form>
<!-- 表示非表示切り替え -->
<div id="firstNotice2">
特典:初めての方は30%オフ!
</div>
JavaScript
<script type="text/javascript">
function entryChange2(){
if(document.getElementById('changeSelect')){
var id = document.getElementById('changeSelect').value;
if(id == 'select1'){
//フォーム
document.getElementById('firstBox2').style.display = "";
document.getElementById('secondBox2').style.display = "none";
//特典
document.getElementById('firstNotice2').style.display = "";
}else if(id == 'select2'){
//フォーム
document.getElementById('firstBox2').style.display = "none";
document.getElementById('secondBox2').style.display = "";
//特典
document.getElementById('firstNotice2').style.display = "none";
}
}
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange2;
</script>
selectに「id=”changeSelect”」「onchange=”関数名() 」を追加する。
<select id="changeSelect" name="hoge" onchange="entryChange2();">
<option value="select1">初めて申し込む</option>
<option value="select2">2度目以降の利用</option>
</select>
もしIDがchangeSelectだったらこの中を実行
if(document.getElementById(‘changeSelect’)){
//この中を実行
}
changeSelectの中で選んだvalueの値を変数【id】に代入
id = document.getElementById(‘changeSelect’).value;
もし変数【id】(valueの値)が同じならこの中を実行
if(id == ‘select1’){
//この中を実行
}else if(id == ‘select2’){
//この中を実行
}
今回のサンプルのようにひとつのページ内で2箇所以上window.onloadを使おうとしたら
最後のwindow.onload以外は反映されない問題が発生。。
下の例だとentryChange2しかonloadが反映されない。
window.onload = entryChange1;
window.onload = entryChange2;
そこで2つを1つの関数【init】にまとめてonloadしたら上手く反映された!
function init(){
entryChange1();
entryChange2();
}
window.onload = init;
ただこれだと、複数のJavaScriptライブラリがあって、
他にwindow.onloadが使われている場合上書きしてしまうので、
正確にはaddEventListener() メソッドとattachEvent()メソッドを使うのがベストみたいです。
JavaScriptは初心者だったので、onloadのタイミングだったり、ブラウザによる差異などなど
fixする事が沢山あって難しいな~と感じました。
それにしても動的な書き換えって面白い!少しずつ使いこなせるようにがんばろうと思います。
会社のプログラマに色々教えて貰いながらの作業でとても感謝でした!
**追記**
この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。
rin316/jquery.tab: jQuery tab plugin.
**追記終わり**
仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。
それぞれの挙動も比較しやすいように並べてみました。
今日が勉強初投稿の日!
写真:新川通りで撮った桜。
下記リンクからダウンロード。
・jQuery本体…Past Releases内→最新バージョンのMinified
・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip)
ダウンロードしたファイルに対して、head内にリンクを張ります。
<head>
<!-- jQuery -->
<script type="text/javascript" src="/jquery-1.####.min.js"></script>
<!-- ui tabs.js -->
<script type="text/javascript" src="/ui.core.js"></script>
<script type="text/javascript" src="/ui.tabs.js"></script>
<link href="/ui.tabs.css" rel="stylesheet" type="text/css" />
</head>
本文にhtmlを追加。
<div id="ui-tab">
<ul>
<li><a href="#fragment-1"><span>タブ1</span></a></li>
<li><a href="#fragment-2"><span>タブ2</span></a></li>
<li><a href="#fragment-3"><span>タブ3</span></a></li>
</ul>
<div id="fragment-1">
<p>タブ1の内容</p>
</div>
<div id="fragment-2">
<p>タブ2の内容</p>
</div>
<div id="fragment-3">
<p>タブ3の内容</p>
</div>
</div>
下記scriptをheadかbodyどちらかに追加。
デフォルト
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs();
});
</script>
opacity: ‘toggle’, duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
});
</script>
opacity: ‘toggle’, duration: ‘slow’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'slow' } });
});
</script>
opacity: ‘toggle’, duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } });
});
</script>
opacity: ‘toggle’, duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 2000 } });
});
</script>
height: ‘toggle’, duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'normal' } });
});
</script>
height: ‘toggle’, duration: ‘slow’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'slow' } });
});
</script>
height: ‘toggle’, duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'fast' } });
});
</script>
height: ‘toggle’, duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 2000 } });
});
</script>
height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'normal' } });
</script>
height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘slow’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'slow' } });
</script>
height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'fast' } });
</script>
height: ‘toggle’ , opacity: ‘toggle’ , duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 2000 } });
</script>
height: ‘show’ , opacity: ‘show’ , duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'normal' } });
</script>
height: ‘show’ , opacity: ‘show’ , duration: ‘slow’
<script type="text/javascript">
$(function() {
$('#ui-tab5_slow > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'slow' } });
</script>
height: ‘show’ , opacity: ‘show’ , duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'fast' } });
});
</script>
height: ‘show’ , opacity: ‘show’ , duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 2000 } });
});
</script>
event: ‘mouseover’
<script type="text/javascript">
$('#ui-tab > ul').tabs({ event: 'mouseover' , fx: { height: 'toggle' , opacity: 'toggle' , duration: 100 } });
</script>
.tabs(‘rotate’, 3000)
<script type="text/javascript">
$('#ui-tab7_normal > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }).tabs('rotate', 3000);
</script>
本家のサイトを見ると他にも色々なイベントがあるようです。
cookie取得したりできるみたいです。
・jQuery UI – Demos & Documentation
・jQuery UI Tabs / Tabs 3
始めましてRINです
いろいろ思うところがあって勉強ブログ始めました!
これからは日々の勉強をアウトプットしていきたいと思います。
写真は新川通を車で走っていたら出会った風景。
余りの綺麗さに車を止めて近づくと、視界全体を覆う白く薄いピンクの風景!
この桜の様に、清くフレッシュな気持ちと謙虚さ大切に
勉強をしていきたいと思います。