tag:blogger.com,1999:blog-12883139149801393272023-11-16T21:07:08.089+09:00ログテンIT部IT関連開発の個人業者です。
ここには、開発に関する雑記などを、あまりテーマを限定せずに書いて行こうと思います。KAZUMONhttp://www.blogger.com/profile/01862105149848051778noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-1288313914980139327.post-72343059942868753522021-12-24T05:19:00.000+09:002021-12-24T05:19:47.567+09:00WEB画面で長い文書を短く表示しボタンで全部表示する JSプラグイン readmore<p>ご無沙汰しております。</p><p>というか、そもそも、このブログそのものが投稿が少ない。<br />しかも、システム屋が書いているわりに、プログラムな話題がほとんど無い。これは問題だ。</p><p>というわけで、いきなりだが、私の備忘録とか調査結果的なプログラミングネタは大量に溜まっているので、少しずつ掲載していこうと思う。「あくまでも私的な備忘録である」とあえて書いておこう。そうしないと面倒なことになる。本当に面倒な世の中だ。どう面倒な事になるかを書くと、原稿用紙10枚分ぐらい書かねばならないので、それは省略する。</p><p>さらに付け加えると、私はHTMLやCSS、JSのエキスパートでは無い。(つまりは大した事が無いのである。)</p><p>で、なんの話だったっけ?</p><p>そうそう<br /><b>WEB画面で、長い文章を短く表示させて、「続きを読む」等のボタンで、全部表示させたり、また短くしたいという話</b>だ。</p><p>結論から言うと、readmoreというのを発見したので、実装してみた。</p><p>たとえば以下のサイト、とある、<span style="font-size: x-small;">しがない</span>鉄道模型屋のサイトなのだが、左サイドバーにお知らせが表示されている。</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhkw4_taEZTtVzUbaGknrs4EnuF1k9FQmnLEnPSpa4AsIM9lNlu7TQh9EMOSNvJ6THeLCW10_W-MIvW4MdPo6xxUK6I1u6IsrxVnUfllzVC2MdBvv9OVmwCnLlGVglVXWgOYIrkbt6dEHD2_YKMirdldoNMBrOEn5iTHWgKqUc7ik99xtTciNMXgSXT=s810" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="810" data-original-width="600" src="https://blogger.googleusercontent.com/img/a/AVvXsEhkw4_taEZTtVzUbaGknrs4EnuF1k9FQmnLEnPSpa4AsIM9lNlu7TQh9EMOSNvJ6THeLCW10_W-MIvW4MdPo6xxUK6I1u6IsrxVnUfllzVC2MdBvv9OVmwCnLlGVglVXWgOYIrkbt6dEHD2_YKMirdldoNMBrOEn5iTHWgKqUc7ik99xtTciNMXgSXT=s16000" /></a></div><p style="text-align: left;">赤い点線の部分だ。<br />たまたまなのだが、2つ目のボックスがやたら長い。そんなわけで、ここに実装してみよう。</p><p style="text-align: left;">まず公式サイト(GitHub)<br /><a href="https://github.com/jedfoster/Readmore.js">https://github.com/jedfoster/Readmore.js</a><br />から、readmore.jsを持ってくる。この例では、HTMLファイルがあるフォルダ(ディレクトリ)の下のjsというフォルダにreadmore.jsを置いた。</p><p style="text-align: left;">そして、このページの末尾の方に以下のように記述する</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"js/jquery-3.6.0.min.js"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"js/bootstrap.bundle.js"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"text/javascript"</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"js/readmore.min.js"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div> <span style="color: #dcdcaa;">$</span>(<span style="color: #569cd6;">function</span> () {</div><div> <span style="color: #dcdcaa;">$</span>(<span style="color: #ce9178;">'.open'</span>).<span style="color: #dcdcaa;">readmore</span>({</div><div> <span style="color: #9cdcfe;">speed:</span> <span style="color: #b5cea8;">750</span>,</div><div> <span style="color: #9cdcfe;">collapsedHeight:</span> <span style="color: #b5cea8;">120</span>,</div><div> <span style="color: #9cdcfe;">moreLink:</span> <span style="color: #ce9178;">'<a href="#">...続きを読む</a>'</span>,</div><div> <span style="color: #9cdcfe;">lessLink:</span> <span style="color: #ce9178;">'<a href="#">短くする</a>'</span></div><div> });</div><div> });</div><div><span style="color: grey;"></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><br /><div><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><br /><div><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><br /></div></div><p>1行目はJQueryである。これは無いと困るだろう。既にお使いなら、この行は不要だし、お使いでなければ、適当なVersionを設定すると良いだろう。</p><p>2行目はbootstrapのスクリプトである。たまたまこのサイトでは使用している。無くても問題ない。ちなみにVersionは4である。</p><p>readmore関数に渡しているパラメータ部分だが、</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div> <span style="color: #9cdcfe;">speed:</span> <span style="color: #b5cea8;">750</span>,</div><div> <span style="color: #9cdcfe;">collapsedHeight:</span> <span style="color: #b5cea8;">120</span>,</div><div> <span style="color: #9cdcfe;">moreLink:</span> <span style="color: #ce9178;">'<a href="#">...続きを読む</a>'</span>,</div><div> <span style="color: #9cdcfe;">lessLink:</span> <span style="color: #ce9178;">'<a href="#">短くする</a></span></div></div></div><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><div><div style="text-align: left;">speed:750 は文字通り、スピードであろう。展開速度を設定すると思われる。必要な方は公式を確認して欲しい</div></div></blockquote><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;"><div><div style="text-align: left;">collapsedHeight: 120 は短いときの高さ。</div></div><div><div style="text-align: left;">moreLink: は広げるときのリンクを定義</div></div><div><div style="text-align: left;">lessLink: は短くするときのリンク定義</div></div></blockquote><div><div>その他のパラメータもあるみたいだ。必要な方はこれまた参照してください。</div><div><br /></div><div>次にお知らせを表示している部分<span style="font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">。</span></div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span>おしらせ<span style="color: grey;"></</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'fr1'</span><span style="color: grey;">></span><span style="color: #569cd6;"><?=</span><span style="color: #9cdcfe;">$cShopInfo</span>-><span style="color: #9cdcfe;">info1</span><span style="color: #569cd6;">?</span><span style="color: #569cd6;">></span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'fr1'</span><span style="color: grey;">></span><span style="color: #569cd6;"><?=</span><span style="color: #9cdcfe;">$cShopInfo</span>-><span style="color: #9cdcfe;">info2</span><span style="color: #569cd6;">?</span><span style="color: #569cd6;">></span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'fr1'</span><span style="color: grey;">></span><span style="color: #569cd6;"><?=</span><span style="color: #9cdcfe;">$cShopInfo</span>-><span style="color: #9cdcfe;">info3</span><span style="color: #569cd6;">?</span><span style="color: #569cd6;">></span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div></div></div><p><?=$cShopInfo->info1?><br />などの部分は、PHPのコードで、DBから持ってきた3つのメッセージを設置している。<br />これもたまたまこのサイトがそうなっているというだけで、状況によっては、直接メッセージを書く場合もあるだろう。<br />また、'fr1'はこれもこのサイト特有のスタイルで、オレンジ色の枠が定義されている。直接関係ないので、気にしなくて良い。例としては、以下のようなコードで良い気もする。</p><div style="background-color: #1e1e1e; line-height: 19px;"><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> <span style="color: grey;"><</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span>おしらせ<span style="color: grey;"></</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span>ほげほげ<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div><span style="color: #d4d4d4; font-family: Consolas, Courier New, monospace;"><span style="font-size: 14px; white-space: pre;"> </span></span><span style="color: grey; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"><</span><span style="color: #569cd6; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">div</span><span style="color: grey; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">></span><span style="color: #d4d4d4; font-family: Consolas, Courier New, monospace;"><span style="font-size: 14px; white-space: pre;">とにかく長い文章</span></span><span style="color: grey; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"></</span><span style="color: #569cd6; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">div</span><span style="color: grey; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span>ほがほが<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"></div></div><p>ともあれ、この「ほげほげ」な例は置いておいて、元のコードに戻ると、2番目が、今回Readmoreを入れたい行なので、以下のように記述する。</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span>おしらせ<span style="color: grey;"></</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'fr1'</span><span style="color: grey;">></span><span style="color: #569cd6;"><?=</span><span style="color: #9cdcfe;">$cShopInfo</span>-><span style="color: #9cdcfe;">info1</span><span style="color: #569cd6;">?</span><span style="color: #569cd6;">></span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'fr1'</span><span style="color: grey;">></span></div><div><b> <span> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'open'</span><span style="color: grey;">></span></b></div><div><b><span> </span><span> </span> <span style="color: #569cd6;"><?=</span><span style="color: #9cdcfe;">$cShopInfo</span>-><span style="color: #9cdcfe;">info2</span><span style="color: #569cd6;">?</span><span style="color: #569cd6;">></span></b></div><div><b> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></b></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'fr1'</span><span style="color: grey;">></span><span style="color: #569cd6;"><?=</span><span style="color: #9cdcfe;">$cShopInfo</span>-><span style="color: #9cdcfe;">info3</span><span style="color: #569cd6;">?</span><span style="color: #569cd6;">></span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div></div></div><p>以上で完了なので、動作確認してみると、</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgFUXPmYK-5zyy56KNsJRrHnj9hrIKMCqvUsK2zyrwS9O64fnt25SOSzJ06LArXjeN1mZch_BjWA1k-vLdovH-CM6vxnBob2IRov3tDRijsbY1Vex-1QYU4PIq22jYftKPxkaXm-QqdwjCkCb9wilxvJsd1vQ5o9ERleACqhqUS7JufnbF0vfJmsau1=s449" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="449" data-original-width="364" height="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEgFUXPmYK-5zyy56KNsJRrHnj9hrIKMCqvUsK2zyrwS9O64fnt25SOSzJ06LArXjeN1mZch_BjWA1k-vLdovH-CM6vxnBob2IRov3tDRijsbY1Vex-1QYU4PIq22jYftKPxkaXm-QqdwjCkCb9wilxvJsd1vQ5o9ERleACqhqUS7JufnbF0vfJmsau1=w324-h400" width="324" /></a></div><br /><p>なんと、ボックスは短くなったが、欄外のなって溢れた文字がそのまま以降のコンテンツに重なって表示される。「<span style="color: #3d85c6;">続きを読む</span>」リンクを押すと通常の表示になるが、閉じるとまたこうなる。</p><p>これにははまり、色々やってみたのだが、結論としては、redmoreで表示を制御する段落のセレクタ(今回の例では'open'クラス)にスタイル</p><span id="docs-internal-guid-7b18de5c-7fff-2c79-e22c-be3b38b9a6e0"><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.6285714285714286; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: #9cdcfe; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">overflow</span><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">: </span><span style="background-color: transparent; color: #ce9178; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">hidden</span><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial;"><span style="font-size: 14.6667px; white-space: pre-wrap;">を追加すれば良い事が発覚。
</span></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial;"><span style="font-size: 14.6667px; white-space: pre-wrap;">ヘッダ部分に以下のように記述した。面倒だから直接書いたが、普通はCSSファイルに書くのだろう。</span></span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.6285714285714286; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: grey; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><</span><span style="background-color: transparent; color: #569cd6; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">style</span><span style="background-color: transparent; color: grey; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.6285714285714286; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: transparent; color: #d7ba7d; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.open</span><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.6285714285714286; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: transparent; color: #9cdcfe; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">overflow</span><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">: </span><span style="background-color: transparent; color: #ce9178; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">hidden</span><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.6285714285714286; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: #d4d4d4; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> }</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.6285714285714286; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: grey; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"></</span><span style="background-color: transparent; color: #569cd6; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">style</span><span style="background-color: transparent; color: grey; font-family: Consolas, sans-serif; font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><div><span><br /></span></div></span><p style="text-align: left;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhDRkjVidrMOewIunC8dWaiT0VtworA4Uoe_BQ3jYzSRub4uPnzJQPIfM3LREvNM66-3hIPdW6_LFoRyWAbY64JXXF2n626DLnRLSsMh8YKw69w6dK1gLpOkHqhYzKjmBl5AIkC_U4jbSgJpZLkCMQ-Z34xRZUZK8Ha0HnHuM2-2VMWCrWKvK1p2i5v=s419" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="395" data-original-width="419" height="378" src="https://blogger.googleusercontent.com/img/a/AVvXsEhDRkjVidrMOewIunC8dWaiT0VtworA4Uoe_BQ3jYzSRub4uPnzJQPIfM3LREvNM66-3hIPdW6_LFoRyWAbY64JXXF2n626DLnRLSsMh8YKw69w6dK1gLpOkHqhYzKjmBl5AIkC_U4jbSgJpZLkCMQ-Z34xRZUZK8Ha0HnHuM2-2VMWCrWKvK1p2i5v=w400-h378" width="400" /></a></div><br /><span>溢れた分が表示されなくなった。</span><p></p><p style="text-align: left;">「<span style="color: #3d85c6;">続きを読む</span>」リンクを押すと全文が表示され、さらに末尾の行に「<span style="color: #3d85c6;">短くする</span>」というリンクが表示される。それを押すとまた上の図のように短くなる。</p><p style="text-align: left;"><br /></p><p style="text-align: left;">以上なのだが、このサイトにおいては、せっかくBootstrap4があるので、パラメータ部分を次のようにしてみた。つまりは、Bootstrapのボタンリンクにしてみた。</p><div style="background-color: #1e1e1e; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="color: #d4d4d4;"><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;"> <span style="color: #dcdcaa;">$</span>(<span style="color: #569cd6;">function</span> () {</div><div style="color: #d4d4d4;"> <span style="color: #dcdcaa;">$</span>(<span style="color: #ce9178;">'.open'</span>).<span style="color: #dcdcaa;">readmore</span>({</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">speed:</span> <span style="color: #b5cea8;">750</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">collapsedHeight:</span> <span style="color: #b5cea8;">120</span>,</div><div><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">moreLink:</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'<a class="</span><span style="color: #fcff01;">btn-sm btn-info</span><span style="color: #ce9178;">" href="#">...続きを読む</a>'</span><span style="color: #d4d4d4;">,</span></div><div><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">lessLink:</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'<a class="</span><span style="color: #fcff01;">btn-sm btn-info</span><span style="color: #ce9178;">" href="#">短くする</a>'</span></div><div style="color: #d4d4d4;"> });</div><div style="color: #d4d4d4;"> });</div><div style="color: #d4d4d4;"><span style="color: grey;"></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><span style="color: #d4d4d4;"><br /></span></div><span><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">続きを読むリンクがボタンになった。</p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgwcZAE5nrTBDFI9khSZIPUffscP-ncq-xo3zjg-2SBw9NHclaVskCbZw9cQOChICnifFD5p_cdSvL-KT7xS4oB9LQTmzOfhUPbMj6sFf5RIIbhBA2H1yIysxKiuct9okmLQVrJ3SRxl47d-N_2brBMdA2smoqSyRJTCmE83FAI8QPJbXXtY3Ts0oU6=s416" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="364" data-original-width="416" height="350" src="https://blogger.googleusercontent.com/img/a/AVvXsEgwcZAE5nrTBDFI9khSZIPUffscP-ncq-xo3zjg-2SBw9NHclaVskCbZw9cQOChICnifFD5p_cdSvL-KT7xS4oB9LQTmzOfhUPbMj6sFf5RIIbhBA2H1yIysxKiuct9okmLQVrJ3SRxl47d-N_2brBMdA2smoqSyRJTCmE83FAI8QPJbXXtY3Ts0oU6=w400-h350" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">閉じている状態(初期状態)</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjXkLCmrOVFADf3Feg9P0fb-XtpHx8YbA4a8eCtubiTploTIIuSg3ZaHpxjfBaBvHCOfzjvpc9N9AIfo5Gh9gA7oDC6m2k8H4vM5FRlXiNVVTsdw6Qw_6t9S1GBbJ0fxzba0pCLTLzKRKUSsuAAarvoqOlOPqH_L8lGd3ITLjQOdSz69n0b6ndYBSP8=s773" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="773" data-original-width="425" height="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEjXkLCmrOVFADf3Feg9P0fb-XtpHx8YbA4a8eCtubiTploTIIuSg3ZaHpxjfBaBvHCOfzjvpc9N9AIfo5Gh9gA7oDC6m2k8H4vM5FRlXiNVVTsdw6Qw_6t9S1GBbJ0fxzba0pCLTLzKRKUSsuAAarvoqOlOPqH_L8lGd3ITLjQOdSz69n0b6ndYBSP8=w352-h640" width="352" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">開いている状態</td></tr></tbody></table><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">以上です。</p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">----</p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">関連リンク</p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">ReadmoreのGitHub</p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://github.com/jedfoster/Readmore.js">https://github.com/jedfoster/Readmore.js</a></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">参考にしたサイト</p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">ここの内容に沿って作成し、CSSを追加した。</p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">「続きを読む」ボタンで要素の開閉を簡単に組込めるプラグインReadmore.js-WEBLAB</p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://www.weblab.co.jp/staff/creator/6743.html">https://www.weblab.co.jp/staff/creator/6743.html</a></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p></span></div>KAZUMONhttp://www.blogger.com/profile/01862105149848051778noreply@blogger.com0tag:blogger.com,1999:blog-1288313914980139327.post-66224939448517420712018-11-01T02:45:00.000+09:002018-11-02T00:42:02.637+09:00ハードディスクを廃棄のために分解した<div class="separator" style="clear: both; text-align: left;">
このブログに限って言えば、1年ぶりの投稿だ。</div>
<div class="separator" style="clear: both; text-align: left;">
今回は、ハードディスク(以下HDD)を廃棄のために分解した話。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieV-PXFTcJUvXcb7Xo4kn7hRtblRZDV-nTcgQz0wAmHEhR36BRwV_ufdQ-v2qLsgw63jFhVu5Qg5TFTEs-0hTbk-Fdzx0mvT19Cbwe0utfswRY_etbgnK6txK7edqalDgxcz5v1RlTaw/s1600/IMG_0421.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieV-PXFTcJUvXcb7Xo4kn7hRtblRZDV-nTcgQz0wAmHEhR36BRwV_ufdQ-v2qLsgw63jFhVu5Qg5TFTEs-0hTbk-Fdzx0mvT19Cbwe0utfswRY_etbgnK6txK7edqalDgxcz5v1RlTaw/s400/IMG_0421.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
部屋を片付けていたら、壊れた2.5インチのHDDが出てきた。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
そのまま「金属ゴミ」として廃棄すればよいのだが、万が一拾われ修復されて、私の大変重要な機密情報が漏れたら大事だ。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
....というか、2.5インチだけに、ノートパソコンに搭載されていた可能性があるが、もはやどこに搭載されていたか、いつのものかも全くわからない。2GBだから、もう20年ぐらい前とかの代物だと思われる。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
というわけで、重要だか何だかわからない、そもそも本人も内容を把握していない機密情報が、漏れる心配はほぼほぼ無いのだが、それでも、そのまま捨てるのは気持ち悪いので、分解してディスクを破壊する事にした。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
それで、HDDなのだが、普通のドライバでは開かない。(「デバイス・ドライバ」の事では無い、「ネジ回し」の事。>いらん解説!)</div>
<div class="separator" style="clear: both; text-align: left;">
ネットで調べたら、T型というタイプのドライバを使うらしい。ただ、サイズがわからない。かといってこのためだけに、「T型ドライバの詰め合わせ」を買うのもなんだか勿体無い。前回の投稿のiPhone電池交換キット付属のドライバも試したのだが、合わなかった。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
そんな事を考えつつ探していたら、とても安い色々なビットが入ったドライバのセットを発見したので、思わず買ってしまった。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQzK-thntIMioE6-IJM851tl1T5ogv3_8Xu2X63qA_x2PR8vKu3647NvLAjg25mVQYUORXmAexVmTglY_YLlk-g6GJwQ7qYIb7hGxmLq_aCPhSmyWRSE4vK977J2NgK-XVcNopKpUj_Fk/s1600/IMG_0408.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQzK-thntIMioE6-IJM851tl1T5ogv3_8Xu2X63qA_x2PR8vKu3647NvLAjg25mVQYUORXmAexVmTglY_YLlk-g6GJwQ7qYIb7hGxmLq_aCPhSmyWRSE4vK977J2NgK-XVcNopKpUj_Fk/s400/IMG_0408.JPG" width="400" /></a></div>
どれくらい安いって、定形外送料込みで約600円だった。<br />
パッケージを見るに、ご近所の国製なのは間違い無さそうだが。一体原価はいくらなんだ?。<br />
<br />
紙のケースから出してみる。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggd1zQt5IyVykjo5RTtotpbpwTfZYn3lB0bJIxGYsv8cZaGBiv8fNQLyQ8V1YdSc6IQ1zCAEr-RPPJo56CVZI2o4pfOT3hdlZo0nbmIPo9iHxgpTaQsW1CFXQ1KIyDJU3wWLevuS-e2DE/s1600/IMG_0409.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggd1zQt5IyVykjo5RTtotpbpwTfZYn3lB0bJIxGYsv8cZaGBiv8fNQLyQ8V1YdSc6IQ1zCAEr-RPPJo56CVZI2o4pfOT3hdlZo0nbmIPo9iHxgpTaQsW1CFXQ1KIyDJU3wWLevuS-e2DE/s400/IMG_0409.JPG" width="400" /></a></div>
<br />
箱の裏に、ビットのラインナップがある。何でも来い!って感じだ。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8_g43sXFaYRDyLr2nrY1pEDWFATsm37b0gg9q993xYNVflPXq0RJ4ccvHTkYHPzwwU2XUSdXYDkR7ZK1xvopJhs28DIg4pyXiB4Q3ZdZo0LWZm3eoj03-lRIY8Sx8NwDR0nr9TjDuZKQ/s1600/IMG_0410.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8_g43sXFaYRDyLr2nrY1pEDWFATsm37b0gg9q993xYNVflPXq0RJ4ccvHTkYHPzwwU2XUSdXYDkR7ZK1xvopJhs28DIg4pyXiB4Q3ZdZo0LWZm3eoj03-lRIY8Sx8NwDR0nr9TjDuZKQ/s400/IMG_0410.JPG" width="400" /></a></div>
<br />
ビニールの包装を撤去。下のボタンをスライドすると開くのだろう。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJq7P7iDfpsFJeSxKyhbCtKAx3f9X5sgFw9Oq4WUgDLgeyL3Id9Z8HtBd7tXo8LDJzxN6ycV-YfvZmDBIQDkhEMM2jf6JlWoYzIeAckqmX3nrgRBvVAcYLoH0bAOZHprEbUC8Do0-VWwc/s1600/IMG_0411.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJq7P7iDfpsFJeSxKyhbCtKAx3f9X5sgFw9Oq4WUgDLgeyL3Id9Z8HtBd7tXo8LDJzxN6ycV-YfvZmDBIQDkhEMM2jf6JlWoYzIeAckqmX3nrgRBvVAcYLoH0bAOZHprEbUC8Do0-VWwc/s400/IMG_0411.JPG" width="400" /></a></div>
<br />
なんと、開くとビットが起立した!なんだかすげー!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD7YfJ8fLVTMEBXD21tEsXVKLm1G_JPINNzg0sZAoqYYr_KTFJQAtVbRVEwxzSpWI-seoSFmzPtzVPJfWiBOWv0DEaeUeGldaJEbKBBZM3cenJksojHW5cpzbHa5kjQJDa7kj9o4fbhE/s1600/IMG_0412.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD7YfJ8fLVTMEBXD21tEsXVKLm1G_JPINNzg0sZAoqYYr_KTFJQAtVbRVEwxzSpWI-seoSFmzPtzVPJfWiBOWv0DEaeUeGldaJEbKBBZM3cenJksojHW5cpzbHa5kjQJDa7kj9o4fbhE/s400/IMG_0412.JPG" width="400" /></a></div>
<br />
これがT型。T6を取ってみた。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIqqsEvTMDtZZlmJYB8q7Ba-kJCevHaGlO6uxRd3-4a42lvJGhWcC7bnnuxeKj2Rl3uaYhXGAS4_uXJFlQykDmGRAmmSfQdkSBj2QYWfstNUbL_fyviax_6-0HTSVtSxdU2WZmjE-mmI/s1600/IMG_0413.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIqqsEvTMDtZZlmJYB8q7Ba-kJCevHaGlO6uxRd3-4a42lvJGhWcC7bnnuxeKj2Rl3uaYhXGAS4_uXJFlQykDmGRAmmSfQdkSBj2QYWfstNUbL_fyviax_6-0HTSVtSxdU2WZmjE-mmI/s400/IMG_0413.JPG" width="400" /></a></div>
<br />
結局適合したのはT4だった。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0i9dyqepvQxWG6sN3Y6tovrknjtNWmtOFWduX5M3gL8Df1FPUJJmk8cldoENoWSXC2UveIjbrj3AbIDq2uGYzPOfFnJlZUIawniKrNXLCIFIszH2tlZlrqOIgl0Sp1zbIbVNFsv8i_g/s1600/IMG_0414.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0i9dyqepvQxWG6sN3Y6tovrknjtNWmtOFWduX5M3gL8Df1FPUJJmk8cldoENoWSXC2UveIjbrj3AbIDq2uGYzPOfFnJlZUIawniKrNXLCIFIszH2tlZlrqOIgl0Sp1zbIbVNFsv8i_g/s400/IMG_0414.JPG" width="400" /></a></div>
<br />
サクサクとネジを外す。軸もラバーな感じでとても回しやすい。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QrhoCEy4Z9ixCg0sPjx_F6qg3Q-loyO47inC4Kt85LGAb_84RxBL84w536qjvF4rmiqTll9pJ47gQ2p4CAHnFJdtM046CsrtJEExsm2FFFwtahbDz2eHAbzCxJhogicYFNqxXdI-CHw/s1600/IMG_0415.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QrhoCEy4Z9ixCg0sPjx_F6qg3Q-loyO47inC4Kt85LGAb_84RxBL84w536qjvF4rmiqTll9pJ47gQ2p4CAHnFJdtM046CsrtJEExsm2FFFwtahbDz2eHAbzCxJhogicYFNqxXdI-CHw/s400/IMG_0415.JPG" width="400" /></a></div>
<br />
全部はずしたが、蓋が取れない。きっとシールの下に隠れているに違いない。<br />
<br />
やっぱり。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5HgTAGPxPOF7mMsACXKB-alDZCdVKqIdMLneziGWy8enivsjketfkF6hGYeTnNa45HO5zYoLgt2Dk7bYxPpNTX6lFXe7rDD0cCeSxJam8Rbu5SJd3dSzzfVaNqOP-2aZdm3szZlTwSwQ/s1600/IMG_0416.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5HgTAGPxPOF7mMsACXKB-alDZCdVKqIdMLneziGWy8enivsjketfkF6hGYeTnNa45HO5zYoLgt2Dk7bYxPpNTX6lFXe7rDD0cCeSxJam8Rbu5SJd3dSzzfVaNqOP-2aZdm3szZlTwSwQ/s400/IMG_0416.JPG" width="400" /></a></div>
<br />
茶色いフィルムも外して、ネジを回してみたが、これは、蓋のネジでは無く、多分ディスクの軸だ。クルクル回ってしまう。<br />
ってことはもう一つのシールか!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj911J2l1y3DJpLfilhDARP9rG64jUFipaffjEhdo_X11Tn3VySmoUhGRjh6bPEvmKGLrk28Fesiuwu-oMQe-XiChEXsHiTL1zM3_mVJGZpypQidvzKyrjOSRGXtdHgF71ss_UQuNZs3zA/s1600/IMG_0417.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj911J2l1y3DJpLfilhDARP9rG64jUFipaffjEhdo_X11Tn3VySmoUhGRjh6bPEvmKGLrk28Fesiuwu-oMQe-XiChEXsHiTL1zM3_mVJGZpypQidvzKyrjOSRGXtdHgF71ss_UQuNZs3zA/s400/IMG_0417.JPG" width="400" /></a></div>
<br />
あった。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvYXcjCU2tTnGawp7ZR7k4C4SqWGhZFKjQmDwjxchiTg_C0Kh59w6ypTRoU0yGygY0Sc3j5T_Vc4mmLVdwTsZ7LkiOeNAK268nAHi1TTb5F9X2N-2OukLzJmtMurh2jfNe5bNaIFQHvM/s1600/IMG_0418.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvYXcjCU2tTnGawp7ZR7k4C4SqWGhZFKjQmDwjxchiTg_C0Kh59w6ypTRoU0yGygY0Sc3j5T_Vc4mmLVdwTsZ7LkiOeNAK268nAHi1TTb5F9X2N-2OukLzJmtMurh2jfNe5bNaIFQHvM/s400/IMG_0418.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSdVwUUQizVdFlaGyWI2XJt3PqvaFHAB-OU05lBGCQceJJQmABcpL4rgSc0OrxIKL6AVyzt5ZMv-Y_9f29FAidcJwzw4vwvGE_LQ97sSo2SWjNqRBkDJbAUjiFEO356Dg4fPod_ciTIVc/s1600/IMG_0419.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSdVwUUQizVdFlaGyWI2XJt3PqvaFHAB-OU05lBGCQceJJQmABcpL4rgSc0OrxIKL6AVyzt5ZMv-Y_9f29FAidcJwzw4vwvGE_LQ97sSo2SWjNqRBkDJbAUjiFEO356Dg4fPod_ciTIVc/s400/IMG_0419.JPG" width="400" /></a></div>
<br />
開いた。ディスクが見える。なんだかピカピカで綺麗だ。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9PFrSvPh9YiOHF8AdrAZk5Y5lVMrRwc3ba9eFPGYuwsAktA1-FmJn_MX2_iXcWNeuFE7SF3Bzpvp10R-wy-RpusjBFR3tg4lkahztgLO1TK1KC5dTbwxm4KTaA4siARgAJTX74icRkzs/s1600/IMG_0421.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9PFrSvPh9YiOHF8AdrAZk5Y5lVMrRwc3ba9eFPGYuwsAktA1-FmJn_MX2_iXcWNeuFE7SF3Bzpvp10R-wy-RpusjBFR3tg4lkahztgLO1TK1KC5dTbwxm4KTaA4siARgAJTX74icRkzs/s400/IMG_0421.JPG" width="400" /></a></div>
<br />
鏡にもなる!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXijr4_IuFzmvAzbtpFi7dGAnR9ris-Q5emmmaRMSvryV_W6xvHxAQiabzoRl9OM1iS9no4X9eaJU0SVxLm0EIv8SGAtK0owjwzpWBE0UfL-2GIO9Zyn01kwYO80ApKTlvNrE-PAFfVw/s1600/IMG_0422.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXijr4_IuFzmvAzbtpFi7dGAnR9ris-Q5emmmaRMSvryV_W6xvHxAQiabzoRl9OM1iS9no4X9eaJU0SVxLm0EIv8SGAtK0owjwzpWBE0UfL-2GIO9Zyn01kwYO80ApKTlvNrE-PAFfVw/s400/IMG_0422.JPG" width="400" /></a></div>
<br />
ここで、ディスクに思いっきり傷でも付ければ終了なのだが、あまりに綺麗なので、ディスクを取り出してみる事にした。<br />
<br />
先程の軸のネジをディスクを押さえつつ回したら取れた。ドライバはT5に変更した。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy56Fx7gvhNvXhCa6Lpw1uRHVtQ7zFVCaMllwAb2BTV5eXUi8Efk5-_hSLLErHjbYDgvlvruWdeNRERrujtaJAEY-mEspuyHDqArqgZkLtK73spfwNisPO18oSVzrYABiWFLMKFXvYXCo/s1600/IMG_0423.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy56Fx7gvhNvXhCa6Lpw1uRHVtQ7zFVCaMllwAb2BTV5eXUi8Efk5-_hSLLErHjbYDgvlvruWdeNRERrujtaJAEY-mEspuyHDqArqgZkLtK73spfwNisPO18oSVzrYABiWFLMKFXvYXCo/s400/IMG_0423.JPG" width="400" /></a></div>
<br />
ディスク摘出成功!!ホント綺麗だ。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBcoa12YnNLXcJ2J0d-iXgnSSnmpZJ9DrHe8dP4y3zwjyjbJlyCXBy_cG7QgcYyG2PS0IXez0dirB5A2gBqxidefXAZmqBzxZUDvhwHcUTmhvdHEW6i96LBlctzwP6pGIE2CgljUKrCNY/s1600/IMG_0424.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBcoa12YnNLXcJ2J0d-iXgnSSnmpZJ9DrHe8dP4y3zwjyjbJlyCXBy_cG7QgcYyG2PS0IXez0dirB5A2gBqxidefXAZmqBzxZUDvhwHcUTmhvdHEW6i96LBlctzwP6pGIE2CgljUKrCNY/s400/IMG_0424.JPG" width="400" /></a></div>
<br />
鏡にもなるし!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpj0_cNJxTc52YD75DvU4IXWBrJWTjK95lZR3DvuOixq4g9D6Ilxd_jxisEdws3_r5qBXXrkwipyIyZSI-93_tCzk8d23HbVvE1QmGxQzvUWjDaq0C7G8l7m5WJl-Ua7DU8aVZKLen-o/s1600/IMG_0425.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpj0_cNJxTc52YD75DvU4IXWBrJWTjK95lZR3DvuOixq4g9D6Ilxd_jxisEdws3_r5qBXXrkwipyIyZSI-93_tCzk8d23HbVvE1QmGxQzvUWjDaq0C7G8l7m5WJl-Ua7DU8aVZKLen-o/s400/IMG_0425.JPG" width="400" /></a></div>
2GBのHDDなので、一枚1GBなのだろう。<br />
<br />
なんとなくだが、ディスク摘出後、HDDの蓋を元通り戻した。<br />
さて、このディスクどうしよう?<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyff4iJDKoepizqc4Xb8sJg_Gdc4dJQWVGKwrdpc2gMzpqhfOII9sVJ1E497uikNwDEg5f0x-EOLb4wCkPbefhu0kN6qTonEau16H-q3EL0aJVbC8cnhNFt4pJ22BNW9cQ19tYpZSqBug/s1600/IMG_0427.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyff4iJDKoepizqc4Xb8sJg_Gdc4dJQWVGKwrdpc2gMzpqhfOII9sVJ1E497uikNwDEg5f0x-EOLb4wCkPbefhu0kN6qTonEau16H-q3EL0aJVbC8cnhNFt4pJ22BNW9cQ19tYpZSqBug/s400/IMG_0427.JPG" width="400" /></a></div>
<br />
鏡にでもする?<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggUO5iH-Lra6KzaXQTcB1XYmnfT8R8mBStezopIh05bRgUtsmAgQoo54-XhYWI8zaz8YNpuBYsxVjceoV7hyphenhyphenxk0ryo9KyxOKU9BClYQPqnph4m2DyRMtOZcLTuhxqYtPYgFFjen8fCj0k/s1600/IMG_0429.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggUO5iH-Lra6KzaXQTcB1XYmnfT8R8mBStezopIh05bRgUtsmAgQoo54-XhYWI8zaz8YNpuBYsxVjceoV7hyphenhyphenxk0ryo9KyxOKU9BClYQPqnph4m2DyRMtOZcLTuhxqYtPYgFFjen8fCj0k/s400/IMG_0429.JPG" width="400" /></a></div>
<br />
以上なのだが、こんな面倒な事しなくても、HDDは精密機器なので、<br />
<ul>
<li>衝撃を与える</li>
<li>ドリルでディスクがありそうな位置に、穴を開ける。</li>
<li>水没させる</li>
<li>そもそも、蓋を開けただけで、ホコリ等が混入して、壊れる</li>
</ul>
という情報もあった。簡単に破壊可能なのだ。そりゃま確かにそうだろう。<br />
なんだか、また無駄に動いてしまった。まぁ良しとしよう。<br />
<br />KAZUMONhttp://www.blogger.com/profile/01862105149848051778noreply@blogger.com0tag:blogger.com,1999:blog-1288313914980139327.post-52566301893914615032017-11-24T02:24:00.001+09:002017-11-24T02:45:44.902+09:00今更ではありますが、iPhone5の電池交換<div class="separator" style="clear: both; text-align: left;">
家族のiPhoneのバッテリがヘタってきた。3時間と持たないらしい。</div>
<div class="separator" style="clear: both; text-align: left;">
もう4年ぐらい使っているので当然なのだが、iPhone8とかiPhone10もつい先日発売された。(まぁそういう時期の記事である。)機種変すれば?と勧めたが愛着があるし、形状が気に入っているとの事。</div>
<div class="separator" style="clear: both; text-align: left;">
私は予算が許せば極力新しいものを使いたい主義だが、愛着とかそういう考えも悪くない。愛着は素敵だが、放っておいたら、近々そう遠くない未来にお別れの日が来る。</div>
<div class="separator" style="clear: both; text-align: left;">
最近職場のお客さんがアンドロイド系のスマフォを自力でバッテリ交換したという話しをきいたので、私もやってみようという事になったのだ。</div>
<div class="separator" style="clear: both; text-align: left;">
そこで、バッテリ交換キットを入手した。DIGIFORCEというメーカだが何か色々な工具が入っている。輪ゴムもある。輪ゴム何に使う?</div>
<div class="separator" style="clear: both; text-align: left;">
お値段は大体1800円くらい。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr9_4XJOt2H_uLqlSIG9YRx-6EzZK2F57ihxJXMXoSvCg83CccUPTlwOmtiXvGWMjZ6uHGM5sDY65MlZC5DxI3zezVGVLJMO-CEBNRi6J050qf1NQ590XQMbdH2zMk7LDA50_o4WxgXLc/s1600/IMG_4953.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr9_4XJOt2H_uLqlSIG9YRx-6EzZK2F57ihxJXMXoSvCg83CccUPTlwOmtiXvGWMjZ6uHGM5sDY65MlZC5DxI3zezVGVLJMO-CEBNRi6J050qf1NQ590XQMbdH2zMk7LDA50_o4WxgXLc/s400/IMG_4953.JPG" width="400" /></a></div>
<br />
なんとかフロントパネルを外した。どうやって外したかは、都合により後述。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5c5P2JeUjcrFQX1Bp9QeAy2xl-cnnq1bkEgr8WhDTr1ryd3ahmi39ZQxqjfP260GRhPhon_3uqWr5XapRAwW0Qq5jiD4WDJ83-uXM65hi0u-l6tH_q4GDcG66hF60ZEeN3cSOsYZ7hE/s1600/IMG_4957.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5c5P2JeUjcrFQX1Bp9QeAy2xl-cnnq1bkEgr8WhDTr1ryd3ahmi39ZQxqjfP260GRhPhon_3uqWr5XapRAwW0Qq5jiD4WDJ83-uXM65hi0u-l6tH_q4GDcG66hF60ZEeN3cSOsYZ7hE/s400/IMG_4957.JPG" width="400" /></a></div>
<br />
小さなネジを失くしたらエライコッチャなのだが、このキットの素晴らしいところは、マグネットシートが付いていて、外したネジをなくさないように、貼り付けておけるところだ。このキットで感動した2つの点の1つである。<br />
とにかく、コネクタのカバーまで外した。<br />
このキットにはカラー写真入りのとてもわかり易いマニュアルが付属しているのだが、ここで嫌な予感がしてきた。なんだか、マニュアルと実態の配置が違うのである。<br />
ああ、やっぱ!コネクタの形状が違う。いけない、私が入手した交換キットはiPhone5s用で、このiPhoneは5sでは無く、5だった!(事前に確認しようぜ>私)<br />
<b><span style="font-size: large;">終了!!</span></b>(泣)<br />
とりあえず、元通り組み立てた。とてもさびしい気持ちになった。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3QdxwIOmWZfLVzGRWZ2ShUw5PECPedSEg9dQ08eV6sPOGWYhZjuGzub82P5dgtzLgeikatdUVvwom_kX59-3BibFHjeJrczqVAGmEKhfrKFJk2PQxmHxA3BD6ytr0GJbagzAV3JpnDU/s1600/IMG_4958.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3QdxwIOmWZfLVzGRWZ2ShUw5PECPedSEg9dQ08eV6sPOGWYhZjuGzub82P5dgtzLgeikatdUVvwom_kX59-3BibFHjeJrczqVAGmEKhfrKFJk2PQxmHxA3BD6ytr0GJbagzAV3JpnDU/s400/IMG_4958.JPG" width="400" /></a></div>
<br />
<br />
<br />
そんなわけで、どうもキットはそのまま使えそうなので、バッテリのみをすぐに注文。2日後届いた。なんとなくだが、DIGIFORCEじゃ無いやつを購入してしまった。本件はメーカに過失は無い。私が間抜けなだけ。別にどっちでも良かったのだが。気まぐれで選んでしまった。このバッテリのメーカはBlueSeaというらしい。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8oPvOaP8a-QDRiQxMUVJ5y-kUhXVcxoO6b3Ceb7ohZ42bBeMhXt-ddn-4Ly1Flq6kz-hjgy8GIp9X4IitRqqPBNG812IP7yVF9WoK4I5kXZ-pu260hxpfCeuwcHaiPaj8eIhzh9CmW8/s1600/IMG_4960.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8oPvOaP8a-QDRiQxMUVJ5y-kUhXVcxoO6b3Ceb7ohZ42bBeMhXt-ddn-4Ly1Flq6kz-hjgy8GIp9X4IitRqqPBNG812IP7yVF9WoK4I5kXZ-pu260hxpfCeuwcHaiPaj8eIhzh9CmW8/s400/IMG_4960.JPG" width="400" /></a></div>
<br />
下にある5s用のバッテリと比較。確かに、コネクタの長さが違うのです。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYN51KK1NCuyHLGOl1YN5r5vBdt-g9pXBLQV1iP7o0r_I1uw2X6ndkAzoo3fyf33PsF77vXCnHLc8OYv_GweAgaTFk8KxyDOLS2q1OrqHCxm1MZ7QbiX38-c-CQTDt75x-j2g6dbJ01E/s1600/IMG_4961.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYN51KK1NCuyHLGOl1YN5r5vBdt-g9pXBLQV1iP7o0r_I1uw2X6ndkAzoo3fyf33PsF77vXCnHLc8OYv_GweAgaTFk8KxyDOLS2q1OrqHCxm1MZ7QbiX38-c-CQTDt75x-j2g6dbJ01E/s400/IMG_4961.JPG" width="400" /></a></div>
<br />
前回は省略したけど、フロントパネルの外しから始めてみよう。<br />
ここでは写真を省略しますが、下部の星型ネジを2本、まず外します。(後ほどその画も載せます)<br />
ホームボタンの少し上に吸盤を貼り付けて、引っ張ります。フロントパネルが浮いて隙間が出来たら、ピックを挟みます。(このピック、ギター弾けるのかな?)<br />
5sはホームボタンのケーブルがあるので、ピックを挟む時注意が必要らしいですが、5はホームボタンにケーブルは無いので、容赦なく挿して大丈夫です。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtMLG96GwK4lkzkX8voosjGNVvM1ujDlDbZbppRTPhTUMOKisGjiIL5L4miPNvE6WYeMTeS02DvbpeEV0nQ0f9dRYSosUaBjqwmD8hhJIq1bn-b9Y9g1sLXzf4Msmqyma52NnpXAf7qLs/s1600/IMG_4962.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtMLG96GwK4lkzkX8voosjGNVvM1ujDlDbZbppRTPhTUMOKisGjiIL5L4miPNvE6WYeMTeS02DvbpeEV0nQ0f9dRYSosUaBjqwmD8hhJIq1bn-b9Y9g1sLXzf4Msmqyma52NnpXAf7qLs/s400/IMG_4962.JPG" width="400" /></a></div>
<br />
写真では、最初に挿したピックは取れてしまったけど、本当は挿したまま、隙間が出来たら、もう一つの先が薄くて頑丈なピックで、サイドをスライドさせてフロントパネルの側面を浮かせます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1AVwb5WpvWUhqN4e86_Ag0XtKWv9QV4O38M7ex2p5vkkLKYBGxhVTYAXKeT-3zC-NuNH_KWqqLmMb7wEMDFJ0MCUMsQObnlCiYp3VqxaQS1TcLUeKhWH-0aBpHJNGLQx-EOP8g_ol2U/s1600/IMG_4964.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1AVwb5WpvWUhqN4e86_Ag0XtKWv9QV4O38M7ex2p5vkkLKYBGxhVTYAXKeT-3zC-NuNH_KWqqLmMb7wEMDFJ0MCUMsQObnlCiYp3VqxaQS1TcLUeKhWH-0aBpHJNGLQx-EOP8g_ol2U/s400/IMG_4964.JPG" width="400" /></a></div>
<br />
開きました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWl_13ElkoZGFUcDw9JIiRIujEaI6poPnyz5qwm5lhyphenhyphenJ5raU-ZjENUFLCBrFNH92QPL3s7DxEbcCZpCJKIrI5qQr3hyuoOUz1IzSBubqx9h72W6G3W3oNiMoot454v8EgyyLhTwCn9dwo/s1600/IMG_4965.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWl_13ElkoZGFUcDw9JIiRIujEaI6poPnyz5qwm5lhyphenhyphenJ5raU-ZjENUFLCBrFNH92QPL3s7DxEbcCZpCJKIrI5qQr3hyuoOUz1IzSBubqx9h72W6G3W3oNiMoot454v8EgyyLhTwCn9dwo/s400/IMG_4965.JPG" width="400" /></a></div>
<br />
そしてこのキットで2つ感動した事その2。輪ゴムの使い道。中身の入ったペットボトルを用意して、フロントパネルを固定するのです。すごい。すごい。地味に凄い。というか配慮がすごい。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheWzIrj47MeMr6Yf8QCpuqscTowmqVEAlOLzBTMDTT-aG0SN0yrIZyIfvRB3TEn02ITUgCbU35os60fQhpKdkfGY8un7-4No7M1KjSWAeZb22i_kuV_LDXPWkk2ZdISlmfO5ijgBvmwS4/s1600/IMG_4966.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="768" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheWzIrj47MeMr6Yf8QCpuqscTowmqVEAlOLzBTMDTT-aG0SN0yrIZyIfvRB3TEn02ITUgCbU35os60fQhpKdkfGY8un7-4No7M1KjSWAeZb22i_kuV_LDXPWkk2ZdISlmfO5ijgBvmwS4/s400/IMG_4966.JPG" width="300" /></a></div>
<br />
後で頼んだ電池は取説が無くて、付属の両面テープをどう貼ったものかわからなかったのですが、元々どうなっていたかを参考に何とか貼り付けました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIe7SvE8xjrh2MOj2h093Me7xHawuscBXlsbBQ1s7rFMO94jx4y1_wd2hm_QNDGAO1CUuxwQzpEA3WM2E5keWeJPygPVDRN8jgaG4SnQZpHiwMWUFzpp-ggLu_7eJeSNYihBIgH-hBgo/s1600/IMG_4968.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIe7SvE8xjrh2MOj2h093Me7xHawuscBXlsbBQ1s7rFMO94jx4y1_wd2hm_QNDGAO1CUuxwQzpEA3WM2E5keWeJPygPVDRN8jgaG4SnQZpHiwMWUFzpp-ggLu_7eJeSNYihBIgH-hBgo/s400/IMG_4968.JPG" width="400" /></a></div>
<br />
両面テープにバッテリを固定する前に、マニュアルの通り、一度バッテリのコネクタをはめて電源が入るかチェックします。リンゴマーク出ました!(ホント良かった。この瞬間が一番心配)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpsDLhpLN6i2uQiheHHxMyyM_Pq4NJwao6W1S1h6tk_jVUAV1ZvNC1NMgd9uPoZl4_ZFxGyOXVqpxQUdyyHlTlhTOfMRYr1IuP75J3GKwUu3SyB38SYlMPUpRRe1ojPOz6MOVXUppXP8/s1600/IMG_4969.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpsDLhpLN6i2uQiheHHxMyyM_Pq4NJwao6W1S1h6tk_jVUAV1ZvNC1NMgd9uPoZl4_ZFxGyOXVqpxQUdyyHlTlhTOfMRYr1IuP75J3GKwUu3SyB38SYlMPUpRRe1ojPOz6MOVXUppXP8/s400/IMG_4969.JPG" width="400" /></a></div>
<br />
コネクタカバー(この写真の中心あたりのネジのついた金属の板)をネジ止めしました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3flQAqDgvfGNAzlOOU_kLb8xNe5n3yaghpXGCh95Jo-ja_Fk9qHlYGsu1MsK31qKeDslvWrhwd-bmK1HS-Qdy6bRq_ijjY53a5AddrenoRjDBWF8PLFXWFBAsiop2EuvaBju_FGWv6r8/s1600/IMG_4970.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3flQAqDgvfGNAzlOOU_kLb8xNe5n3yaghpXGCh95Jo-ja_Fk9qHlYGsu1MsK31qKeDslvWrhwd-bmK1HS-Qdy6bRq_ijjY53a5AddrenoRjDBWF8PLFXWFBAsiop2EuvaBju_FGWv6r8/s400/IMG_4970.JPG" width="400" /></a></div>
<br />
バッテリを両面テープで固定しつつ戻し、フロントパネルを戻します。フロントパネルの上の爪のようなものを本体にまず引っ掛けてから、手前に倒し、押し付ければハマります。心配なので、よく押しました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VGk92puH_8ZbdqIBhOAIs3zPgQurcAklv0bftJguk0B3gINfkEUk38kdNTQg7K1Y-qadeYlDBjkE4k6HoR0kjj43h02w8PTHxaGJeauUg_EyxoXwTtsXM9oir5ydwBcViRE9KryeHrI/s1600/IMG_4972.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VGk92puH_8ZbdqIBhOAIs3zPgQurcAklv0bftJguk0B3gINfkEUk38kdNTQg7K1Y-qadeYlDBjkE4k6HoR0kjj43h02w8PTHxaGJeauUg_EyxoXwTtsXM9oir5ydwBcViRE9KryeHrI/s400/IMG_4972.JPG" width="400" /></a></div>
<br />
そして、分解するときは、省略しましたが、底面にネジが2つあります。普通のプラスネジじゃありません。星型ネジってやつです。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeewBSFFQnxtFLJcMFxt5YK42AXLsaatPfqq8vDIdsKu2fBXKF3VcDHuRX6yD40QOV1w3CZTaTMyXvvCjTKnglSXrDUMXeYvOcSL4TYKkasN63n6abBgmOduyPYMDTFtBwIzEru8Nq7As/s1600/IMG_4973.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeewBSFFQnxtFLJcMFxt5YK42AXLsaatPfqq8vDIdsKu2fBXKF3VcDHuRX6yD40QOV1w3CZTaTMyXvvCjTKnglSXrDUMXeYvOcSL4TYKkasN63n6abBgmOduyPYMDTFtBwIzEru8Nq7As/s400/IMG_4973.JPG" width="400" /></a></div>
<br />
星型ドライバもキットには付属しています。それで締めて完成!<br />
(うわ、汚い机の周辺が写ってしまった。)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijv1k7-cDao7jkF-qYmQREUDvUf-WGjde4MXr3ZXVPg3W5PJbdzPABDlw6ryfXE1btC6U7fPeUicUIYmFHUMSa5IAvmdgzQ5MCDJ7w237bW2Bau4wenUQS_97wB1evt-nY4V4yuT74kaI/s1600/IMG_4980.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijv1k7-cDao7jkF-qYmQREUDvUf-WGjde4MXr3ZXVPg3W5PJbdzPABDlw6ryfXE1btC6U7fPeUicUIYmFHUMSa5IAvmdgzQ5MCDJ7w237bW2Bau4wenUQS_97wB1evt-nY4V4yuT74kaI/s400/IMG_4980.JPG" width="400" /></a></div>
<br />
起動確認。心配なのは、物理的なスイッチ。<br />
ホームボタン、音量ボタン、マナーモードのボタン。どれも動作しました。<br />
ブラウザも動作しましたよ。(そこまで来たら、そりゃブラウザとかアプリは動くだろう!)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBpyXeAh1LRdwl5SLMyqyFqJzW5ZrINZc0dHIePJvKlHwGsapRcAj5e0q_3y4CK-fQltDOzUaFworDCAdM_ecqwLAkGZGr3T38hJ_edSsiT-CXZTzN9RpeH8Gv9zFOCWt2rDdKMjFqevs/s1600/IMG_4981.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBpyXeAh1LRdwl5SLMyqyFqJzW5ZrINZc0dHIePJvKlHwGsapRcAj5e0q_3y4CK-fQltDOzUaFworDCAdM_ecqwLAkGZGr3T38hJ_edSsiT-CXZTzN9RpeH8Gv9zFOCWt2rDdKMjFqevs/s400/IMG_4981.JPG" width="400" /></a></div>
<br />
<br />
以上です。右が取り出した、古くなったiPhone5のバッテリ。真ん中が間違って買って使わなかった、5sのバッテリ。あーもったいない。オークションとかで売る?<br />
お金の問題ででは無くて(お金は大事だが)、使わないモノを買ってしまったのが辛いのです。だから、5sをお使いの方で、バッテリがヘタっている方、譲りますよ。ちなみに、5cと5seにも使えます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk8ZSVoHcJkM8nDXTB277-JrV8UZZGUywdehU9qzaWYRLSjv9NLQckjTPIRviMFCbIabdaYYVoREyEzQpdl_t9hFlvzHrYMBZx2GkS5H_O3-NJ4ETJD_JdfZrgJKZPmR4DJbOn38sNNn8/s1600/IMG_4982.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk8ZSVoHcJkM8nDXTB277-JrV8UZZGUywdehU9qzaWYRLSjv9NLQckjTPIRviMFCbIabdaYYVoREyEzQpdl_t9hFlvzHrYMBZx2GkS5H_O3-NJ4ETJD_JdfZrgJKZPmR4DJbOn38sNNn8/s400/IMG_4982.JPG" width="400" /></a></div>
<br />
要領は掴んだので、幸い私はフリーランスなので、iPhone電池交換サービスでも始めようとか思ったけど、そんな事を考える人は多いわけで、参入障壁が低すぎて、競合が多すぎる感じなので、知り合いに頼まれたとかじゃなければやめとこうと思います。<br />
<br />
これをIT系の記事と言っていいのかは不明ですが、まぁ間違いでは無いのかな?<br />
<br />
それでは。<br />
<br />KAZUMONhttp://www.blogger.com/profile/01862105149848051778noreply@blogger.com0tag:blogger.com,1999:blog-1288313914980139327.post-48287378756931161642012-12-07T13:00:00.000+09:002012-12-07T13:31:14.436+09:00サイト作成事例・空手道場<div class="separator" style="clear: both; text-align: left;">
今回が、このブログ最初の投稿になります。ご覧になられた方は、今後共よろしくお願い致します。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
今回は、当方が作成管理している「空手道場」のサイトの構造を紹介します。</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="" style="clear: both;">
作成といっても元々あったサイトの管理を依頼され、それをカスタマイズしました。<br />
(※該当道場のサイトはこちら→<a href="http://www.jka-nakahara.org/" target="_blank">http://www.jka-nakahara.org/</a>)<br />
<br /></div>
<div class="" style="clear: both;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAloe-KmH7wPjJcTzM0f3PUTwLEuTz_VLLrKu5vhzFl0JdLfAuyuWZ33QlnRq6UMgplDAaPBBL8gKZzgdUJhRrS9T57ltOl5aCK_0ihVzilB3oVbH3PCTVvbIXZCtEe_bzXIZkJPVWTx0/s1600/1-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAloe-KmH7wPjJcTzM0f3PUTwLEuTz_VLLrKu5vhzFl0JdLfAuyuWZ33QlnRq6UMgplDAaPBBL8gKZzgdUJhRrS9T57ltOl5aCK_0ihVzilB3oVbH3PCTVvbIXZCtEe_bzXIZkJPVWTx0/s1600/1-1.jpg" height="319" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
見た目はご覧のとおり、デザイナさんに頼んだわけでもありませんので、非常にシンプルで普通なサイトなのですが、実は中身は、あまり手間とお金を掛けず、できる限りの機能を盛り込んでいます。</div>
<div class="" style="clear: both;">
つまりは、<b>「見た目の割に中身はちょっとすごいんです」</b>ということなのです。</div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
基本的には、<b>「なるべくプログラムを組まないで、なるべく機能は流用して使用する」</b>というコンセプトで、作成されています。ですから、現状はサーバ側のプログラムは無く(※)、HTML5とCSS3、若干のJavascriptと、Googleのリソース(API)を利用しています。</div>
(※必要があれば、いずれサーバサイドのプログラムも作成するかも知れません。)<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
流用がそんなに凄いことかといえば、確かに凄いことでは無いのですが、当方からすると一つの挑戦だったのです。それは末尾に書きます。</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
まず、このサイトはスマフォに対応しております。CSS3の技術(Media Queries)を使い、画面のサイズに応じて、配置や大きさを調整するようになっています。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ブラウザの幅をマウスでドラッグして、小さくしてみましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
私は普段使っていないのですが、一般的な例として、今でも比較的にメジャーなIEをあえて使います。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ZK6f8obQZezCpdEn-MqnhvUWxLoUcOUYsEEE1BWN3I3CeRKOsi5OUa3FLCY7-3cOOpwtW5kYTr3bhTapiogv91knWtlsci9HsD42NmyuOPCqAL-dPCyfn7DiL7bOAfxGpjD0JyDAhho/s1600/1-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ZK6f8obQZezCpdEn-MqnhvUWxLoUcOUYsEEE1BWN3I3CeRKOsi5OUa3FLCY7-3cOOpwtW5kYTr3bhTapiogv91knWtlsci9HsD42NmyuOPCqAL-dPCyfn7DiL7bOAfxGpjD0JyDAhho/s1600/1-2.jpg" height="320" width="240" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
それに合わせて、内部のボックスもバランスを保ったまま縮小されます。</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
さらに幅を狭くしてみます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7NuvR9x9tAdgWoCj9oiDMm_TkKHpVAUJMiu-P7fkk1Luh4lh4aJ1G3rnRM8J3aRDtyTFzcsynnDkb9Ory7nSnQ8mTlsi5eE628huKsDkLOxnj3A2phlYmpJ4PeBMYXUeYEU8UzXzcfs/s1600/1-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7NuvR9x9tAdgWoCj9oiDMm_TkKHpVAUJMiu-P7fkk1Luh4lh4aJ1G3rnRM8J3aRDtyTFzcsynnDkb9Ory7nSnQ8mTlsi5eE628huKsDkLOxnj3A2phlYmpJ4PeBMYXUeYEU8UzXzcfs/s1600/1-3.jpg" height="320" width="152" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
流石にもう幅が狭いので、自動的にページ内の各ボックスを縦に配置します。スマフォや携帯の画面は、専用の画面を作成するわけでは無く、このように横幅で判断して調整しています。<br />
<br />
スマフォで見るとこんな感じです。これは私のスマフォの写真です。横幅が狭いので、それに合わせて配置されます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJc2IWsk_yo0-ZxorZYRIezuq2YeHOF7JjPd85NnomU_4C2y_jPGMkGoKESdxXYxdkEi8uEVmx7UkUBXkUnKk8eyoXEgt2USeY32wM9NTxqbwij0TWaJBBXEkfZxK1KfFYFE2MLXluS-M/s1600/1-4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJc2IWsk_yo0-ZxorZYRIezuq2YeHOF7JjPd85NnomU_4C2y_jPGMkGoKESdxXYxdkEi8uEVmx7UkUBXkUnKk8eyoXEgt2USeY32wM9NTxqbwij0TWaJBBXEkfZxK1KfFYFE2MLXluS-M/s1600/1-4.JPG" height="320" width="252" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
さて、トップ画面に戻りましょう。<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
各コンテンツは、Googleさんの技術をふんだんに利用しています。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyOuzSAdeDcAtua6UuGoHquAVMBDsHz0UqwY8j_WK-G4l62v_58Pz6aOleU6k5eHbh39ICu-O-vJ0a9KxbJW7SrV64Pw-iNPYUgxnRP2VPuitCwESQLjii6QYJndXEI0LMEwrkaAu1WpE/s1600/1-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyOuzSAdeDcAtua6UuGoHquAVMBDsHz0UqwY8j_WK-G4l62v_58Pz6aOleU6k5eHbh39ICu-O-vJ0a9KxbJW7SrV64Pw-iNPYUgxnRP2VPuitCwESQLjii6QYJndXEI0LMEwrkaAu1WpE/s1600/1-1.jpg" height="319" width="320" /></a></div>
中央のクリーム色の右側(サイドバー?)に、リンクリストがあります。<br />
これは、この空手道場の代表の方の作成されているブログと、この道場の活動記録ブログの最新記事5件のリンクがそれぞれ表示されています。<br />
RSSリーダを使っていますので、ブログが更新されれば、自動的にココも更新されます。<br />
<br />
さらに、下の方にある水色の部分。これは「お知らせ」の概要が書いてあります。<br />
当初は、更新の度にHTMLを編集し、FTPでサイトにアップしていたのですが、現在は「Googleドキュメント」の文書(のアクセス用リンク)をここに貼り付けてあります。<br />
<br />
次の画像は、そのGoogleドライブの「文書」というワープロ機能なのですが、<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
ここで作成した内容がそのまま、トップページの下部に表示されます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5g3XYOQzXW7JoSuzi2ZdlBGYVameZL9o4L4lJ_aFdPeiD648kc4WIED46Pr3Y7kl-HG6iHEwxgo3YE1nh07AVrXr1Dt9n66HYKfhn0BxQrLE9U77tRjUQpmgq74BAlbkD0BsSbVbB31A/s1600/1-7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5g3XYOQzXW7JoSuzi2ZdlBGYVameZL9o4L4lJ_aFdPeiD648kc4WIED46Pr3Y7kl-HG6iHEwxgo3YE1nh07AVrXr1Dt9n66HYKfhn0BxQrLE9U77tRjUQpmgq74BAlbkD0BsSbVbB31A/s1600/1-7.jpg" height="202" width="320" /></a></div>
<br />
ここを編集すると、ほぼリアルタイムにサイトの方も表示も更新されるので、手間がかからないだけでなく、緊急連絡もしやすいわけです。(リアルタイム過ぎて、編集中でも反映されてしまうところが、長文を書く場合など、少し不都合ですが、そういう場合はテキストエディタなどなどで作成してから張り付ければ良いわけです。)<br />
<br />
背景色も反映されます。Googleドライブで作成した文書の背景を水色にしているので、サイトにも水色で表示されているわけです。<br />
<br />
「Googleドキュメント」は、Googleのクラウドなサービスの一つなのですが、ブラウザで文書や図形、表計算やプレゼンと言った所謂「オフィス」なソフトを使うことが出来て、ファイルはそのgoogleドライブに保存されて、出先のPCやスマフォなどから、場所を問わずアクセスできるというものです。<br />
この画面は、その「文書」の編集画面で、ワープロソフトのひと通りの機能を揃えていて、しかもとても軽いところが魅力です。<br />
専用のソフト以外の画像や、その他のファイルも保存することが出来ます。<br />
しかもWindowsなどPC用の専用ソフトを使えば、ファイルエクスプローラから保存されているファイルにアクセスする事ができます。<br />
しかも利用料は、5GBまでは無料で、さらに、搭載されているソフトで作成したファイルなら上限無しです。(2012年12月現在)<br />
グーグルドライブについては→<a href="https://www.google.com/intl/ja/drive/start/index.html" target="_blank">こちら</a><br />
<br />
<br />
さて、別な画面にいきましょう。<br />
道場の「活動記録」のページです。<br />
ここには、TOP画面同様、RSSリーダを使い、Blogger(グーグルが運営しているブログ)にある内容をまるごと表示しています。RSSリーダなので、別にBlogger以外のブログサービスでも、基本的これはできます。私がたまたまBloggerを利用しただけです。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatvhSTZ2M17oZ7e3FFbjnrdwR_McVNVhwS5wtg5KVBWI6Ap4TILzP5Zgckb-mifbNrAZjARX-rjtWivB78wHMfkEDvixyAhm8ZCwRHv8KJD_Vi_z74sE0PByNfLYne5zyazruT_pMLzA/s1600/1-5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatvhSTZ2M17oZ7e3FFbjnrdwR_McVNVhwS5wtg5KVBWI6Ap4TILzP5Zgckb-mifbNrAZjARX-rjtWivB78wHMfkEDvixyAhm8ZCwRHv8KJD_Vi_z74sE0PByNfLYne5zyazruT_pMLzA/s1600/1-5.jpg" height="320" width="316" /></a></div>
<br />
ただ、一つのページに際限なくブログが表示されたら、ブログの内容が増えると大変重くなってしまいます。ここは少しJavascriptのプログラムをいじって、先頭5件だけ表示し、それ以降はブログへのリンクという形で表示しています。<br />
<br />
<br />
そして、これが大本のブログのページです。ここの内容を、道場のサイトに表示させているのです。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii5lSAkBOWZZJXOaqTFdiNWut9XIFvI7cA_Ogoove7mknQDVH9yNEWOvwmrtecD-w2z6_2m5kSK42BegrP1JMrGCHz7Hp5zLNbhtgGzcO5NxUHSR9UozQ32NbvlCeZb3O2orpTVLn4PZY/s1600/1-6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii5lSAkBOWZZJXOaqTFdiNWut9XIFvI7cA_Ogoove7mknQDVH9yNEWOvwmrtecD-w2z6_2m5kSK42BegrP1JMrGCHz7Hp5zLNbhtgGzcO5NxUHSR9UozQ32NbvlCeZb3O2orpTVLn4PZY/s1600/1-6.jpg" height="320" width="317" /></a></div>
<br />
<br />
続きましては、入会案内のページにある道場の地図です。<br />
これは、Google Mapを利用しています。<br />
学校の武道場や、市の施設を利用していますので、会場として使う場所にマーカーをつけました。マーカーにマウスを乗せると、説明も出ます。<br />
このマーカーは、かなり頑張って、正確な緯度と経度でマークしました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BPSb5SFG1nsSYM-2yt15MD2M8LI8_0M6KyK7d6Ie1VNW2bHCzn2hRV2nguFPoZoIreJK732zRpNa4xsiSBnQOYmN4lnmDdv0wPSMKl67EWXOZC0uWM6Vsl_LRCybbKP2aUBtLcGUhZ8/s1600/1-8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BPSb5SFG1nsSYM-2yt15MD2M8LI8_0M6KyK7d6Ie1VNW2bHCzn2hRV2nguFPoZoIreJK732zRpNa4xsiSBnQOYmN4lnmDdv0wPSMKl67EWXOZC0uWM6Vsl_LRCybbKP2aUBtLcGUhZ8/s1600/1-8.jpg" height="220" width="320" /></a></div>
<br />
Google Mapなので、私の意志や能力、実績とは関係なくストリートモードにすることもできます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMg5Oa-UEA_naxmxf6Q5qrGdcgk8Dkzi5h_eXSukNywXFmCG2SUQBOChu_CoqioOJzIvWv2M1C2GS36gUVi9oea4GbSFdfZO30SfTTJXMqub_JoLs10Hbw7PToRxL0R7gN9jjI2l9-zA/s1600/1-9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMg5Oa-UEA_naxmxf6Q5qrGdcgk8Dkzi5h_eXSukNywXFmCG2SUQBOChu_CoqioOJzIvWv2M1C2GS36gUVi9oea4GbSFdfZO30SfTTJXMqub_JoLs10Hbw7PToRxL0R7gN9jjI2l9-zA/s1600/1-9.jpg" height="213" width="320" /></a></div>
<br />
次にスケジュールのページです。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Wz8kwfok7e1H0c1VzBFa08aZEIyRF51IvoaimrQfgp0d4OiGBTJ4Mh_71Az0lvH16zTkwDNlW2BG1ZJzJESLfZrwb0IRi5FXXfsI1ovbkq_RrlBjWL_Whs-FfQDEBuxABvxWE7LXDvo/s1600/1-10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Wz8kwfok7e1H0c1VzBFa08aZEIyRF51IvoaimrQfgp0d4OiGBTJ4Mh_71Az0lvH16zTkwDNlW2BG1ZJzJESLfZrwb0IRi5FXXfsI1ovbkq_RrlBjWL_Whs-FfQDEBuxABvxWE7LXDvo/s1600/1-10.jpg" height="320" width="316" /></a></div>
上の方の薄緑色の部分は、例によって、グーグルドライブの文書を貼り付けてあります。トップ画面のとは別な文書です。トップ画面の内容の詳細が書かれています。これもリアルタイムに更新できます。<br />
<br />
その下には、カレンダがあります。これもGoogleのカレンダを貼り付けました。このカレンダー機能は、ひとつのカレンダーの中に、いくつかのカテゴリのカレンダを持つ事ができます。<br />
私自身のカレンダに、道場のカテゴリでカレンダを作成して、そのカテゴリのカレンダーだけを、サイトに貼り付けています。これもいつでも編集できて、すぐに反映されるので、とても便利な状態になっています。<br />
<br />
<br />
次に問い合わせのメールを送る画面です。<br />
Mailtoを使うとあまりよろしくない(※)ので、このように入力フォームを置くわけです。流石にコレぐらいは自作しようと思いましたが、やはり「あるものを使おう」これも伝統的な”POST MAIL”という、Perlで作成されたCGIを利用しています。<br />
<a href="https://www.google.com/intl/ja/drive/start/index.html" target="_blank">POSTMAILのサイト</a><br />
<br />
(※ 言うまでも無い話ですが、WEBページ内にメールアドレスを、半角英数字で原文通りに記述すると、それを自動収集され、悪徳業者などより、困ったメールが大量に届く事になります。)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzK9ABWjJy0KvKUAhro7RAHMKLSsn84bwnm7oBexbbQQT-ESB9huGcVqtvCvN0F2F5WrtxUH3Fgvq2UuV8Mi953Ck-OVIoftfl-1X0nto5F5osdLovkSofIhTMkGgqOkAdaqLaA7S_Wis/s1600/1-11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzK9ABWjJy0KvKUAhro7RAHMKLSsn84bwnm7oBexbbQQT-ESB9huGcVqtvCvN0F2F5WrtxUH3Fgvq2UuV8Mi953Ck-OVIoftfl-1X0nto5F5osdLovkSofIhTMkGgqOkAdaqLaA7S_Wis/s1600/1-11.jpg" height="320" width="283" /></a></div>
<br />
<br />
拡張計画としては、イベント登録と出欠管理みたいな機能を搭載してみたいとは思っています。<br />
<br />
<br />
終わりに、<br />
当方は日本的表現で言うと、SEなので、ウェッブサイトを作れ(※)と言われれば、ガリガリ、サーバサイドとかに、プログラムを組みたくなりますし、それを改めようとも思わないのですが、世の中には大変便利なアプリケーションや、パーツがあります。種類も内容も多岐に渡り、複雑さを増しています。一人で出来る事の限界も感じます。それを解消するには、人を増やすか、既存のものの再利用という手段を取ることになるかとも思い、今回はそれらを最大限に利用するという試みで作成してみました。<br />
(※ 偉そうな事を書いていますが、当方の得意技はアプリケーションで、WEB関連が一番ではありません。)<br />
<br />
ちなみにこのケースの場合「どんだけGoogleが好きなんじゃ!!」という感じの内容になってしまいましたが、特にアフリエイトとか、宣伝とかではありません。確かに現状はGoogleさんのやり方は好きではあります。<br />
<br />
それでは、今後も、いろいろなテーマで、IT関連の雑記を書いて行こうとおもっていますのでよろしくお願い致します。<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />KAZUMONhttp://www.blogger.com/profile/01862105149848051778noreply@blogger.com2