tag:blogger.com,1999:blog-10586976076439027192024-03-05T17:31:20.468+09:00AXY 備忘録的 技術と雑記AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.comBlogger51125tag:blogger.com,1999:blog-1058697607643902719.post-50054645277580211912018-05-14T17:39:00.000+09:002018-05-14T17:39:00.262+09:00AWSに手を出してフレームワークも使ってみたが・・・。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 0;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">サイトを作り直しました。</h1>
<div class="MYtemp-plain">
<p>AWS上に構築した<a href="http://ec2-52-193-89-69.ap-northeast-1.compute.amazonaws.com/">Content created by AXY</a>を作り直しました。<p>
<p>具体的にはbottle.pyを使ったpythonで構築したサイトからPHP7を使用したサイトに再構築しています。</br>
特別何か問題点があったというわけではないのですが、
<ul>
<li>bottleなどフレームワークを使う必要をしているのか?</li>
<li>Web系で攻めたいならPHPは触れた方がいいのでは?</li>
</ul>
の2点で改築を決行しました。
</p>
<p>
旧ページを残したまま、新ページを移設する経験はできたのはよかったかなと、</br>
(このサイトをそんなに頻繁に見てもらえているわけではないですが・・・。)
</p>
</div>
</section>AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-24734886030192495222018-05-06T15:04:00.001+09:002018-05-06T15:04:48.785+09:00Windows10April 2018 Updateのセキュリティの質問一覧<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
セキュリティの質問が増えてます。</h1>
<div class="MYtemp-plain">
Windows10April 2018 Updateからセットアップ時に<br />
「セキュリティの質問」という項目が増えました。<br />
iOSのアカウント作成みたいな感じです。<br />
備忘録的に質問の一覧を残しておきます。</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2">
セキュリティの質問一覧</h2>
<div class="MYtemp-plain">
以下6つの中から3つ選んで設定する<br />
<ul class="MYtemp-ul">
<li lass="MYtemp-li">最初のペットの名前は?</li>
<li lass="MYtemp-li">生まれた場所の名前は?</li>
<li lass="MYtemp-li">子供のころのニックネームは?</li>
<li lass="MYtemp-li">両親が出会った町の名前は?</li>
<li lass="MYtemp-li">いちばん年上のいとこの名前は?</li>
<li lass="MYtemp-li">初めて通った学校の名前は?</li>
</ul>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
Windows10April 2018 Updateでまたいろいろと変わってしまったようです。<br />
使いやすくなってくれるのはいいことなので歓迎なのだけど、<br />
もう少しどうにかならないかってなところもありますね。<br />
<br />
以上</div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-5615210642606569492018-05-02T23:32:00.000+09:002018-05-02T23:32:53.577+09:00Windows10April2018Update(ver1803)のプリインストールアプリの削除について<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 1px solid #AAAAAA;
padding: 5px;
border-collapse: collapse;
}
td.MYtemp-td{
border: 1px solid #AAAAAA;
font-family: Consolas;
font-size: 16px;
padding: 3px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">Windows10 April 2018 Updateがきました</h1>
<div class="MYtemp-plain">
<p>Windows10 April 2018 Updateがやってきました。</p>
<p>今回は公開が遅れたりといろいろあったようですが、<br>
今回も以前の投稿同様速報的に、
Windows10 April 2018 Updateのプリインストールアプリの削除可否をレポートします。</p>
</div>
</section>
<a name='more'></a>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#procedure">手順</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#result">結果</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="procedure">手順</h2>
<div class="MYtemp-plain">
以前の投稿に手順がまとまっているので、そちらを参照お願いします。
<a href="https://axy-memorandumanddiary.blogspot.jp/2017/05/windows10creators-updatever1703.html">Windows10Creators Update(ver1703)のプリインストールアプリの削除について</a>
</div>
</section><section class="MYtemp-section">
<h2 class="MYtemp-h2" id="result">結果</h2>
<div class="MYtemp-plain">
アプリの削除結果は以下の通りでした。
<table class="MYtemp-table" cellspacing="0">
<tbody class="MYtemp-tbody">
<tr><td class="MYtemp-td">アプリ名称</td><td class="MYtemp-td">結果</td><tr>
<tr><td class="MYtemp-td">1527c705-839a-4832-9118-54d4Bd6a0c89</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">828B5831.HiddenCityMysteryofShadows</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">89006A2E.AutodeskSketchBook</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">A278AB0D.MarchofEmpires</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">c5e2524a-ea46-4f67-841f-6a9465d9d515</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">DolbyLaboratories.DolbyAccess</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">E2A4F912-2574-4A75-9BB0-0D023378592B</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">F46D4000-FD22-4DB4-AC8E-4E1DDDE828FE</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">InputApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">king.com.BubbleWitch3Saga</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">king.com.CandyCrushSodaSaga</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.AAD.BrokerPlugin</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.AccountsControl</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Advertising.Xaml</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Advertising.Xaml</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.AsyncTextService</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.BingNews</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.BingWeather</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.BioEnrollment</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.CredDialogHost</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.DesktopAppInstaller</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.ECApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.GetHelp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Getstarted</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.LockApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Messaging</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Microsoft3DViewer</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.MicrosoftEdge</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.MicrosoftEdgeDevToolsClient</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.MicrosoftOfficeHub</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.MicrosoftSolitaireCollection</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.MicrosoftStickyNotes</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.MSPaint</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Framework.1.6</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Framework.1.6</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Framework.1.7</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Framework.1.7</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Runtime.1.6</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Runtime.1.6</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Runtime.1.7</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.NET.Native.Runtime.1.7</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Office.OneNote</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.OneConnect</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.People</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.PPIProjection</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Print3D</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Services.Store.Engagement</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Services.Store.Engagement</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.SkypeApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.StorePurchaseApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.VCLibs.120.00</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.VCLibs.120.00</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.VCLibs.140.00</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.VCLibs.140.00</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.VCLibs.140.00.UWPDesktop</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.VCLibs.140.00.UWPDesktop</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Wallet</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WebMediaExtensions</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Win32WebViewHost</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.Apprep.ChxApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.AssignedAccessLockApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.CapturePicker</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.CloudExperienceHost</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.ContentDeliveryManager</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.Cortana</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.HolographicFirstRun</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.OOBENetworkCaptivePortal</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.OOBENetworkConnectionFlow</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.ParentalControls</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.PeopleExperienceHost</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.Photos</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.PinningConfirmationDialog</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.SecHealthUI</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.SecureAssessmentBrowser</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Windows.ShellExperienceHost</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WindowsAlarms</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WindowsCalculator</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WindowsCamera</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">microsoft.windowscommunicationsapps</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WindowsFeedbackHub</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WindowsMaps</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WindowsSoundRecorder</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.WindowsStore</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.Xbox.TCUI</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.XboxApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.XboxGameCallableUI</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Microsoft.XboxGameOverlay</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.XboxGamingOverlay</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.XboxIdentityProvider</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.XboxSpeechToTextOverlay</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.ZuneMusic</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Microsoft.ZuneVideo</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td">Windows.CBSPreview</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">windows.immersivecontrolpanel</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td">Windows.PrintDialog</td><td class="MYtemp-td">不可</td><tr>
</tbody>
</table>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
<p>数字列だけで定義されたアプリが消えていないですが<br>
どのアプリのことかわかりませんね。システム上の必須アプリでしょうか?</p>
<p>相変わらず「Mixed Reality」は消えませんね。<br>
ハードウェア要件を満たさないなら使わないんですけどね。<br>
microsoftはMRを推してるんだなぁって感じです。</p>
<br>
実行は自己責任でお願いします。<br>
以上<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-87244130955526304652018-03-11T18:36:00.000+09:002018-05-14T17:42:56.196+09:00SVGで印鑑作ってみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 0;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
SVGで印鑑ポイ画像ツール</h1>
<div class="MYtemp-plain">
を公開してから一か月ぐらいたってしましました。<br />
本体はこちら<a href="http://ec2-52-193-89-69.ap-northeast-1.compute.amazonaws.com/pagesvgseal.php">Seal editer made with SVG</a>です。<br />
<br />
そろそろ何を作ったのか解説したいところです。<br />
それでは本編です。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
SVGを利用して、丸で囲まれた印鑑みたいな画像を作る。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
(本番サイトはbootstrap導入用になっていて掲載に向かないので、修正済みのものです。)
<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">test023-SVGで印鑑っぽいの</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">charset</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"utf-8"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">style</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">.waku</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">relative</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">solid</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">#000000</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">.day</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">bottom</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">39px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#000000</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">.inkan</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">z-index</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">.box</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">float</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">left</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">.deg</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">300px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">style</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onload</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"startup()"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">src</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"http://d3js.org/d3.v3.js"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">inkan</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">w</span><span style="color: #d4d4d4;"> = </span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">h</span><span style="color: #d4d4d4;"> = </span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">svg</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">// 50x50のsvg領域を作る</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">startup</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> () {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">svg</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">d3</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">select</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"#inkanarea"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"svg"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"width"</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">w</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"height"</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">h</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"xmlns"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">makeinkan</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">inputelid</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">alertmsgid</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">inputdegid</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">collback</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> () {</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputelid</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">inputdeg</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputdegid</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">d3</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">select</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"#name"</span><span style="color: #d4d4d4;">).</span><span style="color: #dcdcaa;">remove</span><span style="color: #d4d4d4;">();</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;"> > </span><span style="color: #b5cea8;">4</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">alertmsgid</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">innerText</span><span style="color: #d4d4d4;"> =</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"4文字以内での入力をお願いします"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> } </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;"> > </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">alertmsgid</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">innerText</span><span style="color: #d4d4d4;"> = </span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">inkan</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">svg</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"g"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"transform"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"translate(0.75,0.75) rotate("</span><span style="color: #d4d4d4;"> +</span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">inputdeg</span><span style="color: #d4d4d4;"> +</span><span style="color: #ce9178;">",100,100)"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"id"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"name"</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">inkan</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"circle"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"cx"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"cy"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"stroke"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"#FF0000"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"stroke-width"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"5"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"r"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"90"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"fill-opacity"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"stroke-opacity"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"0.7"</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">inkan</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"g"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text-anchor"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"middle"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"fill"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"#FF0000"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"fill-opacity"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"0.7"</span><span style="color: #d4d4d4;">)</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;"> == </span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"font-size"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"150"</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"155"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;"> == </span><span style="color: #b5cea8;">2</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"font-size"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"95"</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"95"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"175"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">]);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;"> == </span><span style="color: #b5cea8;">3</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"font-size"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"65"</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"70"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"130"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">]);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"185"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">2</span><span style="color: #d4d4d4;">]);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;"> == </span><span style="color: #b5cea8;">4</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"font-size"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"75"</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"132"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"91"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"132"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"161"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">]);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"67"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"91"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">2</span><span style="color: #d4d4d4;">]);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">append</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"67"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">attr</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"161"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> .</span><span style="color: #dcdcaa;">text</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">inputtext</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">3</span><span style="color: #d4d4d4;">]);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フォーカスが文字入力か角度入力の時再度呼び出しする。</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">activeElement</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;"> == </span><span style="color: #9cdcfe;">inputelid</span><span style="color: #d4d4d4;"> ||</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">activeElement</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;"> == </span><span style="color: #9cdcfe;">inputdegid</span><span style="color: #d4d4d4;">) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">collback</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">10</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">collback</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">10</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;">印鑑っぽいものエディター</span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"box"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span><span style="color: #d4d4d4;">お名前を入力してください:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"nameinput"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onfocus</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"makeinkan('nameinput','alertmsg','deg')"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">span</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"alertmsg"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span><span style="color: #d4d4d4;">回転角度をスライダで入力してください[-180~180]:</span><span style="color: grey;"><</span><span style="color: #569cd6;">br</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"range"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"deg"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"deg"</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #9cdcfe;"> </span><span style="color: #9cdcfe;">min</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"-180"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">max</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"180"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">step</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"5"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"-20"</span><br />
<span style="color: #ce9178;"> </span><span style="color: #9cdcfe;">onchange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"makeinkan('nameinput','alertmsg','deg')"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"box"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"waku"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"inkanarea"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"inkan"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </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;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="MYtemp-plain">
<a href="http://ec2-52-193-89-69.ap-northeast-1.compute.amazonaws.com/pagesvgseal.php">Seal editer made with SVG</a>を触ってもらえるとわかりやすいのですが、<br />
「田中」さんの場合以下のようになります。
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByEv35QRR1-1A5DsrdjgIHn9lAaHoJPTzwdPSXsZAbGoysOR4GaRwblV8CUyuWvnAY6j34bYLlPaS3kakjedXMS3HxwzT6yBHXpjksxkAc71sxwgloZjpy7Qydl2k5SnUFT3zzPgshdRs/s1600/2018-03-11+16_39_10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="250" data-original-width="647" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByEv35QRR1-1A5DsrdjgIHn9lAaHoJPTzwdPSXsZAbGoysOR4GaRwblV8CUyuWvnAY6j34bYLlPaS3kakjedXMS3HxwzT6yBHXpjksxkAc71sxwgloZjpy7Qydl2k5SnUFT3zzPgshdRs/s400/2018-03-11+16_39_10.jpg" width="400" /></a></div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">
ポイント!</h2>
<div class="MYtemp-plain">
<ul class="MYtemp-ul">
<li class="MYtemp-li">
SVGで画像を作り直しするときは3.select([要素id]).remeve()を使うこと<br />
これをしないと書き換えができません。どんどん上書きされます。<br />
今回は全体を消してますが、部分書き換えを行いたいなら、その要素にidを割り当てておくことが必要ですね。
</li>
<li class="MYtemp-li">
太さ5の線で円を描くために、親要素で基準点をtranslate(-2.5,-2.5)に設定して、修正しています。<br />
SVGでの太さ指定って、基準点から広がるように指定されているようで、<br />
正方形に円を描くと、X軸+方向Y軸+方向の右下にずれてしまうので、修正しています。<br />
</li>
</ul>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
今回はSVGで印鑑画像を作成しました。<br />
本番のサイトではダウンロード機能も付けているので、使ってもらえるとうれしいです。<br />
<br />
今回の反省としては、対応文字数が4文字までで、
文字の配置位置をハードコーディングになっていること。<br />
SVG内での接触判定して調整機能作ればいけるのだろうか?
<br />
ここまででとりあえず、D3.jsでの書き換えだったりの使い方はわかったので、<br />
次はD3.jsを使ってグラフを描きたいところ。<br />
ただ制作物として公開する価値あるグラフってなんだろう?・・・。<br />
<br />
ご利用は自己責任で!<br />
少しでもお役にたてれば幸いです。</div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-40137779519866391582018-02-13T00:04:00.000+09:002018-05-14T17:41:47.086+09:00制作物<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 0;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">SVGで印鑑画像を作るツールを公開しました。</h1>
<div class="MYtemp-plain">
</div>
</section>
SVGで印鑑のように赤丸で囲んだ文字の画像を作るツール<br>
<a href="http://ec2-52-193-89-69.ap-northeast-1.compute.amazonaws.com/pagesvgseal.php">Seal editer made with SVG</a>を公開しました。<br>
<br>
制作上の解説は後日ですね。
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-86030645598477696442018-01-21T03:28:00.001+09:002018-05-14T17:41:03.940+09:00SVGを触ってみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 0;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
今回はSVGを触ってみます。</h1>
<div class="MYtemp-plain">
<a href="http://ec2-52-193-89-69.ap-northeast-1.compute.amazonaws.com">Content created by AXY </a>のほうで<br />
グラフを書きたいと思ってD3.dsを触りながらDOMの書き換えで「なにこれ便利ー」って思ってたんだけど、<br>
SVGでグラフ書くとこでちょっと引っかかったのでした。<br>
そんなわけで、SVGを直接書いてみようという訓練をしてみました。<br>
<br>
それでは本編。<br>
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
SVGで国旗を描いてみよう。<br />
ただし、寸法的に正確であるのか不安な感じなので、あくまでポイものとします。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
<div>
<div>
日本 ポイもの
</div>
<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="310" height="210" fill="#999999" />
<g transform="translate(5,5)">
<rect x="0" y="0" width="300" height="200" fill="#FFFFFF" />
<circle cx="150" cy="100" r="60" fill="#FF0000" />
</g>
</svg>
<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><</span><span style="color: #569cd6;">svg</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlns</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span><span style="color: grey;">></span></span></span></span><br />
<span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"610"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"400"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#999999"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></span></span></span><br />
<span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"> <</span><span style="color: #569cd6;">g</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"translate(5,5)"</span><span style="color: grey;">></span></span></span></span></span><br />
<span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"> <span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"300"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#FFFFFF"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></span></span></span></span></span></span></span></span></span></span><br />
<span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">circle</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">cx</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"150"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">cy</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">r</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"60"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#FF0000"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></span></span></span></span></span></span><br />
<span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: #d4d4d4;"> </span></</span><span style="color: #569cd6;">g</span><span style="color: grey;">></span></span></span></span></span></span></span></span><br />
<span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"><span style="color: grey;"></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></span></span></span></span></span></span></span></span></td>
</tr>
</tbody>
</table>
</div>
<div>
<div>
アイルランド ポイもの
</div>
<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="310" height="210" fill="#999999" />
<g transform="translate(5,5)">
<rect x="0" y="0" width="100" height="200" fill="#169b62" />
<rect x="100" y="0" width="100" height="200" fill="#FFFFFF" />
<rect x="200" y="0" width="100" height="200" fill="#ff8832" />
</g>
</svg>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">svg</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlns</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#999999"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">g</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"translate(5,5)"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#169b62"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#FFFFFF"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"100"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#ff8832"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">g</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div>
クウェート ポイもの
</div>
<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="310" height="210" fill="#999999" />
<g transform="translate(5,5)">
<rect x="0" y="0" width="300" height="67" fill="#308060" />
<rect x="0" y="67" width="300" height="67" fill="#FFFFFF" />
<rect x="0" y="133" width="300" height="67" fill="rgb(200,0,0)" />
<polygon points="0,0 60,67 60,133 0,200" fill="#000000" />
</g>
</svg>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div >
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">svg</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlns</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#999999"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">g</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"translate(5,5)"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"300"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"67"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#308060"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"67"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"300"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"67"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#FFFFFF"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"133"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"300"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"67"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"rgb(200,0,0)"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">polygon</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">points</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0,0 60,67 60,133 0,200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#000000"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> </</span><span style="color: #569cd6;">g</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div>
コンゴ ポイもの
</div>
<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="310" height="210" fill="#999999" />
<g transform="translate(5,5)">
<polygon points="0,0 200,0 0,200" fill="#30a060" />
<polygon points="200,0 0,200 100,200 300,0" fill="#EFEF00" />
<polygon points="300,0 100,200 300,200" fill="#FF0000" />
</g>
</svg>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">svg</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlns</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#999999"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">g</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"translate(5,5)"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">polygon</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">points</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0,0 200,0 0,200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#30a060"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">polygon</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">points</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"200,0 0,200 100,200 300,0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#EFEF00"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">polygon</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">points</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"300,0 100,200 300,200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#FF0000"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"> </</span><span style="color: #569cd6;">g</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div>
ベトナム ポイもの
</div>
<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="310" height="210" fill="#999999" />
<g transform="translate(5,5)">
<rect x="0" y="0" width="300" height="200" fill="#DD0000" />
<g transform="translate(150,100) rotate(36 0 0)">
<polygon points="
0,50 11.75,16.18 47.55,15.45 19.02,-6.18
29.38,-40.45 0.34,-19.99 -29.38,-40.45
-19.02,-6.18 -47.55,15.45 -11.75,16.18 -0.87,49.99" fill="#FFFF00" />
</g>
</g>
</svg>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">svg</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlns</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"> <</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"310"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"210"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#999999"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"><span style="color: #d4d4d4;"> </span><</span><span style="color: #569cd6;">g</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"translate(5,5)"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><span style="color: #d4d4d4;"> </span><</span><span style="color: #569cd6;">rect</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">x</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">y</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"300"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"200"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#DD0000"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">g</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"translate(150,100) rotate(36 0 0)"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><span style="color: #d4d4d4;"> </span><</span><span style="color: #569cd6;">polygon</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">points</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"</span></div>
<div>
<span style="color: #ce9178;"> 0,50 11.75,16.18 47.55,15.45 19.02,-6.18 </span></div>
<div>
<span style="color: #ce9178;"> 29.38,-40.45 0.34,-19.99 -29.38,-40.45</span></div>
<div>
<span style="color: #ce9178;"> -19.02,-6.18 -47.55,15.45 -11.75,16.18 -0.87,49.99"</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">fill</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"#FFFF00"</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">g</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><span style="color: #d4d4d4;"> </span></</span><span style="color: #569cd6;">g</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">ポイント!</h2>
<div class="MYtemp-plain">
基本事項なんでしょうが、最低限以下は覚える必要がありそう。
<ul class="MYtemp-ul" >
<li class="MYtemp-li" >
rect,circle,g,polygonのタグ。そして今回は使わなかったlineタグ。<br>
特にgタグのtransformで基準座標を変更するのは多用したので、<br>
大事な知識と思いました。
</li>
<li class="MYtemp-li" >
後から記述したものがレイヤーとして上に描画される。
</li>
</ul>
そして多分数学知識、今回は原則ライブラリは使用しない縛りだったので、<br>
ベトナムっぽいものの星はエクセルで座標計算したものを流用していますが、<br>
この座標手で求めるのもライブラリ使うにも基本の数学は必要かなと・・・。<br>
高校数学?かな。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
今回はSVGで国旗を描いてみました。<br>
題材の国旗を調べるにあたって <a href="https://ja.wikipedia.org/wiki/%E5%9B%BD%E6%97%97%E3%81%AE%E4%B8%80%E8%A6%A7">ウィキペディアの国旗の一覧</a>を参考にしたのですが、<br>
実は、この記事に掲載されている国旗自体がSVGで作成されていたりしました。<br>
気が付いたとき、ソースを開いていたんですがすぐ閉じました。<br>
修行にならないので。(笑)<br>
<br>
次回はグラフを描いてみたいと思います。<br>
<br>
参考になれば幸いです。<br>
<br>
ご利用は自己責任で。<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-80861167455911899982018-01-08T17:57:00.001+09:002018-05-14T17:44:20.339+09:00AWSを触ろう<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 0;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">AWS上にサイトを構えました。</h1>
<div class="MYtemp-plain">
年末年始の休みに
AWS上に<a href="http://ec2-52-193-89-69.ap-northeast-1.compute.amazonaws.com/">Content created by AXY</a>というサイトを構えました。<br>
AWS上でAppachを動かしBottleを使用しています。<br>
今後はこのブログで記事をためつつ、動くものをこちらに公開してゆく予定。<br>
とりあえず、<a href="http://ec2-52-193-89-69.ap-northeast-1.compute.amazonaws.com/pagefonttester.php">FontTester - フォントテスター</a>を公開しました。<br>
<br>
これからも、よろしくお願いします。<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-71292203894778444672017-12-27T20:58:00.000+09:002017-12-27T20:59:06.368+09:00Bottle を動かそう。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 0px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
フレームワークに手を出します。</h1>
<div class="MYtemp-plain">
今回はPythonのWebアプリケーションフレームワークBottleを動かしてみます。<br />
今までPythonをCGIとして動かしてきましたが、<br />
フレームワークをうまく使うと開発を高速化できるということがよくわかりました。<br />
<br />
それでは本編です。</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#Configuration">設定</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
PythonのWebアプリケーションフレームワーク「Bottle」を動かす。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="Configuration">
設定</h2>
<div class="MYtemp-plain">
今回は、「/var/www/webapp」以下に作ります。<br />
<br />
<h3 class="MYtemp-h3">
ファイルの入手</h3>
以下のコマンドでbottle.pyを入手します。
<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><pre>cd /var/www/webapp
wget https://raw.githubusercontent.com/bottlepy/bottle/master/bottle.py
</pre>
</td>
</tr>
</tbody>
</table>
<br />
<h3 class="MYtemp-h3">
adapter.wsgiを準備</h3>
adapter.wsgiを作成します。<br />
今回は以下のようにします。<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<span style="color: #608b4e;">#coding:utf-8</span></div>
<br />
<div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> sys, os</span></div>
<br />
<div>
<span style="color: #608b4e;">#adapter.wsgiの保存先のパスを取得</span></div>
<div>
<span style="color: #d4d4d4;">dirpath </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> os.path.dirname(os.path.abspath(</span><span style="color: #9cdcfe;">__file__</span><span style="color: #d4d4d4;">))</span></div>
<div>
<span style="color: #608b4e;">#ライブラリの読み対象パスにadapter.wsgiの保存先パスを追加</span></div>
<div>
<span style="color: #d4d4d4;">sys.path.append(dirpath)</span></div>
<div>
<span style="color: #608b4e;">#adapter.wsgiの保存先パスに移動</span></div>
<div>
<span style="color: #d4d4d4;">os.chdir(dirpath)</span></div>
<br />
<div>
<span style="color: #608b4e;">#Bottle.pyを読み込み</span></div>
<div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> bottle</span></div>
<div>
<span style="color: #608b4e;">#実行アプリケーションの本体app.pyを読み込み</span></div>
<div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> app</span></div>
<br />
<div>
<span style="color: #608b4e;">#アプリの実行</span></div>
<div>
<span style="color: #d4d4d4;">application </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> bottle.default_app()</span></div>
</td>
</tr>
</tbody>
</table>
<br />
<h3 class="MYtemp-h3">
app.pyを準備</h3>
アプリケーション本体app.pyを用意します。
<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<span style="color: #608b4e;">#coding:utf-8</span></div>
<div>
<span style="color: #c586c0;">from</span><span style="color: #d4d4d4;"> bottle </span><span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> route, run, template, request, HTTPResponse</span></div>
<div>
<span style="color: #c586c0;">from</span><span style="color: #d4d4d4;"> bottle </span><span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> TEMPLATE_PATH</span></div>
<br />
<div>
<span style="color: #d4d4d4;">TEMPLATE_PATH.append(</span><span style="color: #ce9178;">"./view"</span><span style="color: #d4d4d4;">)</span></div>
<br />
<div>
<span style="color: #d4d4d4;">@</span><span style="color: #dcdcaa;">route</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'/'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #569cd6;">def</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">outputdefalt</span><span style="color: #d4d4d4;">():</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"HELLO BOTTLE WORLD!"</span></div>
<br />
<div>
<span style="color: #d4d4d4;">@</span><span style="color: #dcdcaa;">route</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'/text'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #569cd6;">def</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">outputtext</span><span style="color: #d4d4d4;">():</span></div>
<div>
<span style="color: #d4d4d4;"> body </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"テキストデータ"</span></div>
<div>
<span style="color: #d4d4d4;"> responce </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> HTTPResponse(</span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">body</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;">body)</span></div>
<div>
<span style="color: #d4d4d4;"> responce.set_header(</span><span style="color: #ce9178;">'Content-Type'</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">'text/plain'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> responce</span></div>
<br />
<div>
<span style="color: #d4d4d4;">@</span><span style="color: #dcdcaa;">route</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'/json'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #569cd6;">def</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">outputjson</span><span style="color: #d4d4d4;">():</span></div>
<div>
<span style="color: #d4d4d4;"> body </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"{'data': 'jsonデータ'}"</span></div>
<div>
<span style="color: #d4d4d4;"> responce </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> HTTPResponse(</span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">body</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;">body)</span></div>
<div>
<span style="color: #d4d4d4;"> responce.set_header(</span><span style="color: #ce9178;">'Content-Type'</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">'application/json'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> responce</span></div>
<br />
<div>
<span style="color: #d4d4d4;">@</span><span style="color: #dcdcaa;">route</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'/html/<name>'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #569cd6;">def</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">outputhtml</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">):</span></div>
<div>
<span style="color: #d4d4d4;"> body </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> template(</span><span style="color: #ce9178;">'htmltpl'</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;">name)</span></div>
<div>
<span style="color: #d4d4d4;"> responce </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> HTTPResponse(</span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">body</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;">body)</span></div>
<div>
<span style="color: #d4d4d4;"> responce.set_header(</span><span style="color: #ce9178;">'Content-Type'</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">'text/html'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> responce</span></div>
<br />
<div>
<span style="color: #d4d4d4;">@</span><span style="color: #dcdcaa;">route</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'/redirect'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #569cd6;">def</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">outputredirect</span><span style="color: #d4d4d4;">():</span></div>
<div>
<span style="color: #d4d4d4;"> responce </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> HTTPResponse(</span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">302</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> responce.set_header(</span><span style="color: #ce9178;">'Location'</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">'https://www.google.co.jp'</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> responce</span></div>
<br />
<br />
<div>
<span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">__name__</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'__main__'</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> run(</span><span style="color: #9cdcfe;">host</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">'xxx.xxx.xxx.xxx'</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">port</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">80</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">debug</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">True</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">reloader</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">True</span><span style="color: #d4d4d4;">)</span></div>
</td>
</tr>
</tbody>
</table>
<br />
<h3 class="MYtemp-h3">
テンプレートファイルを準備する。</h3>
/var/www/webappの下にviewというフォルダを作り、<br />
viewフォルダの中に以下のような「htmltpl.tpl」というファイルを作ります。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><html><br /> <head><br /> </head><br /><body><br /> <h1>テストページ</h1><br /> こんにちは{{name}}さん<br /> </body><br /></html></td>
</tr>
</tbody>
</table>
<h3 class="MYtemp-h3">
httpd.confを編集</h3>
adapter.wsgiを実行対象にするため、/etc/httpd/conf/httpd.confに以下を追加する。<br />
(前回の記事を見た方は、書き換えになります。)<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">LoadModule wsgi_module modules/mod_wsgi.so
WSGIScriptAlias / /var/www/webapp/adapter.wsgi
</td>
</tr>
</tbody>
</table>
設定はここまでです。<br />
ここまでで「/var/www/webapp」は以下のようになっています。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
.
|-- adapter.wsgi
|-- app.py
|-- bottle.py
|-- view
|-- htmltpl.tpl
</pre>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="MYtemp-plain">
それぞれブラウザで確認してゆきます。<br />
<ul class="MYtemp-ul" >
<li class="MYtemp-li" >
「http://設定したサーバーのアドレス/」にアクセスします。<br />
「HELLO BOTTLE WORLD!」と表示されたでしょうか?<br />
これは、app.pyで @route('/') の時すなわち、ルートの時に、<br />
outputdelalt()が実行されて、文字列"HELLO BOTTLE WORLD!"が返されるからです。<br /><br />
</li>
<li class="MYtemp-li" >
「http://設定したサーバーのアドレス/text」にアクセスすると、<br />
「テキストデータ」と表示されたはずです。
今回はただ文字列を返すだけではなく、レスポンスヘッダを追加しています。<br />
レスポンスヘッダはこちらの説明がわかりやすいと思います。<br />
<a href="http://wa3.i-3-i.info/word1847.html">「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 </a><br />
要は返した文字列のメタデータを付与しているわけです。<br />
この場合、「text/plain」をつけて「テキストファイルです」という札をつけていることになります。<br /><br />
</li>
<li class="MYtemp-li" >
「http://設定したサーバーのアドレス/json」にアクセスすると、<br />
json形式のデータがダウンロードされます。
これはレスポンスヘッダに「application/json」が付与されているからです。<br /><br />
</li>
<li class="MYtemp-li" >
「http://設定したサーバーのアドレス/html/[文字列]」にアクセスすると、
以下のようなページが表示されます。
以下の表示の時は「http://設定したサーバーのアドレス/html/AXY」にアクセスしています。
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXRQb58vtAQFNcjGa3x2wvHb3JAb9IWJdrsonpQofHQ38NS0mfd8zXOyZDQyO4afjodYgy-rqjmiKFVkOmEMQ-GlyxCGuDMkcemwyNFTwuEH-X-um0r6uqCyDYvaptZTMfaJpOriN3rHGB/s1600/2017-12-27+20_03_43.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXRQb58vtAQFNcjGa3x2wvHb3JAb9IWJdrsonpQofHQ38NS0mfd8zXOyZDQyO4afjodYgy-rqjmiKFVkOmEMQ-GlyxCGuDMkcemwyNFTwuEH-X-um0r6uqCyDYvaptZTMfaJpOriN3rHGB/s320/2017-12-27+20_03_43.jpg" width="320" height="169" data-original-width="184" data-original-height="97" /></a><br />
<name>の部分に入れた文字列の内容が、<br>
template([テンプレートのファイル名],[テンプレートの中の文字列挿入先]=[テンプレートに埋め込む文字列)<br />
で処理されることでhtmltpl.tplの{{name}}で指定された部分に<name>挿入されます。<br>
<br />
</li>
<li class="MYtemp-li" >
「http://設定したサーバーのアドレス/redirect」にアクセスすると、<br />
「https://www.google.co.jp」に転送されます。<br />
<br />
</li>
</ul>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
Bottleを導入してテキスト・HTML・JSON、そして外部へのリダイレクトを実装してみました。<br />
CGIでページへの文字列の挿入や、JSONの応答を作っていたころと比べると、<br />
ある程度型にはめる(まさにフレームワーク!)ことで、数行で実現できました。<br />
フレームワークで開発を開発が加速するのもうなずける話ですね。<br />
(きっと本業の人たちからすると、「当たり前でしょ?」って煽られそう・・・。)<br />
<br />
今回はここまでです。<br />
せっかくAWS EC2でサーバーもかまえたので、なにかサービス公開してみたい<br />
<br />
ご参考になれば幸いです。<br />
実行は自己責任で!<br />
<br />
以上
</div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-66069748415517450072017-12-24T01:18:00.001+09:002017-12-24T01:25:35.545+09:00WSGIを設定しよう<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 0;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
ちょっと間が空いてしまいました。</h1>
<div class="MYtemp-plain">
転職活動してみたり、単純に仕事が忙しかったり、記事のためにいろいろ作業したりで、<br>
投稿が一か月ぶりになってしまいました。時の流れが速いよ最近。<○_○>ほえー<br>
<br>
さて今回はWSGIを設定します。<br />
今までCGIとしてPythonを触ってきたのですが、<br />
これからPythonのWebアプリケーションフレームワークを使ってゆく環境準備として<br />
Apache + mod-WSGI の環境構築をします。<br />
<br />
それでは本編です。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#Description">というかその前に</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#Configuration">設定</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
Apache + mod-WSGI の環境構築を行いpythonを実行する
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="Description">
というかその前に</h2>
<div class="MYtemp-plain">
WSGIってなんだ?という話。<br />
これについては、<br />
gihyo.jpさんの
<a href="http://gihyo.jp/dev/feature/01/wsgi/0001">WSGIとPythonでスマートなWebアプリケーション開発を</a>や<br />
Webアプリケーションフレームワークの作り方 in Pythonさんの
<a href="http://c-bata.link/webframework-in-python/wsgi.html">WSGI について</a>で詳しく書いてある。<br />
ありがとうございます。<br />
<br />
とりあえず、<br />
「PEP3333で定義されたPythonアプリケーションを動作させるWebサーバーのインタフェース」と理解。<br />
概念的で真に理解できたかは怪しいが、ここから先は実戦で学んでゆきたいところ。</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="Configuration">
設定</h2>
<div class="MYtemp-plain">
以下の手順で設定してみます。
<h3 class="MYtemp-h3">
パッケージのインストールをします。</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">yum install -y mod_wsgi.x86_64
</td>
</tr>
</tbody>
</table>
<br />
<h3 class="MYtemp-h3">
状況確認</h3>
パッケージのインストールが終わると、<br />
/etc/httpd/modules/にmod_wsgi.soが追加されているはずです。<br />
ファイルがあるか確認しておきましょう。<br />
<br />
<h3 class="MYtemp-h3">
Apacheの設定ファイルを編集します。</h3>
/etc/httpd/conf/httpd.confに以下を追記します。<br />
1行目がmod_wsgi.soモジュールの読み込みです。<br />
先ほど確認したmod_wsgi.soのパスを書きます。<br />
2行目がWSGIが実行するpythonアプリケーションの実行対象です。<br />
pythonアプリケーションのパスを記述します。<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
LoadModule wsgi_module modules/mod_wsgi.so<br />
WSGIScriptAlias / /var/www/webapp/index.py
</td>
</tr>
</tbody>
</table>
<br>
<h3 class="MYtemp-h3">
Pythonアプリケーションを作成します。</h3>
/etc/httpd/conf/httpd.conf で実行対象にした、<br />
/var/www/webapp/index.py を作ります。<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
mkdir /var/www/webapp<br>
nano /var/www/webapp/index.py
</td>
</tr>
</tbody>
</table>
<br>
/var/www/webapp/index.pyの中身は以下のようにしてみます。
<br />
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
#!/usr/bin/python
# -*- coding:utf-8 -*-</pre>
<pre>def application(environ,start_response):
status = '200 OK'
htmltext = '''
<html>
<head>
</head>
<body>
<h1>"hello world."</h1>
mod_wsgiで呼び出されました。
</body>
</html>
'''
response_header = [('Content-type','text/html')]
start_response(status,response_header)
return htmltext
</pre>
</td>
</tr>
</tbody>
</table>
<br>
<h3 class="MYtemp-h3">
動作テスト</h3>
ブラウザで「Http://xxx.xxx.xxx.xxx」にアクセスしてみましょう。<br>
以下のようなページが表示されるはずです。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJAjypNr8PL-CJuUij-eD6lfN4C-9V1VIHnmVxHFd29sD8BPwoukH53_3rnewHwMGUDLl4nmZMXIYjuqh5FnsbshHv_3gp3lZThKChyNkC7aODgqHhp3nAQX7a7e57anduuXwCUJGdUBiO/s1600/2017-12-24.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJAjypNr8PL-CJuUij-eD6lfN4C-9V1VIHnmVxHFd29sD8BPwoukH53_3rnewHwMGUDLl4nmZMXIYjuqh5FnsbshHv_3gp3lZThKChyNkC7aODgqHhp3nAQX7a7e57anduuXwCUJGdUBiO/s400/2017-12-24.jpg" width="400" height="175" data-original-width="247" data-original-height="108" /></a></div>
うまくいったでしょうか?<br>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
今回はApacheにmod_wsgiを導入してみました。<br>
今回も調べ調べしながらの作業ですが、ここまでは問題なさそうです。<br>
<br>
今度はPythonのWebアプリケーションフレームワークに移ります。<br>
BottleやFlask,Django・・・まだ見ぬフレームワークの世界に突入です。<br>
またがんばってやってみましょう。<br>
<br>
参考になれば幸いです。<br>
実行は自己責任で!<br>
<br>
以上
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-24648483251886051402017-11-25T16:14:00.000+09:002017-11-25T16:15:20.759+09:00AWS(EC2インスタンス作成編)<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">クラウド上に公開サーバを持つぞ!</h1>
<div class="MYtemp-plain">
AWS(Amazon Web Services)編2回目です。<br>
今回はAWS上にインスタンスを作成し、<br>
Webサーバーを動作させるところまでやってみようと思います。<br>
それでは本編
</div>
</section>
<a name='more'></a>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#procedure">手順</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">目標</h2>
<div class="MYtemp-plain">
AWSに自分のEC2インスタンスを作成して、Apacheを入れてWebサーバを作る!
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="procedure">手順</h2>
<h3 class="MYtemp-h3">インスタンス作成</h3>
<div class="MYtemp-plain">
「サービス」から「コンピューティングのEC2」を選択します。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1A0LVDch-N2S8edZc-QG4UewyeGL9h4l1oaVtsMNYhf5Y6-i2wzb5fPcB0dS8XmrHpZYpCLG5XNzHm3th0TSkU1plsw0uImxeDH1Xtc0vZeHgipJFvr8WufUQm1_fdc5YapEhiCXihyI/s1600/SnapCrab_NoName_2017-11-25_11-45-51_No-001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1A0LVDch-N2S8edZc-QG4UewyeGL9h4l1oaVtsMNYhf5Y6-i2wzb5fPcB0dS8XmrHpZYpCLG5XNzHm3th0TSkU1plsw0uImxeDH1Xtc0vZeHgipJFvr8WufUQm1_fdc5YapEhiCXihyI/s400/SnapCrab_NoName_2017-11-25_11-45-51_No-001.png" width="400" height="295" data-original-width="459" data-original-height="339" /></a></div>
<br>
「インスタンスの作成」を選びます。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivrwkLYEqRl8Wpds5GHY9scEuEh0ACg_C1wE4-20FxioA27Os6SAD6ywUD_1-Xtxho1fjhDVueciH6ekIuUJmWQgeGukSNK70fdxpQb0cVnugDCY36wkCG-XddIsNOPuUSOP-XvgE_Ybis/s1600/SnapCrab_NoName_2017-11-25_11-47-1_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivrwkLYEqRl8Wpds5GHY9scEuEh0ACg_C1wE4-20FxioA27Os6SAD6ywUD_1-Xtxho1fjhDVueciH6ekIuUJmWQgeGukSNK70fdxpQb0cVnugDCY36wkCG-XddIsNOPuUSOP-XvgE_Ybis/s400/SnapCrab_NoName_2017-11-25_11-47-1_No-00.png" width="400" height="320" data-original-width="706" data-original-height="564" /></a></div>
</div>
<h3 class="MYtemp-h3">Amazonマシンイメージ(AMI)の選択</h3>
<div class="MYtemp-plain">
今回はとりあえず、
「Amazon Linax AMI 2017.09.1~」を選んでみます。<br>
(今まで使っていたCentOS7も選択肢にあった。)<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44VUrYqZ33Cxy6KXk_XtE_F0jXPkrQrcOJVRCZI8_3yJERbE76eeOs8QFcGmx12T7kDh-JfeQ-3mWOYvg5ZSj_JGonqPhEXvomqKT1vpDrtmVz8GvkreykXaTzkyE5xEmc5oI2Su43hs6/s1600/SnapCrab_NoName_2017-11-25_11-49-33_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44VUrYqZ33Cxy6KXk_XtE_F0jXPkrQrcOJVRCZI8_3yJERbE76eeOs8QFcGmx12T7kDh-JfeQ-3mWOYvg5ZSj_JGonqPhEXvomqKT1vpDrtmVz8GvkreykXaTzkyE5xEmc5oI2Su43hs6/s400/SnapCrab_NoName_2017-11-25_11-49-33_No-00.png" width="400" height="142" data-original-width="1085" data-original-height="385" /></a></div>
</div>
<h3 class="MYtemp-h3">インスタンスタイプの選択</h3>
<div class="MYtemp-plain">
「t2.micro」を選択して「次の手順:インスタンスの詳細の設定」をクリック<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX06Jbgkjsk0rZwHi3rthGLWVLWo1EaGNjkrXovzqCLKXhgZlzmGuIdtVff7KWAmHNHCjGVALxiPTEqJ0b6WjmeYV-mD6YBIUxzhkSXdRhxfWOD1Oh1YJTwoSHfCQ1n1fJoGI6QMc502Mq/s1600/SnapCrab_NoName_2017-11-25_11-52-23_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX06Jbgkjsk0rZwHi3rthGLWVLWo1EaGNjkrXovzqCLKXhgZlzmGuIdtVff7KWAmHNHCjGVALxiPTEqJ0b6WjmeYV-mD6YBIUxzhkSXdRhxfWOD1Oh1YJTwoSHfCQ1n1fJoGI6QMc502Mq/s640/SnapCrab_NoName_2017-11-25_11-52-23_No-00.png" width="560" height="160" data-original-width="1111" data-original-height="433" /></a></div>
</div>
<h3 class="MYtemp-h3">インスタンスの詳細設定</h3>
<div class="MYtemp-plain">
特に何も設定しませんでした、「次の手順:ストレージの追加」をクリック<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmv0wim-BPcu27cQbVTb51WK0zLxYWVGzzxRT8879QDLTuHBizyR34qCoKbsH5OpsZfNxg-q1t1AGIcjGX1paGIcckTZl0H0OC7Wgf7tJ6jgGNgwUSF6oF6z8_H9cOS8FDYlJAWBoxe9Aj/s1600/SnapCrab_NoName_2017-11-25_11-55-3_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmv0wim-BPcu27cQbVTb51WK0zLxYWVGzzxRT8879QDLTuHBizyR34qCoKbsH5OpsZfNxg-q1t1AGIcjGX1paGIcckTZl0H0OC7Wgf7tJ6jgGNgwUSF6oF6z8_H9cOS8FDYlJAWBoxe9Aj/s640/SnapCrab_NoName_2017-11-25_11-55-3_No-00.png" width="560" height="156" data-original-width="1121" data-original-height="414" /></a></div>
</div>
<h3 class="MYtemp-h3">ストレージの追加</h3>
<div class="MYtemp-plain">
ここもそのままです。「次の手順:タグの追加」をクリック<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrWULjLICsf19_Y0YWa7EVW6Feq57cw4BB8rCcsCF_S00e6YCG-tDybY8SxldtvZ10_4xlyHgkbCC_YrwXyZUoGTAbfhl8-XqYeXeQXxIc-g2H407GnI2hS4r0U9oIvdKOoByNs-C9dvV/s1600/SnapCrab_NoName_2017-11-25_11-57-43_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrWULjLICsf19_Y0YWa7EVW6Feq57cw4BB8rCcsCF_S00e6YCG-tDybY8SxldtvZ10_4xlyHgkbCC_YrwXyZUoGTAbfhl8-XqYeXeQXxIc-g2H407GnI2hS4r0U9oIvdKOoByNs-C9dvV/s640/SnapCrab_NoName_2017-11-25_11-57-43_No-00.png" width="560" height="164" data-original-width="990" data-original-height="378" /></a></div>
</div>
<h3 class="MYtemp-h3">タグの追加</h3>
<div class="MYtemp-plain">
ここもそのままです。「次の手順:セキュリティグループの設定」をクリック<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFT3WIJnb4u4NIZhBmJXsD-BUXt7pZDWI1VSaVLwRL3BWQ6-JzbLnA-w5Djz9BI0PYigio0nIxE5r8ugMlC3OTkH_rkrAc_8RtZaIJic2I9jrpisktq7NnGhwPqFlZQUq3vXw9bQljhUC/s1600/SnapCrab_NoName_2017-11-25_11-58-36_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFT3WIJnb4u4NIZhBmJXsD-BUXt7pZDWI1VSaVLwRL3BWQ6-JzbLnA-w5Djz9BI0PYigio0nIxE5r8ugMlC3OTkH_rkrAc_8RtZaIJic2I9jrpisktq7NnGhwPqFlZQUq3vXw9bQljhUC/s640/SnapCrab_NoName_2017-11-25_11-58-36_No-00.png" width="560" height="128" data-original-width="990" data-original-height="321" /></a></div>
</div>
<h3 class="MYtemp-h3">セキュリティグループの設定</h3>
<div class="MYtemp-plain">
EC2のインスタンスが、受け付ける通信の定義をします。<br>
今回は、WebサーバーなのでHTTPのTCP80番はどこからでも、<br>
SSHは自身からつないでほしくありませんから「マイIP」を選びました。<br>
(SSHを22番にしている部分は、公開サーバーなら変えるのがベターなようです。)<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOUzB-kwxuqc0UThAgiHY2iqADYCei3wqArvpZ3DRwKeyKmlY3lqo0T1duS3KniF9AdLJTbl8sw71cB3_RiATia6AX_L9lFKp8O0IerOTphxTvE2TQAK16WSC-L64QXeaWlqSDbeK-dx9F/s1600/SnapCrab_NoName_2017-11-25_12-2-50_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOUzB-kwxuqc0UThAgiHY2iqADYCei3wqArvpZ3DRwKeyKmlY3lqo0T1duS3KniF9AdLJTbl8sw71cB3_RiATia6AX_L9lFKp8O0IerOTphxTvE2TQAK16WSC-L64QXeaWlqSDbeK-dx9F/s640/SnapCrab_NoName_2017-11-25_12-2-50_No-00.png" width="560" height="326" data-original-width="989" data-original-height="473" /></a></div>
</div>
<h3 class="MYtemp-h3">インスタンス作成の確認</h3>
<div class="MYtemp-plain">
内容を確認したら、「作成」を押します。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizsIcjKCaYcqN05HevDxVPHLkwP6mYd6cj0aIVdmFwY-U6xAR44GVHAQU48iKTZ-y0FAXD_CoFonavS4zh17u9c6ophLl27s9HRozOvJsTxee0OL7vZt3lMmuilWV4yz1eNZ1R3kpP5Dv3/s1600/SnapCrab_NoName_2017-11-25_12-4-21_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizsIcjKCaYcqN05HevDxVPHLkwP6mYd6cj0aIVdmFwY-U6xAR44GVHAQU48iKTZ-y0FAXD_CoFonavS4zh17u9c6ophLl27s9HRozOvJsTxee0OL7vZt3lMmuilWV4yz1eNZ1R3kpP5Dv3/s640/SnapCrab_NoName_2017-11-25_12-4-21_No-00.png" width="560" height="195" data-original-width="973" data-original-height="418" /></a></div>
</div>
<h3 class="MYtemp-h3">キーペアの作成</h3>
<div class="MYtemp-plain">
今回は初めての作成なので、「新しいキーペアの作成」を選択して、<br>
キーペア名を決めます。<br>
キーペアをダウンロードしたら、「インスタンスの作成」をクリックします。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwceBuNESrNjmRNCUnjCZMF1iYVEV0KgI4Z0RGhRZkl9_HBegL0ozMp-M_qTG8cZDruI8kEuB1of8b4-Sq6I6sqC_iHhkkEnSlVNDVIjrJ5k7eLHyIdR8oFKPL2URYtGvg61DB3a72MO7h/s1600/SnapCrab_NoName_2017-11-25_12-6-27_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwceBuNESrNjmRNCUnjCZMF1iYVEV0KgI4Z0RGhRZkl9_HBegL0ozMp-M_qTG8cZDruI8kEuB1of8b4-Sq6I6sqC_iHhkkEnSlVNDVIjrJ5k7eLHyIdR8oFKPL2URYtGvg61DB3a72MO7h/s400/SnapCrab_NoName_2017-11-25_12-6-27_No-00.png" width="400" height="294" data-original-width="671" data-original-height="494" /></a></div>
</div>
<h3 class="MYtemp-h3">作成完了!</h3>
<div class="MYtemp-plain">
作成ステータスが表示されるので、「インスタンスの表示」をクリックします。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_3oRh9plZLS1S7ZpAmL2e-682Rvtq5gjgdOnNep6IPqEGvjr7qZqK3UKaf74TIKs2-R-UOCvOShevxHvDgOdHYR3UvhS2EPj6gZ7GkTQKpWQAJhRnnQOmAPNbtKw97ZUK2uPuTBOD0yI/s1600/SnapCrab_NoName_2017-11-25_12-11-18_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_3oRh9plZLS1S7ZpAmL2e-682Rvtq5gjgdOnNep6IPqEGvjr7qZqK3UKaf74TIKs2-R-UOCvOShevxHvDgOdHYR3UvhS2EPj6gZ7GkTQKpWQAJhRnnQOmAPNbtKw97ZUK2uPuTBOD0yI/s400/SnapCrab_NoName_2017-11-25_12-11-18_No-00.png" width="400" height="271" data-original-width="983" data-original-height="667" /></a></div><br>
<br>
ステータスを確認してみましょう。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybUnqyBtx0Fyjonn_dsbTa0H73QNZcKikPiz0zu0feh5tjfLZ_d4OCawzqpZY72RmiumAte7Kr1IN9Xkjd8GBulEVH0iB9O3p1nnAWZZskmbQqvZ3iIbWWycx58v3YqI0O3WVR3wa3JBe/s1600/SnapCrab_NoName_2017-11-25_12-22-0_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybUnqyBtx0Fyjonn_dsbTa0H73QNZcKikPiz0zu0feh5tjfLZ_d4OCawzqpZY72RmiumAte7Kr1IN9Xkjd8GBulEVH0iB9O3p1nnAWZZskmbQqvZ3iIbWWycx58v3YqI0O3WVR3wa3JBe/s400/SnapCrab_NoName_2017-11-25_12-22-0_No-00.png" width="400" height="290" data-original-width="851" data-original-height="617" /></a></div>
</div>
<h3 class="MYtemp-h3">SSHでアクセス</h3>
<div class="MYtemp-plain">
「Tera Term」を起動します。<br>
ホストをインスタンスの情報画面に記載されていた<br>
「パブリック DNS(IPv4)」もしくは「IPv4 パブリックIP」設定して、<br>
サービスをSSHに設定してOKをクリックします。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ24cvWyPOFsSer8jprrp754XEA92pR78GromeDJpxyr7WHHEfoE8b_EiJPYTBI6J9cYuWKACHDXHvLpV58nZFexu0RjIVOvBhFnIJsfOH3GtxFdmKEjxF0uooKBhw1JzsV87_HxYIZ1Gi/s1600/SnapCrab_NoName_2017-11-25_12-34-47_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ24cvWyPOFsSer8jprrp754XEA92pR78GromeDJpxyr7WHHEfoE8b_EiJPYTBI6J9cYuWKACHDXHvLpV58nZFexu0RjIVOvBhFnIJsfOH3GtxFdmKEjxF0uooKBhw1JzsV87_HxYIZ1Gi/s400/SnapCrab_NoName_2017-11-25_12-34-47_No-00.png" width="400" height="293" data-original-width="681" data-original-height="499" /></a></div>
<br>
試しにユーザー名を「root」、パスフレーズを空にして、<br>
RSA/DSA/ECDSA/ED25519鍵を使うを選択。<br>
秘密鍵を「キーペアの作成」でダウンロードした.pemファイルを設定し、OKクリック<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgSNq_naXpdj-tavNZNdrzxCvQ4cex4iTuFL-SNxWp_2ojb_PfOLdLwfs334euDsTrjEDKRbfaSYwhQMrOlO8nqwT16gvFmrodNZ0brCIIip2MX0lEnB1wrvYyRx_Ihk5mHsZpxyi7_4b/s1600/SnapCrab_NoName_2017-11-25_12-35-46_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgSNq_naXpdj-tavNZNdrzxCvQ4cex4iTuFL-SNxWp_2ojb_PfOLdLwfs334euDsTrjEDKRbfaSYwhQMrOlO8nqwT16gvFmrodNZ0brCIIip2MX0lEnB1wrvYyRx_Ihk5mHsZpxyi7_4b/s400/SnapCrab_NoName_2017-11-25_12-35-46_No-00.png" width="400" height="387" data-original-width="483" data-original-height="467" /></a></div>
<br>
はじかれます。(笑)<br>
「ec2-userでログインしてね」とメッセージが出ます。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCiyaXU10-rmaJn1N3Tz3IFBT_iMEme1QoWO3XMfxqrEAWsUPm5Hy57VhsbdoYvOPwhf7pnHTdfaErTgAvLQe7jEFx_-KihVQRQ0RJz5O5glrew6IjVfKXu-iV0rhH5Qj7Fo6Fubh5nKcR/s1600/SnapCrab_NoName_2017-11-25_12-37-2_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCiyaXU10-rmaJn1N3Tz3IFBT_iMEme1QoWO3XMfxqrEAWsUPm5Hy57VhsbdoYvOPwhf7pnHTdfaErTgAvLQe7jEFx_-KihVQRQ0RJz5O5glrew6IjVfKXu-iV0rhH5Qj7Fo6Fubh5nKcR/s640/SnapCrab_NoName_2017-11-25_12-37-2_No-00.png" width="560" height="170" data-original-width="675" data-original-height="243" /></a></div><br>
改めて指示通り「ec2-user」でログインし直してみましょう。
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiny8arXyO9uh5UXZ6DT5UNpLh3ogLkKR3v-Lvvt7tLiDgcQ5RlBecuFdbq1jWKaKswfwKkyBAVFc_hAd4ouqf_vRKLieOEmXMIlEGzFyAghVPsmm4PhRlKO-epN6ER-I6QHdNjY4EZNTMQ/s1600/SnapCrab_NoName_2017-11-25_12-39-19_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiny8arXyO9uh5UXZ6DT5UNpLh3ogLkKR3v-Lvvt7tLiDgcQ5RlBecuFdbq1jWKaKswfwKkyBAVFc_hAd4ouqf_vRKLieOEmXMIlEGzFyAghVPsmm4PhRlKO-epN6ER-I6QHdNjY4EZNTMQ/s400/SnapCrab_NoName_2017-11-25_12-39-19_No-00.png" width="500" height="154" data-original-width="676" data-original-height="210" /></a></div><br>
<br>
ログインできました。<br>
(このログイン直後のマークみたいのはなんだろう?読めない・・・。)
</div>
<h3 class="MYtemp-h3">Webサーバー設定</h3>
<div class="MYtemp-plain">
とりあえずyumをアップデート
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
sudo yum update
</td>
</tr>
</tbody>
</table>
<br>
Apacheをインストールします。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
sudo yum install httpd
</td>
</tr>
</tbody>
</table>
<br>
Apacheの開始と自動起動設定
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
sudo service httpd start<br>
sudo service httpd enable
</td>
</tr>
</tbody>
</table>
ここで、「systemctl start httpd.service」を試したら、<br>
systemctlがインストールされておらずhttpd有効化の方法をいったん調べた。
</div>
<h3 class="MYtemp-h3">アクセス!</h3>
<div class="MYtemp-plain">
ブラウザにhttp://[「パブリック DNS(IPv4)」もしくは「IPv4 パブリックIP」]を入力、<br>
作成したEC2インスタンスにアクセスします。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgefesmjH90vQzXbZPjRAZnCPOuZgdFettaZ1YayuxuiVJuZ7LEz7jl6SYC-sH-kNDYsbAd7tLADQptfadj39CXyzBi9tw2HstMgdPWqf3BsXyFcnOHhyphenhyphenkvSBNCJuyhq4cbbGLoVEsW6Fh/s1600/SnapCrab_NoName_2017-11-25_12-44-57_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgefesmjH90vQzXbZPjRAZnCPOuZgdFettaZ1YayuxuiVJuZ7LEz7jl6SYC-sH-kNDYsbAd7tLADQptfadj39CXyzBi9tw2HstMgdPWqf3BsXyFcnOHhyphenhyphenkvSBNCJuyhq4cbbGLoVEsW6Fh/s400/SnapCrab_NoName_2017-11-25_12-44-57_No-00.png" width="400" height="394" data-original-width="564" data-original-height="556" /></a></div>
Apacheのテストページが表示されました。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
EC2インスタンスでWebサーバーを立てることができました。<br>
所要時間15分くらいでサーバ1台を作ることができてしまいました。<br>
こんなに簡単だったのかと感心し、<br>
なんでやってこなかったのかと後悔して、<br>
今日から頑張ると決断した次第。<br>
<br>
これからは手元でテストして、公開サーバーにコンテンツを作ってゆく予定。<br>
その前に、作成物をアップロードする手段を確認しなくては。<br>
<br>
以上、ご参考になれば幸いです。<br>
ご利用は自己責任で。<br>
</div>
</section>AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-26131174197675585692017-11-24T22:50:00.001+09:002017-11-25T16:15:05.261+09:00AWS(アカウント作成編)<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
AWSに手を出すことにしました。</h1>
<div class="MYtemp-plain">
AWS(Amazon Web Services)に手を出してみることにしました。<br />
今までやってきた要素など絡めながら小規模でいいので、<br />
Webサービスを公開したくなったからです。<br />
以前にはレンタルサーバを借りたこともありましたが、<br />
そのころは「Linax使えない」、「CLIつらい」等々で費用の振込みしといて生かせない、<br />
完全な死に金を払ってしましましたが、「今ならできる」と思ったのが発端です。<br />
(まっ、とりあえずは無償枠でしか使いませんけどね。)<br />
<br />
それでは アカウント作成編 始まり始まり。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#procedure">手順</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
AWSのアカウントを作る!
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="procedure">
手順</h2>
<h3 class="MYtemp-h3">
アカウント作成</h3>
<div class="MYtemp-plain">
それぞれ表示に従ってアカウントを作ってゆきましょう。<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNMIIW1_kLygFbOhNy8-xLHRIr5l-qSVfv_4uxp_zmA0_9L-my_Y6OVZbUHS-P-_B3auqKSKY8yD_5bqmTQXzulP24W8BBsH9nXFwD944e8q8-amyop6J4561r46nYp6todk9PIcGulC2/s1600/SnapCrab_NoName_2017-11-23_13-26-22_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="677" data-original-width="926" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNMIIW1_kLygFbOhNy8-xLHRIr5l-qSVfv_4uxp_zmA0_9L-my_Y6OVZbUHS-P-_B3auqKSKY8yD_5bqmTQXzulP24W8BBsH9nXFwD944e8q8-amyop6J4561r46nYp6todk9PIcGulC2/s400/SnapCrab_NoName_2017-11-23_13-26-22_No-00.png" width="400" /></a></div>
</div>
<br />
<h3 class="MYtemp-h3">
連絡先情報</h3>
<div class="MYtemp-plain">
ここも指示に従って入れてゆきましょう。<br />
「市区町村」、「都道府県または地域」は半角だけだったので、<br />
「東京」なら、「Tokyo」と入れるようです。
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8fL5T3S_0UCU6OjohApGB8z7c9n61J9fbzO5fVlA_XRR9UmhwOT_Mw-qB4nHr5wenN737NksLUd_tkwVt6OXRBlb-XfaQT7sFVLAOfClTErkAyUJIy91ftdjdLJKETEoFLEdIiUR5v3mO/s1600/SnapCrab_NoName_2017-11-23_13-31-37_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="868" data-original-width="700" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8fL5T3S_0UCU6OjohApGB8z7c9n61J9fbzO5fVlA_XRR9UmhwOT_Mw-qB4nHr5wenN737NksLUd_tkwVt6OXRBlb-XfaQT7sFVLAOfClTErkAyUJIy91ftdjdLJKETEoFLEdIiUR5v3mO/s640/SnapCrab_NoName_2017-11-23_13-31-37_No-00.png" width="515" /></a></div>
</div>
<br />
<h3 class="MYtemp-h3">
支払情報</h3>
<div class="MYtemp-plain">
指示に従って入れてゆきましょう。<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqeTxKsY4p2Cu-A_mHxz5MoZfId-R5bak85MsVgzB-943D_Dd4SftBbxoxP2_741ue8xmnFgI5MwloO431MXvIAl0VvPQNk5R_LclOr82M0Lr6gtBhGo5oJxRY2SkjKwR4FYTo91MR0tqv/s1600/SnapCrab_NoName_2017-11-23_13-37-42_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="612" data-original-width="591" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqeTxKsY4p2Cu-A_mHxz5MoZfId-R5bak85MsVgzB-943D_Dd4SftBbxoxP2_741ue8xmnFgI5MwloO431MXvIAl0VvPQNk5R_LclOr82M0Lr6gtBhGo5oJxRY2SkjKwR4FYTo91MR0tqv/s400/SnapCrab_NoName_2017-11-23_13-37-42_No-00.png" width="385" /></a></div>
</div>
<br />
<h3 class="MYtemp-h3">
電話による確認</h3>
<div class="MYtemp-plain">
電話番号を入力してセキュリティチェックのCAPTCHAも入れてあげます。<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyWJM4jXOWt_W5FKgx6ib7geWOdeGO5gWTh271Z-ItLM871ZWHV_fJou9lnCmKAxeSY0P9y-4oS_rUUWC9sZXGefwGlWd3gGot-3-iUj6Ww9qigAWXMSO6S1otKgIW06W_s_Cloh-2DA5F/s1600/SnapCrab_NoName_2017-11-23_13-42-58_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="630" data-original-width="597" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyWJM4jXOWt_W5FKgx6ib7geWOdeGO5gWTh271Z-ItLM871ZWHV_fJou9lnCmKAxeSY0P9y-4oS_rUUWC9sZXGefwGlWd3gGot-3-iUj6Ww9qigAWXMSO6S1otKgIW06W_s_Cloh-2DA5F/s400/SnapCrab_NoName_2017-11-23_13-42-58_No-00.png" width="376" /></a></div>
<br />
ここで入力した電話番号に非通知で電話がかかってくるので、<br />
画面に表示された数字4ケタを入力します。<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhMKMhji0CdPaFWlHDtcRmEpCK8R3JsQuNgN-Q5h0YUtTzGBeeajpbQeYI_7C6DJ9MgHVC3LiBsKUtLl-C8YR8OV_d5bpA6AE5_ZnrbdffXrGdLRpfDsjSjd1UZhU2cpB-_fOpeqcmlXj/s1600/SnapCrab_NoName_2017-11-23_13-44-43_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="410" data-original-width="725" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhMKMhji0CdPaFWlHDtcRmEpCK8R3JsQuNgN-Q5h0YUtTzGBeeajpbQeYI_7C6DJ9MgHVC3LiBsKUtLl-C8YR8OV_d5bpA6AE5_ZnrbdffXrGdLRpfDsjSjd1UZhU2cpB-_fOpeqcmlXj/s400/SnapCrab_NoName_2017-11-23_13-44-43_No-00.png" width="400" /></a><br />
<br />
確認されれば以下の画面に移ります。<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTi6ZUZ0vUVTHoQbPPtK7n2ZvgsRnMtYX2iUU9oHWzzl7OHTSvq8sS1eFTHLX9CHmHztzteP190HMuZaUz-zer9SMJAoYc5YKOTZby9g0J6eVTTlL3wiTGyG1NpSDAhRhFaHXt2xrgSsZ/s1600/SnapCrab_NoName_2017-11-23_14-28-35_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="409" data-original-width="720" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTi6ZUZ0vUVTHoQbPPtK7n2ZvgsRnMtYX2iUU9oHWzzl7OHTSvq8sS1eFTHLX9CHmHztzteP190HMuZaUz-zer9SMJAoYc5YKOTZby9g0J6eVTTlL3wiTGyG1NpSDAhRhFaHXt2xrgSsZ/s400/SnapCrab_NoName_2017-11-23_14-28-35_No-00.png" width="400" /></a></div>
<br />
<h3 class="MYtemp-h3">
サポートプランの選択</h3>
<div class="MYtemp-plain">
無料でやりたいので、ベーシックプランを選びます。<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi46tq5BsbHEKN7SSwsZjfzxJ5fPsogDagHqospSOx4LYXhbzppvKBLfb9yue4P5Q6HOl5hvCx1Qm6s-yY32T5QgNPkAwiPeX5NQAOrLeQkvlmfhzoSMdOK1Rg2R6A99CDA6sKLh1yaXHtq/s1600/SnapCrab_NoName_2017-11-23_14-29-31_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="612" data-original-width="603" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi46tq5BsbHEKN7SSwsZjfzxJ5fPsogDagHqospSOx4LYXhbzppvKBLfb9yue4P5Q6HOl5hvCx1Qm6s-yY32T5QgNPkAwiPeX5NQAOrLeQkvlmfhzoSMdOK1Rg2R6A99CDA6sKLh1yaXHtq/s400/SnapCrab_NoName_2017-11-23_14-29-31_No-00.png" width="393" /></a></div>
</div>
<br />
<h3 class="MYtemp-h3">
作成完了</h3>
<div class="MYtemp-plain">
作成完了です。!<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBJTs4htO9kksYyifUlHjqr5JuZn-1S47vZm3nFkCv8C5uXiXe9tZxeqI7nhwGJLU8zdPfYgRJUShH83_lJ-DLhkX0YCn8zH_VdhUfkqElutaK2be8FdwENWL6vUQwPP5Z4TfqZ9ovMhS/s1600/SnapCrab_NoName_2017-11-23_14-32-24_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="375" data-original-width="869" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBJTs4htO9kksYyifUlHjqr5JuZn-1S47vZm3nFkCv8C5uXiXe9tZxeqI7nhwGJLU8zdPfYgRJUShH83_lJ-DLhkX0YCn8zH_VdhUfkqElutaK2be8FdwENWL6vUQwPP5Z4TfqZ9ovMhS/s400/SnapCrab_NoName_2017-11-23_14-32-24_No-00.png" width="400" /></a></div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
今回はアカウント作成についてまとめました。<br />
作成の賞味時間は10分ちょっとってとこでしょうか。<br />
正直アカウント作るより記事書く時間の方が(個人情報隠したりで)5倍くらいかかっています。<br />
次回は、EC2インスタンス作成編です。<br />
すでに作っているんですが、「えっ、こんなに簡単なんですか!?」って感じでした。<br />
なんで今まで手を出さなかった?って思ってしまいます。<br />
<br />
それではまた。
</div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-31217345748037858582017-11-12T16:40:00.000+09:002017-11-12T16:40:19.612+09:00PythonからMariaDBにアクセスしてみよう<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
PythonでMariaDBにアクセスをやってみます。</h1>
<div class="MYtemp-plain">
前回からずいぶん時間がかかってしましましたが、<br />
私的なもろもろでずいぶん時間がとられてしまってました。<br />
今回は予告通りPythonからMariaDBにアクセスしてみます。<br />
<br />
今回も調べつつハマってしまった部分があったので、ちゃんと書いておこうと思います。<br />
<br />
では、以下本編です。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#setup">設定</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行すると</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
PythonからMariaDBにアクセスしてデータを取り出してみよう!
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="setup">
設定</h2>
<div class="MYtemp-plain">
PythonからMariaDBにアクセスには、複数のパッケージのインストールが必要でした。<br />
<br />
<h3 class="MYtemp-h3">
Linaxパッケージインストール</h3>
<br />
<h3 class="MYtemp-h3">
python-develインストール</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">yum -y install python-devel
</td>
</tr>
</tbody>
</table>
<h3 class="MYtemp-h3">
gccインストール</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">yum -y install gcc
</td>
</tr>
</tbody>
</table>
<h3 class="MYtemp-h3">
mariadb-devel.x86_64インストール</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">yum -y install mariadb-devel.x86_64
</td>
</tr>
</tbody>
</table>
<h3 class="MYtemp-h3">
Pythonパッケージインストール</h3>
<br />
<h3 class="MYtemp-h3">
とりあえずアップグレード</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">pip install --upgrade setuptools
</td>
</tr>
</tbody>
</table>
<h3 class="MYtemp-h3">
MySQL-Pythonインストール</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">pip install MySQL-Python
</td>
</tr>
</tbody>
</table>
<h3 class="MYtemp-h3">
で、結局何にはまってしまったのか?</h3>
失敗したときには、<br />
python-develインストール<br />
⇒ pipのアップグレード<br />
⇒ MySQL-Pythonインストール<br />
とすすめたのですが、上手くいきませんでした。orz<br />
<br />
こちらのサイトhttp://vayacico.hatenablog.com/entry/2017/04/24/003443<br />
の記載「yum install mysql-community-devel.x86_64」を見て、<br />
「Mariadbならそれ用があるんじゃない?」って思って、<br />
パッケージ一覧からmariaで始まる始まるものがあったので、<br />
mariadb-devel.x86_64をインストール。<br />
<br />
またpip install MySQL-Python事態で失敗するもしていて、<br />
こちらhttps://qiita.com/takahashi-kazuki/items/994a7f9741c93b80dc24<br />
を参考にgccをインストール<br />
<br />
これで動かせる状況まで持って行けました。<br />
ありがとうございました。</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<h3 class="MYtemp-h3">
SQLTest-Select-Python.cgi</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<div>
<div>
<span style="color: #608b4e;">#!/usr/bin/python</span></div>
<div>
<span style="color: #608b4e;"># -*- coding: utf-8 -*-</span></div>
<br /><div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> cgi</span></div>
<br /><div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> MySQLdb</span></div>
<br /><div>
<span style="color: #d4d4d4;">html </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'''Content-Type: text/plain</span></div>
<br /><div>
<span style="color: #ce9178;">'''</span></div>
<div>
<span style="color: #569cd6;">print</span><span style="color: #d4d4d4;"> (html)</span></div>
<br /><br /><div>
<span style="color: #d4d4d4;">connection </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> MySQLdb.connect(</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">host</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">'192.168.11.14'</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">db</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"TESTDB"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">user</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"TESTUSER"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">passwd</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"TESTPASS"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">charset</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"utf8"</span></div>
<div>
<span style="color: #d4d4d4;"> )</span></div>
<br /><div>
<span style="color: #d4d4d4;">cursor </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> connection.cursor()</span></div>
<div>
<span style="color: #608b4e;"># SQL</span></div>
<div>
<span style="color: #d4d4d4;">cursor.execute(</span><span style="color: #ce9178;">"SET NAMES utf8"</span><span style="color: #d4d4d4;">)</span></div>
<br /><div>
<span style="color: #d4d4d4;">cursor.execute(</span><span style="color: #ce9178;">"insert into TESTTABLE (name) values ('XXX')"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;">connection.commit()</span></div>
<br /><div>
<span style="color: #d4d4d4;">cursor.execute(</span><span style="color: #ce9178;">"select * from TESTTABLE"</span><span style="color: #d4d4d4;">)</span></div>
<div>
<span style="color: #d4d4d4;">result </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> cursor.fetchall()</span></div>
<br /><div>
<span style="color: #c586c0;">for</span><span style="color: #d4d4d4;"> row </span><span style="color: #569cd6;">in</span><span style="color: #d4d4d4;"> result:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">print</span><span style="color: #d4d4d4;"> (</span><span style="color: #ce9178;">"{},{}"</span><span style="color: #d4d4d4;">.format(row[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">],row[</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">].encode(</span><span style="color: #ce9178;">"utf8"</span><span style="color: #d4d4d4;">)))</span></div>
<br /><div>
<span style="color: #d4d4d4;">cursor.close()</span></div>
<div>
<span style="color: #d4d4d4;">connection.close()</span></div>
<br /><div>
<span style="color: #569cd6;">print</span><span style="color: #d4d4d4;"> (</span><span style="color: #ce9178;">"OK"</span><span style="color: #d4d4d4;">)</span></div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="MYtemp-plain">
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">実行すると</h2>
<div class="MYtemp-plain">
SQLTest-Select-Python.cgiにアクセスすると、<br>
1,2,3,とカウントアップしながらデータベースに追加されて、<br>
データ全件が表示されます。<br>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
今回はPythonからMariaDBにアクセスしてみました。<br>
これでフロント、サーバ側処理、データベースへの接続それぞれが準備できました。<br>
次はフロントからデータベースまで使って何か作ってみたいところ・・・。<br>
出版物だと入り口としてToDoアプリとかよく見ますし、<br>
そういうのを作ってみようと思います。<br>
<br>
ご参考になれば幸いです。<br>
ご利用は自己責任で!<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-30472819511208220922017-10-19T00:26:00.000+09:002017-10-19T00:29:25.667+09:00Windows10FallCreatorsUpdate(ver1709)のプリインストールアプリの削除について <style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 1px solid #AAAAAA;;
padding: 5px
border-collapse: collapse;
}
td.MYtemp-td{
border: 1px solid #AAAAAA;
font-family: Consolas;
font-size: 16px;
padding: 3px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">Windows10 Fall Creators Updateがやってきた</h1>
<div class="MYtemp-plain">
Windows10 Fall Creators Updateがやってきました。<br>
今回は以前の投稿同様速報的に、<br>
Windows10Windows10 Fall Creators Updateのプリインストールアプリの削除可否をレポートします。<br>
</div>
</section>
<a name='more'></a>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#procedure">手順</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#result">結果</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="procedure">手順</h2>
<div class="MYtemp-plain">
以前の投稿に手順がまとまっているので、そちらを参照お願いします。
<a href="https://axy-memorandumanddiary.blogspot.jp/2017/05/windows10creators-updatever1703.html">Windows10Creators Update(ver1703)のプリインストールアプリの削除について</a>
</div>
</section><section class="MYtemp-section">
<h2 class="MYtemp-h2" id="result">結果</h2>
<div class="MYtemp-plain">
アプリの削除結果は以下の通りでした。
<table class="MYtemp-table" cellspacing="0">
<tbody class="MYtemp-tbody">
<tr><td class="MYtemp-td">アプリ名称</td><td class="MYtemp-td">結果</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.CloudExperienceHost</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.AAD.BrokerPlugin</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.ShellExperienceHost</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> windows.immersivecontrolpanel</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.Cortana</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.MicrosoftEdge</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.ContentDeliveryManager</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Framework.1.3</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Framework.1.3</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Runtime.1.4</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Runtime.1.4</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Framework.1.6</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Framework.1.6</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Runtime.1.6</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Runtime.1.6</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.XboxIdentityProvider</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Runtime.1.3</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.NET.Native.Runtime.1.3</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.XboxGameCallableUI</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Windows.PrintDialog</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.SecureAssessmentBrowser</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.SecondaryTileExperience</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.SecHealthUI</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.PinningConfirmationDialog</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.Apprep.ChxApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.AssignedAccessLockApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.LockApp</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.OOBENetworkCaptivePortal</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.PPIProjection</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.HolographicFirstRun</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> 1527c705-839a-4832-9118-54d4Bd6a0c89</td><td class="MYtemp-td">不可</td><tr>
<tr><td class="MYtemp-td"> c5e2524a-ea46-4f67-841f-6a9465d9d515</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> E2A4F912-2574-4A75-9BB0-0D023378592B</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> F46D4000-FD22-4DB4-AC8E-4E1DDDE828FE</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> InputApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.AccountsControl</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.ParentalControls</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.OOBENetworkConnectionFlow</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.PeopleExperienceHost</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.ECApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.CredDialogHost</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.BioEnrollment</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.XboxSpeechToTextOverlay</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.WindowsFeedbackHub</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Wallet</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.People</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.MicrosoftStickyNotes</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.MicrosoftSolitaireCollection</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.MicrosoftOfficeHub</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Messaging</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.DesktopAppInstaller</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.BingWeather</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.VCLibs.140.00</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.VCLibs.140.00</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.XboxGameOverlay</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.GetHelp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.OneConnect</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Print3D</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Xbox.TCUI</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.StorePurchaseApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.WindowsCalculator</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.XboxApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.VCLibs.140.00.UWPDesktop</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.VCLibs.140.00.UWPDesktop</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Microsoft3DViewer</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Getstarted</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> microsoft.windowscommunicationsapps</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.SkypeApp</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.MSPaint</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Windows.Photos</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.ZuneMusic</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.WindowsStore</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.WindowsSoundRecorder</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Office.OneNote</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.WindowsMaps</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.WindowsCamera</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.WindowsAlarms</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.ZuneVideo</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Advertising.Xaml</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Advertising.Xaml</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.BingNews</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Facebook.Facebook</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Services.Store.Engagement</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> Microsoft.Services.Store.Engagement</td><td class="MYtemp-td">可</td><tr>
<tr><td class="MYtemp-td"> 9E2F88E3.Twitter</td><td class="MYtemp-td">可</td><tr>
</tbody>
</table>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
今回もアプリが増えていますね。<br>
1703と違ってRantimeは消えなかったようです。<br>
<br>
実行は自己責任でお願いします。<br>
以上<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-60870522513409003882017-10-09T02:17:00.000+09:002017-10-10T22:52:06.066+09:00Sambaを設定しよう。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">Sambaを</h1>
<div class="MYtemp-plain">
いろいろ調べて、設定してみたいと思います。<br>
というのも、IDE無のnanoエディターで編集し続けるのに限界を感じてきたので、<br>
Linax上のディレクトリを共有フォルダとして接続して、<br>
ファイルの直接編集が可能なようにしたいと思ったからでした。<br>
(インテリセンス欲しい・・・。)
<br>
それではやってみます。<br>
</div>
</section>
<a name='more'></a>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#procedure">手順</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
CentOS7にSambaをインストール。<br>
共有フォルダとしてアクセスしてみよう。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="procedure">
手順</h2>
<div class="MYtemp-plain">
<br>
<h3 class="MYtemp-h3">
インストール</h3>
<div class="MYtemp-plain">
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">yum -y install samba
</td>
</tr>
</tbody>
</table>
1分もかからないでインストールは終わってしまします。
</div>
<h3 class="MYtemp-h3">
設定</h3>
<div class="MYtemp-plain">
設定ファイルを編集します。<br>
インストール直後は以下のようになっています。<br>
//etc/samba/smb.confを編集します。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
# See smb.conf.example for a more detailed config file or
# read the smb.conf manpage.
# Run 'testparm' to verify the config is correct after
# you modified it.
[global]
workgroup = SAMBA
security = user
passdb backend = tdbsam
printing = cups
printcap name = cups
load printers = yes
cups options = raw
[homes]
comment = Home Directories
valid users = %S, %D%w%S
browseable = No
read only = No
inherit acls = Yes
[printers]
comment = All Printers
path = /var/tmp
printable = Yes
create mask = 0600
browseable = No
[print$]
comment = Printer Drivers
path = /var/lib/samba/drivers
write list = root
create mask = 0664
directory mask = 0775
</pre>
</td>
</tr>
</tbody>
</table>
以下のように書き換えました。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
# See smb.conf.example for a more detailed config file or
# read the smb.conf manpage.
# Run 'testparm' to verify the config is correct after
# you modified it.
[global]
workgroup = WORKGROUP
security = user
server string = MYSERVER
passdb backend = tdbsam
printing = cups
printcap name = cups
load printers = yes
cups options = raw
[homes]
comment = Home Directories
valid users = %S, %D%w%S
browseable = No
read only = No
inherit acls = Yes
[printers]
comment = All Printers
path = /var/tmp
printable = Yes
create mask = 0600
browseable = No
[print$]
comment = Printer Drivers
path = /var/lib/samba/drivers
write list = root
create mask = 0664
directory mask = 0775
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="MYtemp-h3">
ファイアウォール設定</h3>
<div class="MYtemp-plain">
ファイアウォールにsambaのアクセスを許可します。<br>
再起動後も有効になるようにします。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
firewall-cmd --add-service samba<br>
firewall-cmd --add-service samba --permanent
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="MYtemp-h3">
ユーザー登録</h3>
<div class="MYtemp-plain">
pdbeditコマンドでユーザー登録します。<br>
サーバーにユーザー登録されていることが条件になるので、<br>
今回はrootで行います。(本来はセキュリティ上絶対やってはダメな気がする・・・。)<br>
パスワードの設定を要求されるので任意のものを設定します。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">pdbedit -a root
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="MYtemp-h3">
samba起動</h3>
<div class="MYtemp-plain">
sambaの起動にはsmbとnmbの二つのサービスを起動する必要があるようです。<br>
smbは、セッション制御を、<br>
nmbは、NETBIOSネームサービスを提供するらしいです。<br>
それぞれ常時起動するようにもしておきましょう。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
systemctl start smb.service<br>
systemctl start nmb.service<br>
systemctl enable smb.service<br>
systemctl enable nmb.service
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="MYtemp-h3">
接続テスト</h3>
<div class="MYtemp-plain">
接続をテストしてみましょう。<br>
エクスプローラで、「\\[設定したサーバーのアドレス]」を入力してみましょう。<br>
パスワード要求がされたら、設定したものを入力してみましょう。<br>
接続されるはずです。<br>
<br>
が多分接続に使用したアカウントのホームディレクトリになってしまったはず。<br>
もう一回//etc/samba/smb.confを下のように編集します。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
# See smb.conf.example for a more detailed config file or
# read the smb.conf manpage.
# Run 'testparm' to verify the config is correct after
# you modified it.
[global]
workgroup = WORKGROUP
security = user
server string = MYSERVER
passdb backend = tdbsam
printing = cups
printcap name = cups
load printers = yes
cups options = raw
host allow = 192.168.11.
dos charset = CP932
unix charset = UTF8
display charset = UTF8
[www]
comment = www
browseable = yes
writable = yes
path = /var/www
write list = root
create mode = 0664
directory mode = 0775
share modes = yes
[homes]
comment = Home Directories
valid users = %S, %D%w%S
browseable = No
read only = No
inherit acls = Yes
</pre>
</td>
</tr>
</tbody>
</table>
それでは、接続しなおしてみましょう。<br>
エクスプローラで、「\\[設定したサーバーのアドレス]\www」を入力してみると、<br>
今度は/var/wwwが開いたはずです。
</div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
今回はSambaの設定を行ってみました。<br>
予定していた各言語からmariaDBへのアクセスを作ってみるつもりだったんですが、<br>
nanoでコード編集を続けるのに限界を感じたので、設定してみた次第です。<br>
なぜ今まで設定をしていなかったのか。<br>
全く怠慢ですね・・・。<br>
<br>
次回こそ、Python、Perl、C#(asp)からMariaDBにアクセスしてみたいと思います。<br>
<br>
ご参考になれば幸いです。<br>
<br>
ご利用は自己責任で!<br>
<br>
以上
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-73150038331988289772017-10-06T07:19:00.001+09:002017-10-09T02:16:40.941+09:00CentOSにデータベースをインストールしよう<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
今回は</h1>
<div class="MYtemp-plain">
CentOSにデータベースを設定してみたいと思います。<br />
CentOS7では標準は<a href="https://mariadb.com/kb/ja/mariadb/">MariaDB</a>というものを使うようなのでそちらをインストールして、<br />
単純な検索実行までしてみたいと思います。<br />
今まではWindowsserverに保存した.mdbファイルに、<br />
ODBCで接続するaspを作ることはしてきましたが、<br />
pythonやperlでCGIとかWebAPIを作るならやっぱりデータベースは必須だよね!<br />
ってこと調べながらやってみました。</div>
</section>
<a name='more'></a>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#procedure">手順</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
CentOS7にMariaDBをインストール。
簡単な検索をしてみよう。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="procedure">
手順</h2>
<div class="MYtemp-plain">
<br>
<h3 class="MYtemp-h3">
インストール</h3>
<div class="MYtemp-plain">
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">yum -y install mariadb-server
</td>
</tr>
</tbody>
</table>
1分もかからないでインストールは終わってしまします。
</div>
<br>
<h3 class="MYtemp-h3">
設定</h3>
<div class="MYtemp-plain">
設定ファイルの編集をします。
/etc/my.cnf.d/server.cnfの中で以下を[mysqld]の下に追加しました。<br>
標準の文字コードをutf8にするのが目的です。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
character-set-server = utf8
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h3 class="MYtemp-h3">
MariaDBの起動</h3>
<div class="MYtemp-plain">
以下コマンドでMariaDBを起動します。
自動起動も設定しておきましょう。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
systemctl start mariadb<br>
systemctl enable mariadb
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h3 class="MYtemp-h3">
初期設定</h3>
<div class="MYtemp-plain">
以下コマンドを使用して初期設定します。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
mysql_secure_installation
</td>
</tr>
</tbody>
</table>
上記を入力すると以下の確認が出ますので、適宜設定しましょう。<br>
私はすべてyで答えました。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MariaDB
SERVERS IN PRODUCTION USE! PLEASE READ EACH STEP CAREFULLY!
In order to log into MariaDB to secure it, we'll need the current
password for the root user. If you've just installed MariaDB, and
you haven't set the root password yet, the password will be blank,
so you should just press enter here.
Enter current password for root (enter for none):
OK, successfully used password, moving on...
Setting the root password ensures that nobody can log into the MariaDB
root user without the proper authorisation.
Set root password? [Y/n] y
New password:
Re-enter new password:
Password updated successfully!
Reloading privilege tables..
... Success!
By default, a MariaDB installation has an anonymous user, allowing anyone
to log into MariaDB without having to have a user account created for
them. This is intended only for testing, and to make the installation
go a bit smoother. You should remove them before moving into a
production environment.
Remove anonymous users? [Y/n] y
... Success!
Normally, root should only be allowed to connect from 'localhost'. This
ensures that someone cannot guess at the root password from the network.
Disallow root login remotely? [Y/n] y
... Success!
By default, MariaDB comes with a database named 'test' that anyone can
access. This is also intended only for testing, and should be removed
before moving into a production environment.
Remove test database and access to it? [Y/n] y
- Dropping test database...
... Success!
- Removing privileges on test database...
... Success!
Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.
Reload privilege tables now? [Y/n] y
... Success!
Cleaning up...
All done! If you've completed all of the above steps, your MariaDB
installation should now be secure.
Thanks for using MariaDB!
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h3 class="MYtemp-h3">
ログオン</h3>
<div class="MYtemp-plain">
以下コマンドを使ってroot権限でログオン<br>
(mariadbですがコマンドはmysqlなんですね。)
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
mysql -u root -p
</td>
</tr>
</tbody>
</table>
上記を実行するとパスワードを確認されます。
初期設定で決めたものを入力しましょう
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
Enter password:
Welcome to the MariaDB monitor. Commands end with ; or \g.
Your MariaDB connection id is 20
Server version: 5.5.56-MariaDB MariaDB Server
Copyright (c) 2000, 2017, Oracle, MariaDB Corporation Ab and others.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h3 class="MYtemp-h3">
データベースを作る</h3>
<div class="MYtemp-plain">
以下コマンドでデータベースを作ります。<br>
データベースの名前を今回は「TESTDB」にしておきます。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
CREATE DATABASE TESTDB;
</td>
</tr>
</tbody>
</table>
<br>
アカウントににアクセス権を与えます。
今回はパスワードがTESTPASSのTESTUSERアカウントにTESTDBのアクセス権を与えます。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
GRANT ALL PRIVILEGES ON TESTDB.* TO TESTUSER@'%' IDENTIFIED BY 'TESTPASS';
</td>
</tr>
</tbody>
</table>
<br>
作成したユーザーで以下コマンドでログインしなおしてみましょう。
パスワードには「TESTPASS」と答えましょう
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
mysql -u TESTUSER -p
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h3 class="MYtemp-h3">
データベースを使う</h3>
<div class="MYtemp-plain">
使用するデータベースを選択します。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
USE TESTDB
</td>
</tr>
</tbody>
</table>
<br>
テーブルを作成します。
中身は自動でカウントアップしてくれる数値型の「ID」と30文字までの長さを格納する「NAME」です
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
CREATE TABLE TESTTABLE (ID INT AUTO_INCREMENT PRIMARY KEY, NAME VARCHAR(30) );
</td>
</tr>
</tbody>
</table>
<br>
検索用のデータを入れてみましょう。
使うのはINSERT文ですね。<br>
NAMEだけを設定していますが、IDはAUTO_INCREMENT を指定しているので、<br>
自動でカウントアップして設定されます。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
INSERT INTO TESTTABLE(NAME) VALUES('tanaka');<br>
INSERT INTO TESTTABLE(NAME) VALUES('satou');<br>
INSERT INTO TESTTABLE(NAME) VALUES('山下');<br>
INSERT INTO TESTTABLE(NAME) VALUES('高橋');<br>
</td>
</tr>
</tbody>
</table>
<br>
それでは以下のコマンドで検索をしてみましょう
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
SELECT * FROM TESTTABLE;
</td>
</tr>
</tbody>
</table>
結果は以下のようになります。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
+----+--------+
| ID | NAME |
+----+--------+
| 1 | tanaka |
| 2 | satou |
| 3 | 山下 |
| 4 | 高橋 |
+----+--------+
4 rows in set (0.00 sec)
</pre>
</td>
</tr>
</tbody>
</table>
<br>
もちろんIDをもとに名前だけを表示することもできます。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
SELECT * FROM TESTTABLE WHERE ID=1;
</td>
</tr>
</tbody>
</table>
結果は以下のようになります。
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 500px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<pre>
+----+--------+
| ID | NAME |
+----+--------+
| 1 | tanaka |
+----+--------+
1 row in set (0.00 sec)
</pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
今回はMariaDBの設定と簡単な検索まで行ってみました。<br>
記事書きながらの設定だったので時間はかかっていますが、<br>
作業だけなら10分もかからない作業で済みそうです。<br>
<br>
次回は、Python、Perl、C#(asp)からアクセスしてみたいと思います。<br>
<br>
ご参考になれば幸いです。<br>
<br>
ご利用は自己責任で!<br>
<br>
以上
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-12832737096242782912017-09-12T22:39:00.004+09:002017-09-12T22:46:17.118+09:00HTML5とJavascriptとPythonでファイルをアップロードしてみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
前回</h1>
<div class="MYtemp-plain">
<a href="https://axy-memorandumanddiary.blogspot.jp/2017/08/classmytempfont-family-osakaosaka.html">HTML5とJavascriptとファイルビュアーを作ってみた。 </a>で<br />
ローカル上にあるファイルの表示をしてみました。<br />
今回はそのファイルをサーバーにアップロードして、アップロード先のURLを返してもらう<br />
ファイルアップローダーを作ってみようと思います。<br />
<br />
それでは、本編です。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
Ajaxでファイルをアップロードして、保存先を返すファイルアップローダーを作る。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
ファイルは3つ。<br />
フロントのtest014-1.htmlとtest014css.cssと<br />
Ajax応答するのtest014-Reception.cgidです。<br />
<h3 class="MYtemp-h3">
test014-1.html</h3>
<div class="MYtemp-plain">
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./test014css.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">updateAjax</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">formid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">XMLHttpRequest</span><span style="color: #d4d4d4;">();</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">onreadystatechange</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">collupdate</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">open</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"POST"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"http://[サーバーのアドレス]/cgi-bin/test014-Reception.cgi"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">FormData</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">formid</span><span style="color: #d4d4d4;">));</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]</span><span style="color: #d4d4d4;">!=</span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">send</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">collupdate</span><span style="color: #d4d4d4;">(){</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">readyState</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">4</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">&&</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">obj</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">JSON</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">parse</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">responseText</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">alert</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">responseText</span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"更新されました"</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">str</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">xmlHttp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">responseText</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">obj</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">JSON</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">parse</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">str</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"viewerserver"</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">innerHTML</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">obj</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div><img class=\"photo\" src=\"http://[サーバーのアドレス]/"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">obj</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">filename</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"\" /></div>\n"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイルAPIで選択したファイルを指定のタグへ追加する関数</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第一引数inputタグのID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第二引数取り込んだファイルのファイル名の表示先となるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第三引数取り込んだファイルの表示先になるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">view</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//各オブジェクト取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]</span><span style="color: #d4d4d4;">!=</span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"disabled"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">==</span><span style="color: #ce9178;">"image/jpeg"</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">||</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">==</span><span style="color: #ce9178;">"image/png"</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//FileReaderオブジェクト作成</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">FileReader</span><span style="color: #d4d4d4;">();</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイルロード後のコールバック関数定義</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">onload</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<img class=\"photo\" src=\""</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">result</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"\" />\n"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイル読み込み</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">readAsDataURL</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">==</span><span style="color: #ce9178;">"text/plain"</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//FileReaderオブジェクト作成</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">FileReader</span><span style="color: #d4d4d4;">();</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイルロード後のコールバック関数定義</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">onload</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"</div>"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイル読み込み</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">readAsText</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">],</span><span style="color: #ce9178;">"shift-jis"</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>.jpeg,.png,.txt以外受付できません。</div>"</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>ファイルが未選択です。</div>"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//view関数で処理した内容をリセットする関数</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第一引数inputタグのID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第二引数取り込んだファイルのファイル名の表示先となるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第三引数取り込んだファイルの表示先になるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">reset</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//各オブジェクト取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>ファイルが未選択です。</div>"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfileapi"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfilename"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">for</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myuploadfile"</span><span style="color: grey;">></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfileapibutton"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">for</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myuploadfile"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> ファイル選択</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfileapireset"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onclick</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"reset('myuploadfile','myfilename','viewer');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> リセット</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">form</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">enctype</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"multipart/form-data"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"sendform"</span><br />
<span style="color: #ce9178;"> </span><span style="color: #9cdcfe;">method</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"post"</span><span style="color: grey;">> <span style="color: red; font-size: large;"><strong>--ポイント!</strong></span></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"file"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"uploadfile"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myuploadfile"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onchange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"view('myuploadfile','myfilename','viewer');"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">button</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"button"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onclick</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"updateAjax('sendform','myuploadfile');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> ファイルをアップロード</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"viewer"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"viewerserver"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="MYtemp-h3">
test014.css</h3>
<div class="MYtemp-plain">
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: #d7ba7d;">div</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<br />
<div>
<span style="color: #d7ba7d;">#myfileapibutton</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">table-cell</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">30px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FD8080</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">center</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">vertical-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">middle</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#myfileapireset</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">table-cell</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">30px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FD8080</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">center</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">vertical-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">middle</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#myfilename</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">table-cell</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">30px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">left</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">vertical-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">middle</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#CCCCCC</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#myuploadfile</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">.photo</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">:</span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="MYtemp-h3">
test014-Reception.cgi</h3>
<div class="MYtemp-plain">
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: #608b4e;">#!/usr/bin/python</span></div>
<div>
<span style="color: #608b4e;"># -*- coding: utf-8 -*-</span></div>
<br />
<div>
<span style="color: #c586c0;">from</span><span style="color: #d4d4d4;"> os </span><span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> environ</span></div>
<div>
<span style="color: #c586c0;">from</span><span style="color: #d4d4d4;"> datetime </span><span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> datetime</span></div>
<br />
<div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> fcntl</span></div>
<div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> io</span></div>
<div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> cgi</span></div>
<div>
<span style="color: #c586c0;">import</span><span style="color: #d4d4d4;"> hashlib</span></div>
<br />
<div>
<span style="color: #d4d4d4;">Forms </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> cgi.FieldStorage()</span></div>
<div>
<span style="color: #d4d4d4;">Keys </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> Forms.keys()</span></div>
<br />
<div>
<span style="color: #d4d4d4;">mustkeys</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;">[</span><span style="color: #ce9178;">"uploadfile"</span><span style="color: #d4d4d4;">]</span></div>
<div>
<span style="color: #d4d4d4;">Filename </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #608b4e;">#保存するファイル名を作成</span></div>
<div>
<span style="color: #d4d4d4;">NewFileName </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> hashlib.md5( \</span></div>
<div>
<span style="color: #d4d4d4;"> datetime.now().strftime(</span><span style="color: #ce9178;">"%Y/%m/%d %H:%M:%S"</span><span style="color: #d4d4d4;">) \</span></div>
<div>
<span style="color: #d4d4d4;"> ).hexdigest();</span></div>
<br />
<div>
<span style="color: #608b4e;">#Postの要素の個数が、必須の要素の個数と同一であることを確認</span></div>
<div>
<span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> ( </span><span style="color: #dcdcaa;">len</span><span style="color: #d4d4d4;">(</span><span style="color: #4ec9b0;">set</span><span style="color: #d4d4d4;">(mustkeys) </span><span style="color: #d4d4d4;">-</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">set</span><span style="color: #d4d4d4;">(Keys)) </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">):</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">#必要なpostの要素があること、要素が空ではないことを確認</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">( </span><span style="color: #569cd6;">not</span><span style="color: #d4d4d4;">( Forms[</span><span style="color: #ce9178;">"uploadfile"</span><span style="color: #d4d4d4;">].value </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">)):</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">#レスポンス用のファイルのパス文字列を作成</span></div>
<div>
<span style="color: #d4d4d4;"> Filename </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'html/tmp/'</span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> NewFileName </span><span style="color: #d4d4d4;">+</span><span style="color: #ce9178;">"."</span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> \</span></div>
<div>
<span style="color: #d4d4d4;"> Forms[</span><span style="color: #ce9178;">"uploadfile"</span><span style="color: #d4d4d4;">].filename.split(</span><span style="color: #ce9178;">"."</span><span style="color: #d4d4d4;">)[</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">];</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">#ファイル保存先のパス文字列を作成</span></div>
<div>
<span style="color: #d4d4d4;"> target </span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"../html/tmp//"</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> NewFileName </span><span style="color: #d4d4d4;">+</span><span style="color: #ce9178;">"."</span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> \</span></div>
<div>
<span style="color: #d4d4d4;"> Forms[</span><span style="color: #ce9178;">"uploadfile"</span><span style="color: #d4d4d4;">].filename.split(</span><span style="color: #ce9178;">"."</span><span style="color: #d4d4d4;">)[</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">];</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">with</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">open</span><span style="color: #d4d4d4;">(target,</span><span style="color: #ce9178;">"wb"</span><span style="color: #d4d4d4;">) </span><span style="color: #569cd6;">as</span><span style="color: #d4d4d4;"> file:</span></div>
<div>
<span style="color: #d4d4d4;"> fcntl.flock(file.fileno(), fcntl.LOCK_EX);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">try</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> file.write(Forms[</span><span style="color: #ce9178;">"uploadfile"</span><span style="color: #d4d4d4;">].value);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">finally</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> fcntl.flock( file.fileno(), fcntl.LOCK_UN);</span></div>
<br />
<br />
<div>
<span style="color: #608b4e;">#JSONデータの作成・出力</span></div>
<div>
<span style="color: #d4d4d4;">json1 </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'''Content-Type: application/json; charset=utf-8</span></div>
<br />
<div>
<span style="color: #ce9178;">{'''</span></div>
<br />
<div>
<span style="color: #d4d4d4;">json2 </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'"filename": "'</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> Filename </span><span style="color: #d4d4d4;">+</span><span style="color: #ce9178;">'"}'</span></div>
<br />
<div>
<span style="color: #569cd6;">print</span><span style="color: #d4d4d4;"> json1</span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;">json2</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="MYtemp-plain">
test014-1.htmlにアクセスして操作します。<br />
ファイルを選択して「ファイルをアップロード」ボタンを押すことでアップロードを実行<br />
応答を取得するとポップアップしサーバー側のURLを利用して画像を表示します。</div>
</section>
<br>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">
ポイント!</h2>
<div class="MYtemp-plain">
フロントエンド
<ul class="MYtemp-ul" >
<li class="MYtemp-li" >
ファイルをアップロードするフォームには、「enctype="multipart/form-data"」をかならず設定すること!
</li>
<li class="MYtemp-li" >
ファイルをアップロードするフォームは、「method="post"」にすること。
</li>
</ul>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAS_6bK-aBtdASD5iOLnCyvl0oYdCd3Y0iok0BP7gUlC1JoDlY7G_-zSEPk4pN7FPBxf-P7igFPAedVx0xSTgBS6btkxotlGAp4liJMifFwf9EdE9tJfc4Sc4loaf7dT7-8OoegA1SmHpX/s1600/2017vdfjbjdkvfb.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAS_6bK-aBtdASD5iOLnCyvl0oYdCd3Y0iok0BP7gUlC1JoDlY7G_-zSEPk4pN7FPBxf-P7igFPAedVx0xSTgBS6btkxotlGAp4liJMifFwf9EdE9tJfc4Sc4loaf7dT7-8OoegA1SmHpX/s400/2017vdfjbjdkvfb.gif" width="560" data-original-width="884" data-original-height="628" /></a></div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
今回はファイルアップローダを作ってみました。<br>
さまざまなアップローダーがありますが、<br>
「こういった感じで動くんだな(サービス展開するならいろいろと仕込む必要はあるはずですが・・・)」<br>
というイメージが持てたので、非常に勉強になりました。<br>
最近フロント側でいろんなギミックを作ることを勉強していたので、<br>
サーバーサイドのPythonでいささか手間取りましたが、<br>
サクサクと動いてくれて満足です。<br>
<br>
参考になれば幸いです。<br>
<br>
ご利用は自己責任で!<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-990018339981054892017-09-04T23:44:00.003+09:002017-09-05T22:09:45.159+09:00テキストボックスの入力除外リスト機能を作ってみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
その言葉は使わせない!</h1>
<div class="MYtemp-plain">
今回はテキストボックスに入力した文字列の中身を照合して、<br />
使用していいのか判定して、表示みたいと思います。<br />
<br />
それでは本編です。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample1">サンプルコード1</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example1">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point1">ポイント1</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#break">一休み</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample2">サンプルコード2 高速化版</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example2">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point2">ポイント2</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
テキストボックスの中身を照合して使用していいか判定してみよう!<br />
そして高速化してみよう!!
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample1">
サンプルコード1</h2>
<div class="MYtemp-plain">
<h3 class="MYtemp-h3">
test015.html</h3>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); height: 1581px; width: 621px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span><br />
<div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./test015css.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> [ </span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"__6kh4zd"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"_0hmo8qv"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"_0l20t5a"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"_0tusswy"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"_0y1v855"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> ~~</span><span style="color: #9cdcfe;">省略</span><span style="color: #d4d4d4;">~~</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"zu522mgt"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"zvq7thq5"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"zydbox68"</span></div>
<div>
<span style="color: #d4d4d4;"> ];</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">matchchack</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">statusid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">resultid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;">){</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">statusid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">resultid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"検索中"</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//コールバック関数定義</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">collback</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;">(){ </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"vi"</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">innerHTML</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">]</span><span style="color: #d4d4d4;">+</span><span style="color: #ce9178;">":"</span><span style="color: #d4d4d4;">+</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">+</span><span style="color: #ce9178;">"<br>"</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">]){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"この入力は使えません"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{ </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//コールバックでのループ処理</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">+=</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">collback</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"使用可能です。"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フォーカスが当たっているときには再度処理実施</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">activeElement</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">matchchack</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">statusid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">resultid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">collback</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"searchtext"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onfocus</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"matchchack('searchtext','status','result');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"status"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"result"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"vi"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example1">
実行例-表示例</h2>
<div class="MYtemp-plain">
テクストボックスにフォーカスが当たると検索を開始します。
リストに一致した文字列があると「この入力は使えません」と表示し、
一致するものが無いと「使用可能です」と表示します。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwADG2psASV4VCdNKBE7D8wxVPooZsvxYWsLmuRRgP5eBi1i5yiaWvMfz1d572D19eTygMixVBWtXIEmP4kexdovrGasTqUO-n8cxoy8OuJeWA6BNdxTa8brL-_sLFYYunatBeE6Sz9d-A/s1600/AGDRecasddffx.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="164" data-original-width="218" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwADG2psASV4VCdNKBE7D8wxVPooZsvxYWsLmuRRgP5eBi1i5yiaWvMfz1d572D19eTygMixVBWtXIEmP4kexdovrGasTqUO-n8cxoy8OuJeWA6BNdxTa8brL-_sLFYYunatBeE6Sz9d-A/s400/AGDRecasddffx.gif" width="400" /></a></div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point1">
ポイント!</h2>
<div class="MYtemp-plain">
<ul class="MYtemp-ul">
<li class="MYtemp-li">
ループ処理はforやwhileで書かない!
<div class="MYtemp-plain">
入力に関する処理の中でforやwhileを検索などに使うとその処理中は入力ができなくなる。<br />
なので、ループ処理をコールバック関数で実現する。[matchchack関数の中のcollback関数]
</div>
</li>
<li class="MYtemp-li">
関数入口でフラグ処理
<div class="MYtemp-plain">
多重に実行されては困るので、関数処理の1行目でフラグ処理を行い、多重実行されないようにする。
[matchchack関数冒頭]
</div>
</li>
</ul>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="break">
一休み</h2>
<div class="MYtemp-plain">
これで検索処理ができました。<br />
<br />
しかし結果が出るまでが若干時間がかかりすぎている気がします・・・。<br />
今1000件の検索をしているけどタイミング次第で5秒以上かかってしまう。<br />
というのも、検索処理は文字列を昇順で並べて、0番目から末尾まで線形探索しているからです。<br />
aから始まるものは検索が早く終わるし、zで始まるものは時間がかかってしまします。<br />
<br />
次では少しく工夫して検索処理を高速化してみます。</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample2">
サンプルコード2</h2>
<div class="MYtemp-plain">
<h3 class="MYtemp-h3">
test015-index-metadata.html<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); height: 2318px; width: 605px;"><tbody class="MYtemp-tbody">
<tr class="MYtemp-tr"><td class="MYtemp-td"><br />
<div>
<div>
<span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./test015css.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> [</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"__6kh4zd"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"_0hmo8qv"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"_0l20t5a"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> ~~</span><span style="color: #9cdcfe;">省略</span><span style="color: #d4d4d4;">~~</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"zsx7_7o5"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"zu522mgt"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"zvq7thq5"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"zydbox68"</span></div>
<div>
<span style="color: #d4d4d4;"> ];</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">listindex1</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;">[</span><span style="color: #ce9178;">"_"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"1"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> ~~</span><span style="color: #9cdcfe;">省略</span><span style="color: #d4d4d4;">~~</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"w"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"x"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"y"</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"z"</span></div>
<div>
<span style="color: #d4d4d4;"> ];</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">listindex2</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;">[</span></div>
<div>
<span style="color: #d4d4d4;"> [</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">33</span><span style="color: #d4d4d4;">],</span></div>
<div>
<span style="color: #d4d4d4;"> [</span><span style="color: #b5cea8;">34</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">64</span><span style="color: #d4d4d4;">],</span></div>
<div>
<span style="color: #d4d4d4;"> [</span><span style="color: #b5cea8;">65</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">86</span><span style="color: #d4d4d4;">],</span></div>
<div>
<span style="color: #d4d4d4;"> ~~</span><span style="color: #9cdcfe;">省略</span><span style="color: #d4d4d4;">~~</span></div>
<div>
<span style="color: #d4d4d4;"> [</span><span style="color: #b5cea8;">927</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">950</span><span style="color: #d4d4d4;">],</span></div>
<div>
<span style="color: #d4d4d4;"> [</span><span style="color: #b5cea8;">951</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">970</span><span style="color: #d4d4d4;">],</span></div>
<div>
<span style="color: #d4d4d4;"> [</span><span style="color: #b5cea8;">971</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">999</span><span style="color: #d4d4d4;">]</span></div>
<div>
<span style="color: #d4d4d4;"> ];</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">matchchack</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">statusid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">resultid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;">){</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">statusid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">resultid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">indexkeyword</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">substr</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">indexresult</span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">listindex1</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">indexOf</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">indexkeyword</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">indexresult</span><span style="color: #d4d4d4;">==-</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">activeElement</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">){ </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"使用可能です"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">matchchack</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">statusid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">resultid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">start</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">listindex2</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">indexresult</span><span style="color: #d4d4d4;">][</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">end</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">listindex2</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">indexresult</span><span style="color: #d4d4d4;">][</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">]</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">start</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"検索中"</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//コールバック関数定義</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">collback</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;">(){ </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"vi"</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">innerHTML</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">]</span><span style="color: #d4d4d4;">+</span><span style="color: #ce9178;">":"</span><span style="color: #d4d4d4;">+</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">+</span><span style="color: #ce9178;">"<br>"</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">]){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"この入力は使えません"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{ </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//コールバックでのループ処理</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">list</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">&&</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">end</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">counter</span><span style="color: #d4d4d4;">+=</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">collback</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"使用可能です"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フォーカスが当たっているときには再度処理実施</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">activeElement</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">==</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">){</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">matchchack</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">targettextid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">statusid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">resultid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">status</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//コールバック定義終わり</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">setTimeout</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">collback</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"searchtext"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onfocus</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"matchchack('searchtext','status','result');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"status"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"result"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"vi"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td></tr>
</tbody></table>
</h3>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example2">
実行例-表示例2</h2>
<div class="MYtemp-plain">
実行例-表示例1と同じ文字列を検索してみます。<br />
明らかに実行例-表示例1よりも検索結果が素早く表示される。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4gmgJZPu_ZE1R3eHfmiBZtuCALLdYNIVF082I2M9OAr0CNPpTAAQ-9fKipUWyQqhvrwNnAdKLU0Z9FBImf-VX-8B_sLMU5ir2TF7tQgJcmBIXKbUOg7sYD2WUzZdNYD9lFi7w1FcmXO27/s1600/AGDRecasddffc.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="164" data-original-width="218" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4gmgJZPu_ZE1R3eHfmiBZtuCALLdYNIVF082I2M9OAr0CNPpTAAQ-9fKipUWyQqhvrwNnAdKLU0Z9FBImf-VX-8B_sLMU5ir2TF7tQgJcmBIXKbUOg7sYD2WUzZdNYD9lFi7w1FcmXO27/s400/AGDRecasddffc.gif" width="400" /></a></div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point2">
ポイント2</h2>
<div class="MYtemp-plain">
<ul class="MYtemp-ul">
<li class="MYtemp-li">
入力が空欄の場合は待機処理
<div class="MYtemp-plain">
</div>
</li>
<li class="MYtemp-li">
検索対象の配列のメタデータを使う
<div class="MYtemp-plain">
検索対象を効率良く探索するために、
<br />
<ol class="MYtemp-ul">
<li class="MYtemp-li">
検索対象の文字列の1文字目リスト
</li>
<li class="MYtemp-li">
検索対象のX個目からY個目までがどの1文字目で始まるかというリスト
</li>
</ol>
の二つのデータを使う。
</div>
<div class="MYtemp-plain">
このデータで検索対象を1000個の内で、aで始まるものや、<br />
zで始まるものだけに検索対象を絞ることができる。<br />
一様に文字列の1文字目がアルファベット26文字に分散するならば,<br />
検索時間は1/26以下にできるはず。
</div>
</li>
</ul>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
今回は文字列の検索処理を作ってみました。<br />
検索処理を2分探索にするとか、aが1文字目に多い場合はaだけ2文字目までメタデータを作ってみるとか<br />
工夫次第でもっと遊べそうです。<br />
<br />
参考になれば幸いです。<br />
ご使用は自己責任で。<br />
<br />
以上。
</div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-63861084667810017582017-08-28T23:02:00.000+09:002017-09-03T21:55:58.641+09:00HTML5とJavascriptでファイルビュアーを作ってみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
border:solid 1px #000000;
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
ブラウザで</h1>
<div class="MYtemp-plain">
ローカルファイルを表示できるものを作ってみました。<br />
画像とテキストファイルの取り込みができます。<br />
いい感じ(>_<)
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
HTML+CSS+JavaScriptでローカルファイルを取り込んで表示しよう!
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
<h2 class="MYtemp-h3">
test014.html</h2>
<div class="MYtemp-plain">
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); height: 2100px; width: 580px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span><br />
<div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./test014css.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイルAPIで選択したファイルを指定のタグへ追加する関数</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第一引数inputタグのID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第二引数取り込んだファイルのファイル名の表示先となるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第三引数取り込んだファイルの表示先になるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">view</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">){<span style="color: black;"> </span><span style="color: #d4d4d4;"><====[2]</span></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//各オブジェクト取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]</span><span style="color: #d4d4d4;">!=</span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"disabled"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">==</span><span style="color: #ce9178;">"image/jpeg"</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">||</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">==</span><span style="color: #ce9178;">"image/png"</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//FileReaderオブジェクト作成</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">FileReader</span><span style="color: #d4d4d4;">();</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイルロード後のコールバック関数定義</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">onload</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<img class=\"photo\" src=\""</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">result</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"\" />\n"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイル読み込み</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">readAsDataURL</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">]);</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">==</span><span style="color: #ce9178;">"text/plain"</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//FileReaderオブジェクト作成</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">new</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">FileReader</span><span style="color: #d4d4d4;">();</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイルロード後のコールバック関数定義</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">onload</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"</div>"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//ファイル読み込み</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filereader</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">readAsText</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">],</span><span style="color: #ce9178;">"shift-jis"</span><span style="color: #d4d4d4;">); </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">+=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>.jpeg,.png,.txt以外受付できません。</div>"</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>ファイルが未選択です。</div>"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//view関数で処理した内容をリセットする関数</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第一引数inputタグのID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第二引数取り込んだファイルのファイル名の表示先となるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第三引数取り込んだファイルの表示先になるID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">reset</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//各オブジェクト取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">uploadfileid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">filenameid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">viewerid</span><span style="color: #d4d4d4;">);</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">upfileob</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">files</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">] </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">null</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">filename</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">"<div>ファイルが未選択です。</div>"</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">viewer</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfileapi"</span><span style="color: grey;">> <span style="color: #d4d4d4;"><====[1]</span></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfilename"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">for</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myuploadfile"</span><span style="color: grey;">></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfileapibutton"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">for</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myuploadfile"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> ファイル選択</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myfileapireset"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onclick</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"reset('myuploadfile','myfilename','viewer');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> リセット</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"file"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"myuploadfile"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onchange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"view('myuploadfile','myfilename','viewer');"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">button</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"button"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onclick</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"view('myuploadfile','myfilename','viewer');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> ファイルを追加</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"viewer"</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="MYtemp-h3">
test014css.css</h2>
<div class="MYtemp-plain">
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); height: 850px; width: 300px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: #d7ba7d;">div</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<br />
<div>
<span style="color: #d7ba7d;">#myfileapibutton</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">table-cell</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">30px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FD8080</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">center</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">vertical-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">middle</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#myfileapireset</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">table-cell</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">30px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FD8080</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">center</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">vertical-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">middle</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#myfilename</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">table-cell</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">30px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">left</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">vertical-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">middle</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#CCCCCC</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#myuploadfile</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">.photo</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">:</span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="MYtemp-plain">
ローカルから画像とテキストを選んで表示してみます。
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWnFF0La9uMgV5eCXOH1iOl0JF7pbOnHmq4AH48mfJBbu3OlOMkdJN0pmbrs4TFwObpwBm3wgMDDGmo83kcCh5TzCL1fedlltCi1QObuQr_Zc7fZ6bXjmTVFrtED0RsO_jVc6psjTN2Wv/s1600/AGDRecasddff.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="458" data-original-width="660" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWnFF0La9uMgV5eCXOH1iOl0JF7pbOnHmq4AH48mfJBbu3OlOMkdJN0pmbrs4TFwObpwBm3wgMDDGmo83kcCh5TzCL1fedlltCi1QObuQr_Zc7fZ6bXjmTVFrtED0RsO_jVc6psjTN2Wv/s640/AGDRecasddff.gif" /></a></div>
動作に関してはChromeのほうがサックサクでした。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">
ポイント!</h2>
<div class="MYtemp-plain">
<ol class="MYtemp-ol">
<li class="MYtemp-li">
<input type=file>でファイル読み込みが作成できる!
<div class="MYtemp-plain">
<B>しかし!</B>
ブラウザごとに表示が違いすぎるので、<br>
ファイル名の表示先、読み込みボタン,リセットボタンを自作した。(test014.htmlの[1]の部分)<br>
ちなみに<input type=file>を標準表示させると以下のようになる。<br><br>
<div class="MYtemp-plain">
IE11</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZmOfldenVTzlo68J7hn9A1_yV_E_mH0ZoPr22bLMYJ8ztboleG5uraAY4YctVpZ0XRwvGNOieHO1SAF4CvRsUF9KOqAJ_FKRVR7Ah1OznPjrjduOlv34vztkEL2YIX6-zl1vJIgO_9bF/s1600/SnapCrab_NoName_2017-8-28_22-5-13_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="56" data-original-width="245" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZmOfldenVTzlo68J7hn9A1_yV_E_mH0ZoPr22bLMYJ8ztboleG5uraAY4YctVpZ0XRwvGNOieHO1SAF4CvRsUF9KOqAJ_FKRVR7Ah1OznPjrjduOlv34vztkEL2YIX6-zl1vJIgO_9bF/s320/SnapCrab_NoName_2017-8-28_22-5-13_No-00.png" width="320" /></a></div>
<div class="MYtemp-plain">
Chrome</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39kYFilkGJNz6gAroQ4tkbkIntLpe26JAJClqrCFqUhAQTzDJh6Bgdv_3CZpeoyummDbrEoSQZBKiX2k0nles5JXBw5-F0qna_AuIJpeJldGt_yjRj_RBtAqzxkvGzfV1LePUeLi6Sv-T/s1600/SnapCrab_NoName_2017-8-28_22-4-52_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="56" data-original-width="254" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39kYFilkGJNz6gAroQ4tkbkIntLpe26JAJClqrCFqUhAQTzDJh6Bgdv_3CZpeoyummDbrEoSQZBKiX2k0nles5JXBw5-F0qna_AuIJpeJldGt_yjRj_RBtAqzxkvGzfV1LePUeLi6Sv-T/s320/SnapCrab_NoName_2017-8-28_22-4-52_No-00.png" width="320" /></a>
<br>
これ全然表示が違うんです・・・・。
</div>
</div>
</li>
<li class="MYtemp-li">
ファイルを読み込んだ後の処理はコールバック関数で定義する。
<div class="MYtemp-plain">
ファイルの読み込み後の処理は関数をfilereader.onloadに割り当てる。<br />
読み込み終了後に、コールバック関数として呼び出されるが、いつ読み込みが終わらない処理をさせるので<br />
当然といえば当然なのかもしれない。<br />
今回は、画像を読んだ場合はimgタグのsrc属性に割り当てし、<br />
テキストだった場合にはdiv要素で包んで<div id="viewer">に動的にタグを書き足している。</div>
指定がない場合(filename.innerHTML = upfileob.files[0]!=null)は、<br />
その旨を書き足している。(test014.htmlの[2]の関数viewの処理)
</li>
</ol>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
今回はファイルを取り込んで表示をするものを作りましたが、<br>
<input type="file">はもともとファイルをpostするのに使用するものです。<br>
今度は送り込んだ画像をサーバ側でどのようにファイルに変換するかをやってみようかと思います。<br>
これができれば簡単な画像アップロードサイトが作れそうですね。<br>
<br>
参考になりましたら幸いです。<br>
ご利用は自己責任です。<br>
<br>
以上
</div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-72048211743143279302017-08-23T22:23:00.000+09:002017-08-23T22:38:11.331+09:00選択候補付きテキストボックスを作ってみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
DataListが使いにくかったから</h1>
<div class="MYtemp-plain">
自分で候補を表示する機能を作ってみました。<br />
jQueryなし、html5+javascriptのみで実現できます。<br />
それではやってみましょう。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
候補が絞込みできる取り回しが良いテキストボックスを作る。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
<h2 class="MYtemp-h3" id="sample">
test13.html</h2>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0); height: 1829px; width: 642px;">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./test013css.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第一引数選択対象テーブルID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第二引数設定先キーワードテキストボックスID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第三引数選択対象テーブル行番号</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">selectedvalue</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">TargetTableId</span><span style="color: #d4d4d4;">,<strong><span style="font-family: "verdana" , sans-serif; font-size: x-large;"><---③</span></strong> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">KeywordTextboxId</span><span style="color: #d4d4d4;">,</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">selectedindex</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フィルター処理対象テーブル取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">TargetTableId</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フィルター処理キーワード取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">keyword</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">KeywordTextboxId</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">KeywordTextboxId</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">selectedindex</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">cells</span><span style="color: #d4d4d4;">[</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">innerText</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第一引数フィルタリング対象テーブルID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第二引数フィルタリングキーワードテキストボックスID</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">exefilter</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">TargetTableId</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">KeywordTextboxId</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フィルター処理対象テーブル取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">( </span><span style="color: #9cdcfe;">TargetTableId</span><span style="color: #d4d4d4;"> );</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フィルター処理キーワード取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">keyword</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">( </span><span style="color: #9cdcfe;">KeywordTextboxId</span><span style="color: #d4d4d4;"> ).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索処理</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">for</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">++</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">for</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">cells</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;">++</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索文字列を小文字にしての検索結果</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">resultL</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">cells</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">innerText</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toLowerCase</span><span style="color: #d4d4d4;">().</span><span style="color: #dcdcaa;">indexOf</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">keyword</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索文字列を大文字にしての検索結果 </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">resultU</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">cells</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">innerText</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toUpperCase</span><span style="color: #d4d4d4;">().</span><span style="color: #dcdcaa;">indexOf</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">keyword</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索結果がtrueの列は表示する。</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">( </span><span style="color: #9cdcfe;">resultL</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">===</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">||</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">resultU</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">===</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> ){ <span style="font-family: "verdana" , sans-serif; font-size: x-large;"><strong><----②</strong></span></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">'table-row'</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">'none'</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"FilteringInputTextArea"</span><span style="color: grey;">> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onkeyup</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"exefilter('SuggestList','SearchWord');"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onfocus</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"exefilter('SuggestList','SearchWord');"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"SearchWord"</span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"SuggestlistArea"</span><span style="color: grey;">> <span style="font-family: "verdana" , sans-serif; font-size: x-large;"><strong> <-----①</strong></span></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">table</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"SuggestList"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',0)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;">AAMSI</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',1)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> AAO</span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',2)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> AAP</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',3)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> AARC</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',4)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;">AARP</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',5)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> AAS</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',6)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> AAVSO</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',7)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> AAX</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;">~~省略~~</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',91)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> DFW</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',92)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> DG</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',93)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> DGA</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalue('SuggestList','SearchWord',94)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> DGP</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">><</span><span style="color: #569cd6;">td </span><span style="color: #9cdcfe;">onmousedown</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selectedvalus('SuggestList','SearchWord',95)"</span><span style="color: grey;">></span><br />
<span style="color: #d4d4d4;"> DGC</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">table</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
<br />
<h2 class="MYtemp-h3" id="sample">
test13css.css</h2>
<table class="MYtemp-table" style="border: 1px solid rgb(0, 0, 0);">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: #569cd6;">*</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">box-sizing</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">border-box</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<br />
<div>
<span style="color: #d7ba7d;">#FilteringInputTextArea</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#57DDF9</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">400px</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<br />
<div>
<span style="color: #d7ba7d;">#SearchWord</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<br />
<div>
<span style="color: #d7ba7d;">#SuggestlistArea</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<br />
<div>
<span style="color: #d7ba7d;">#SearchWord:focus</span><span style="color: #d4d4d4;">+</span><span style="color: #d7ba7d;">#SuggestlistArea</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">overflow-y</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">scroll</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">150px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FFFFFF</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#SuggestList td</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<br />
<div>
<span style="color: #d7ba7d;">#SuggestList td:hover</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#F2A2B7</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="MYtemp-plain">
実行すると以下のように動作する。<br />
大文字小文字関係なく検索でき、選択肢をクリックすればテキストボックスに反映される。<br />
今回は実験的に左にIE、右にChromeで撮影しました。<br />
どちらでも軽快に動いています。<br />
[なんか変換がうまくいかなくてちょっと画像が荒いです。ご容赦を]<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU2sm1kHrCV1UoFIK3pAaMzXhIS7DsCUwv_7rZ3hIPlE-dglwsJOrGStIXbKzf4im5cDfKr7jiyMsVLx9qzYE-jvMFk52QzqOB1E7PKHfLk6Dw8Y3-hlj1Cag5sTnQ7q54WSn-2DEb-dJC/s1600/AGDRecasddff.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="350" data-original-width="400" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU2sm1kHrCV1UoFIK3pAaMzXhIS7DsCUwv_7rZ3hIPlE-dglwsJOrGStIXbKzf4im5cDfKr7jiyMsVLx9qzYE-jvMFk52QzqOB1E7PKHfLk6Dw8Y3-hlj1Cag5sTnQ7q54WSn-2DEb-dJC/s400/AGDRecasddff.gif" width="400" /></a></div>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">
ポイント!</h2>
<div class="MYtemp-plain">
<ul class="MYtemp-ul">
<li class="MYtemp-li">
テキストボックスの選択肢はdivで包んだtable要素で作成し、<br />
テキストボックスの隣接要素にする。[test13.htmlの①]<br />
このdivのサイズ指定が、選択肢が一度に見える個数を決める。<br />
</li>
<li class="MYtemp-li">
検索結果に基づいて行ごとに、~style.displayに対して<br />
table-rowもしくはnoneを割り当てる。<br />
[test13.html中の②]<br />
行ごとに消さないとポッカリそのセルだけ消えてしまうようだ。<br />
<br />
</li>
<li class="MYtemp-li">
クリック(テーブルのセルの上でonousedownイベントが検知)されたなら、<br />
その行番号のセルの内容をテキストボックスに割り当てる。<br />
[test13.htmlの①のtable要素の中のtd要素すべて]<br />
この処理はJavascriptで関数化すると処理が楽である。[test13.htmlの③]
</li>
</ul>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
今回これを作ってみたのは実は深い理由がありました。<br />
わかりやすく言うとHTML5で登場したdatalistが微妙だっていうことでした。<br />
一番微妙だと思ったのは、件数を多くしてもスクロールバーが出てこずに延々と候補が長くなるという事象・・・。<br />
かっこ悪すぎです。<br />
それじゃselectはどうかといえば、絞込みがこちらはこちらでいささか面倒でした。<br />
<br />
というわけで今回は<br />
テキストボックス+divで囲んだtable+javascriptで作ってみたわけです。<br />
<br />
サクサク動くものができて満足です。<br />
<br />
検索のアルゴリズムを変えれば前方一致ではなく含むものすべてなど<br />
さまざま作ることが可能です。<br />
<br />
ご参考になれば幸いです。<br />
<br />
ご利用は自己責任で!<br />
<br /></div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-44822218110351995092017-08-13T17:15:00.001+09:002017-08-15T12:46:55.382+09:00table要素を絞り込んでみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
今回は</h1>
<div class="MYtemp-plain">
JavascriptでTable要素を絞り込んでみます。<br />
キビキビ動いていい感じです。<br />
<br />
それではやっていきましょう。</div>
</section>
<a name='more'></a>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
Table要素をJavascriptで絞り込む。</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
<h3 class="h3.MYtemp-h3">
sample.html</h3>
<table class="MYtemp-table">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./sample.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第一引数フィルタリング対象テーブル</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//第二引数フィルタリングキーワード </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">exefilter</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettableid</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">filterkeywordid</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フィルター処理対象テーブル取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">targettableid</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フィルター処理キーワード取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">keyword</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">filterkeywordid</span><span style="color: #d4d4d4;">).</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//テーブル全体で検索に合致したか判定するフラグ</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Flag_search_Result_Table</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索対象1行で検索に合致したか判定するフラグ</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Flag_search_Result</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">for</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">++</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//フラグリセット</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Flag_search_Result</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">for</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">cells</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;">++</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">s</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">cells</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">j</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">innerText</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">indexOf</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">keyword</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">s</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">></span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">-</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Flag_search_Result</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索結果がtrueの列は表示する。</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">( </span><span style="color: #9cdcfe;">Flag_search_Result</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">'table-row'</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//テーブル内で一件でも表示できたならtrue</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Flag_search_Result_Table</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">'none'</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//一件も検索に合致しない場合には全件表示する。</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">Flag_search_Result_Table</span><span style="color: #d4d4d4;">==</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">for</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">++</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">rows</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">'table-row'</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"textarea"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">input</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onkeyup</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"exefilter('fil_table','filv');"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"filv"</span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">table</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"fil_table"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">1</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンゴ</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">くだもの</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">2</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">オレンジ</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">くだもの</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">3</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">バナナ</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">くだもの</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">4</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">アプリコット</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">くだもの</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">5</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">ダイコン</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">やさい</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">6</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">ニンジン</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span><span style="color: #d4d4d4;">やさい</span><span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">table</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
<h3 class="h3.MYtemp-h3">
samplecss.css</h3>
省略します。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="MYtemp-plain">
テキストボックスにキーワードを入れると該当する行だけを表示を表示します。<br />
該当する行が無いときはすべての行を表示します。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEite2j2qcAyWUdyqXmfD2XlaPo4msUbg3URnkNCKxr0VPxkfehuo2Ii3frmHQZL5vxO2UOSZsy-JqcGKnTIEetCCJgkSrtOMv7gpr1Xgfe7DsMr5zHO9sk6hUhyphenhyphen_bdytY6RxDTVM16dG_7C/s1600/AGDRecasddff+-+%25E3%2582%25B3%25E3%2583%2594%25E3%2583%25BC.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="300" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEite2j2qcAyWUdyqXmfD2XlaPo4msUbg3URnkNCKxr0VPxkfehuo2Ii3frmHQZL5vxO2UOSZsy-JqcGKnTIEetCCJgkSrtOMv7gpr1Xgfe7DsMr5zHO9sk6hUhyphenhyphen_bdytY6RxDTVM16dG_7C/s400/AGDRecasddff+-+%25E3%2582%25B3%25E3%2583%2594%25E3%2583%25BC.gif" width="400" /></a></div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">
ポイント!</h2>
<div class="MYtemp-plain">
<ol class="MYtemp-ol" >
<li class="MYtemp-li" >
文字列変数.indexOf(["検索対象文字列"])で文字列の検索ができる。
</li>
<li class="MYtemp-li" >
tableオブジェクト.rows[列番号].sells[行番号].innerTextで<br>
テーブルのセルの中のテキストの値にアクセスできる。
</li>
</ol>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
サクサクと絞込みフィルタリングができました。<br>
動きもいいので気持ちがいいですね。<br>
<br>
ご参考になれば幸いです。<br>
<br>
ご利用は自己責任で。<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-14541107614960172112017-08-12T13:33:00.000+09:002017-08-12T21:41:55.137+09:00相互連動するSelect要素を作ってみた。その2<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
初めに</h1>
<div class="MYtemp-plain">
前回の 相互連動するSelect要素を作ってみた。 で欠陥(使い方次第な気もするけど)を見つけたので作り直してみました。<br />
それではやってみましょう。</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
二つのSelectタグを連動させる。<br />
<h3 class="h3.MYtemp-h3">
片方に対応する要素がないとき、個数が合わないときは案内を表示する。</h3>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
<h3 class="h3.MYtemp-h3">
sample.html</h3>
<table class="MYtemp-table">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./samplecss.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">SyncSelect</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">OrnerID</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">MirrorID</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//idからオブジェクトを取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Ob_Orner</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">OrnerID</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Ob_Mirror</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">MirrorID</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//シンクロ元で選ばれた要素の値を取得</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">selectedIndexvalue</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Ob_Orner.options</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">Ob_Orner</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">selectedIndex</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索成否のフラグ</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag_SearchSuccess</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//シンクロ先のOptionの値を順にシンクロ元の選ばれた要素の値と参照</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">for</span><span style="color: #d4d4d4;">(</span><span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;"><</span><span style="color: #9cdcfe;">Ob_Mirror</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">;</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">++</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//値が合致した場合には合致した要素の番号をSelectedIndexで指定</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索成否のフラグを書き換える</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">Ob_Mirror.options</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">==</span><span style="color: #9cdcfe;">selectedIndexvalue</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Ob_Mirror</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">selectedIndex</span><span style="color: #d4d4d4;">=</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">flag_SearchSuccess</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//検索成否での最終処理</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//今回は失敗した場合には、0番目(選択を促すメッセージ)を表示して</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">//操作不可能にしました。</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #d4d4d4;">!</span><span style="color: #9cdcfe;">flag_SearchSuccess</span><span style="color: #d4d4d4;">){ </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Ob_Mirror</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">selectedIndex</span><span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Ob_Mirror</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">Ob_Mirror</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">form</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selecters"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selecters"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">select</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"Fruitnamejp"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"Fruitnamejp"</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #9cdcfe;"> </span><span style="color: #9cdcfe;">onChange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"SyncSelect('Fruitnamejp','Fruitnameen');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"99999999"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">くだものを選ぶ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">杏子</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"1"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">イチゴ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"3"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">梨</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">バナナ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"5"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンゴ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">select</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">select</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"Fruitnameen"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"Fruitnameen"</span><span style="color: #d4d4d4;"> </span><br />
<span style="color: #9cdcfe;"> </span><span style="color: #9cdcfe;">onChange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"SyncSelect('Fruitnameen','Fruitnamejp');"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"99999999"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Select Fruit</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Apricot</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"1"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Strawberry</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"2"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Pineapple</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Banana</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"5"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Apple</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">select</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
<h3 class="h3.MYtemp-h3">
samplecss.css</h3>
省略します。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCd4DoVobXWCP3BGsTwioAX8A3b_RJ-CXnLrWdMRfCdQhXhnAjRUIbQjcW1JEbJxoXjWdb_1_nGgwt3aCwJE4Cjxmmb55OEVroRNu7jWRkp4u2H55bAxV03B_wV6kVyg2FObqNbAzM1hHV/s1600/AGDRecasddff.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="400" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCd4DoVobXWCP3BGsTwioAX8A3b_RJ-CXnLrWdMRfCdQhXhnAjRUIbQjcW1JEbJxoXjWdb_1_nGgwt3aCwJE4Cjxmmb55OEVroRNu7jWRkp4u2H55bAxV03B_wV6kVyg2FObqNbAzM1hHV/s400/AGDRecasddff.gif" width="400" /></a>
</div>
<div class="MYtemp-plain">
英語の選択肢には梨に対応するものがなく、日本語の列にはPineappleがありません。<br />
無いものを選択するとそれぞれ、「くだものを選ぶ」と「SelectFruts」が表示されて、<br />
操作できないようになっています。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">
ポイント!</h2>
<div class="MYtemp-plain">
<ol class="MYtemp-ol" >
<li class="MYtemp-li" >
Selectオブジェクト.options[index].valueでoptin要素のvalueの値を参照できる。<br>
なので、Selectオブジェクト.options[Selectオブジェクト.selectedIndex].valueで<br>
今選ばれているものの値を取得できる。<br>
</li>
<li class="MYtemp-li" >
Selectオブジェクト.disabled=trueで要素を操作不能にできる。
</li>
</ol>
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
列単位で必ず対応するものがあるとも限らないし、こっちの方がベターな気がしました。<br />
参考になれば幸いです。<br />
<br>
ご利用は自己責任で。</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-58347689877147455932017-08-09T22:00:00.001+09:002017-08-09T22:02:48.564+09:00相互連動するSelect要素を作ってみた。<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 15px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
font-size: 20px;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
初めに</h1>
<div class="MYtemp-plain">
今回は二つのselestタグの内容を連動させてみます。<br />
一方のSelectタグでリンゴを選んだら、もう一つではAppleになるといった感じです。<br />
それではやってみましょう。
</div>
</section>
<br />
<a name='more'></a><section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
二つのSelectタグの内容を連動させる。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<h3 class="h3.MYtemp-h3">
sample.html</h3>
<table class="MYtemp-table">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td">
<div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge" </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./sample.css" </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet" </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Selecters</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/javascript"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">A_B</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">us</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">selectedIndex</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">jp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">selectedIndex</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">B_A</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;">){</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">jp</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">selectedIndex</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">form</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">us</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">selectedIndex</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: grey;">/</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">form</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selecters1"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selecters1"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">select</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"jp"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onChange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"A_B(this.form);"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"1"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">杏子</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"2"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">イチゴ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"3"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">バナナ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンゴ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">select</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">select</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"us"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onChange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"B_A(this.form);"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">apricot</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">strawberry</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">banana</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">apple</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">select</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">form</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selecters2"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"selecters2"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">select</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"jp"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onChange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"A_B(this.form);"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">size</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"1"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">杏子</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"2"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">イチゴ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"3"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">バナナ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンゴ</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">select</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">select</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"us"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">onChange</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"B_A(this.form);"</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">size</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">apricot</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">strawberry</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">banana</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span><span style="color: #d4d4d4;">apple</span><span style="color: grey;"></</span><span style="color: #569cd6;">option</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">select</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
<h3 class="h3.MYtemp-h3">
samplecss.html</h3>
<div class="MYtemp-plain">
省略します。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZAFlu_ppA7Yi2Q8eXrmOITYCa8ithIu6nodXVl1-UMVGWCCjooBpa2zjlfRnh9ZBRdTC3uR20RoRiddQKdDAGBuUTHZZYu7JAlvj6Kp8LrPMucLlZbK6MV5_XY6mrgTTh-zPQRxNDXqX/s1600/AGDRecasddff.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="300" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZAFlu_ppA7Yi2Q8eXrmOITYCa8ithIu6nodXVl1-UMVGWCCjooBpa2zjlfRnh9ZBRdTC3uR20RoRiddQKdDAGBuUTHZZYu7JAlvj6Kp8LrPMucLlZbK6MV5_XY6mrgTTh-zPQRxNDXqX/s320/AGDRecasddff.gif" width="320" /></a></div>
<div class="MYtemp-plain">
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">ポイント!</h2>
<div class="MYtemp-plain">
Select要素で選択されているものは、<br>[Select要素の名前].selectedIndexを使って取得できる。<br>
selectedIndexに数値を入れれば選択肢をJavascriptで選ぶことができる
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">終わりに</h2>
<div class="MYtemp-plain">
もっと書かないと設定不可能かと思ってましたが、<br>
関数1つにつき各1行で相互連携するSelect要素が実現できました。<br>
今回の実行例はIEで撮っていますが、<br>
Chromeを使うと選択肢の各要素の行間が違うのか下のようにちょっとづつずれてしまします。<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ZXq0h5ZAFusTU91c2ztNpMV1HBKIRQB1jQwgebJhgWeImGMFQoeyilIkjtc7n2PQ-Y9BP9dGrpypJyA_-LjeBtg6kr9LfxNNS3JMu-WebdfuTcgjqspTc9neehXAy_kWEhpiSCcL36ws/s1600/AGDRecasddff.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ZXq0h5ZAFusTU91c2ztNpMV1HBKIRQB1jQwgebJhgWeImGMFQoeyilIkjtc7n2PQ-Y9BP9dGrpypJyA_-LjeBtg6kr9LfxNNS3JMu-WebdfuTcgjqspTc9neehXAy_kWEhpiSCcL36ws/s320/AGDRecasddff.gif" width="320" height="320" data-original-width="300" data-original-height="300" /></a></div>
</div>
<div class="MYtemp-plain">
これが気持ち悪かったんですが、どうにかならないものかと思うところです。<br>
<br>
ご利用は自己責任で!<br>
以上です。<br>
</div>
</section>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-12588778897126515562017-08-06T17:54:00.000+09:002017-08-07T20:57:07.784+09:00CSS備忘録 スライドして出てくるサイドバーを作る<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 20px;
padding: 0;
margin: 0;
}
a.MYtemp-a{
color: #AAAAAA;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 10px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;;
}
ul.MYtemp-ul#contentslist{
list-style-type:none;
}
ul.MYtemp-ul#contentslist a{
text-decoration: none;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px;
width:550px;
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
margin:0 0 10px 15px;
}
section.MYtemp-section{
margin:0 0 20px 0;
}
</style>
<section class="MYtemp-section">
<h1 class="MYtemp-h1" id="introduction">
初めに</h1>
<div class="MYtemp-plain">
今回はスライドして出てくるサイドバーを作ってみます。<br />
シュッシュッと動いて意外とかっこいいものになりました。
</div>
</section>
<a name='more'></a>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item">
<a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item">
<a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item">
<a class="MYtemp-a" href="#example">実行例-表示例</a>
</li>
<li class="MYtemp-li contentslist-item">
<a class="MYtemp-a" href="#point">ポイント!</a>
</li>
<li class="MYtemp-li contentslist-item">
<a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
マウスオンするとスライドして表示されるサイドバーを作る。
</div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
</div>
<h3 class="MYtemp-h3">
sample.html</h3>
<table class="MYtemp-table">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./samplecss.css"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">sample</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"sidebar"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">for</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"sidebar"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"tab"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span><span style="color: #d4d4d4;">MENU</span><span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"menu"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">ul</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"list"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkA.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクA</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkB.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクB</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkC.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクC</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkD.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクD</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkE.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクE</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkF.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクF</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkG.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクG</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkH.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクH</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span><span style="color: #d4d4d4;">meinだよ</span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
<h3 class="MYtemp-h3">
samplecss.css</h3>
<table class="MYtemp-table">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: #569cd6;">*</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">box-sizing</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">border-box</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">html</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FFAAAA</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">a</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-decoration</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#000000</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">.container</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">max-width</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">900px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">auto</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">relative</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">fixed</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">top</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">left</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">-200px</span><span style="color: #d4d4d4;">;;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100%</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">z-index</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transition</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">all</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0.1s</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">ease-in-out</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#AAAAFF</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar #tab</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">top</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">left</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">40px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding-top</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">20px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#AAFFAA</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar #tab span</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">: </span><span style="color: #dcdcaa;">rotate</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">90deg</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">25px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar #menu</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">top</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">left</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100%</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#66AAAA</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar #list</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list-style</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar #list .item</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100%</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">50px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">:</span><span style="color: #b5cea8;">30px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar li:hover</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#66EEEE</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar:hover</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transition</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">all</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0.1s</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">ease-in-out</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">: </span><span style="color: #dcdcaa;">translate</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">) ;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">main</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">50px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="example">
実行例-表示例</h2>
<div class="MYtemp-plain">
Chromeでアクセスしてみます。<br />
マウスオンすると隠れていたメニューが表示されます。
</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRTltIuxvoIvTOYPMOyTAJiRxcntnyrSVefPFp5MbkcZkDuvUsd-oWI9fUfHQJVxY3B-DDLmYOCbRjC22JtffzpX1qCpO0_EF9u2Maolavq6h33-jzgY6qdZVYcA5qiA1Cyw4mFYgrSWp/s1600/AGDRecasddff.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="518" data-original-width="572" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRTltIuxvoIvTOYPMOyTAJiRxcntnyrSVefPFp5MbkcZkDuvUsd-oWI9fUfHQJVxY3B-DDLmYOCbRjC22JtffzpX1qCpO0_EF9u2Maolavq6h33-jzgY6qdZVYcA5qiA1Cyw4mFYgrSWp/s400/AGDRecasddff.gif" width="400" /></a></div>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="point">
ポイント!
</h2>
<ul class="MYtemp-ul">
<li class="MYtemp-li">HTML側
<ol class="MYtemp-ol">
<li class="MYtemp-li">
サイドバー要素の中にタブ要素(メニューを開くときの耳の部分)とメニュー要素を設定。
</li>
<li class="MYtemp-li">
タブへのマウスオンでサイドバー全体を動かすため,<br />
forで外側のサイドバー(#sidebar)を指定する。
</li>
</ol>
<table class="MYtemp-table">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"sidebar"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">for</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"sidebar"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"tab"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span><span style="color: #d4d4d4;">MENU</span><span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"menu"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">ul</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"list"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkA.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクA</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkB.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクB</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span><br />
・<br />
・<br />
・<br />
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span><br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</li>
<li class="MYtemp-li">CSS側
<ol class="MYtemp-ol">
<li class="MYtemp-li">
サイドバーは常に画面上に出しておきたいので、position:fixedを設定。
</li>
<li class="MYtemp-li">
マウスオンしていないときには画面外の設置なので、<br />
要素の幅分left要素をマイナスしておく。
</li>
<li class="MYtemp-li">
開いてから戻るときの動きをtransitionで指定する。
</li>
<li class="MYtemp-li">
マウスオンしたときの動作を:hoverで記述する。<br />
横幅200pxの要素を200px左に設置しているので、<br />
右に200px動かせば全体が表示される。
</li>
</ol>
</li>
<table class="MYtemp-table">
<tbody class="MYtemp-tbody">
<tr class="MYtemp-tr">
<td class="MYtemp-td"><div>
<div>
<span style="color: #d7ba7d;">#sidebar</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">fixed</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">top</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">left</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">-200px</span><span style="color: #d4d4d4;">;;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100%</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">z-index</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transition</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">all</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0.1s</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">ease-in-out</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#AAAAFF</span><span style="color: #d4d4d4;">;</span></div>
<br />
<div>
<span style="color: #d4d4d4;">}</span></div>
<div>
<span style="color: #d7ba7d;">#sidebar:hover</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transition</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">all</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0.1s</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">ease-in-out</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">transform</span><span style="color: #d4d4d4;">: </span><span style="color: #dcdcaa;">translate</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">200px</span><span style="color: #d4d4d4;">,</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">) ;</span></div>
<div>
<span style="color: #d4d4d4;">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</ul>
</section>
<section class="MYtemp-section">
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
シュッシュッ動いてかっこいい感じのサイドバーができました。<br />
実験的に複数のタブを置いて複数のサイドバーを置いてみたんですが、<br />
これはUI的に適切なのかちょっと自信が持てなかったです。<br />
UIって難しいですね。<br />
<br />
以上<br />
ご使用は自己責任です。</div>
</section>
<br />AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-29944274630735286732017-08-05T13:04:00.001+09:002017-08-05T13:04:07.040+09:00Blogger投稿用のCSSを作ってみた。今回はBlogerに投稿する際に少し気になっていたことを解決したいと思います。<br />
それは投稿記事が絶妙に見難い。(文章力のせいかもしれませんが・・・。)<br />
<br />
とりあえず、今がどういった項目を書いているのかをわかりやすくなるように、<br />
文字の色とサイズ(あと少し装飾)にCSSを適用してみたいと思います。<br />
<br />
以下は自作CSSを適用した画面になります。<br />
<a name='more'></a><br />
<style>
*[class*="MYtemp"]{
font-family: 'Osaka-等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 20px;
padding: 0;
margin: 0;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 15px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;;
}
ul#contentslist{
list-style-type:none;
}
ul#contentslist a{
text-decoration: none;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 15px;
}
</style>
<section class="MYtemp-section" id="contents-section">
<h2 class="MYtemp-h2" id="contents">
目次</h2>
<ul class="MYtemp-ul" id="contentslist">
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#goal">目標</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#sample">サンプルコード</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#commentary">解説</a>
</li>
<li class="MYtemp-li contentslist-item"><a class="MYtemp-a" href="#finish">終わりに</a>
</li>
</ul>
</section>
<br />
<h2 class="MYtemp-h2" id="goal">
目標</h2>
<div class="MYtemp-plain">
Bloger用の投稿用のCSSを作ってみよう!
</div>
<br />
<h2 class="MYtemp-h2" id="sample">
サンプルコード</h2>
<div class="MYtemp-plain">
Blogger投稿用に挿入しているCSSは以下の通りです。
</div>
<table class="MYtemp-table" style="height: 1041px; width: 550px;"><tbody class="MYtemp-tbody">
<tr class="MYtemp-tr"><td class="MYtemp-td"><br />
<div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">*</span><span style="color: #d7ba7d;">[</span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">*=</span><span style="color: #ce9178;">"MYtemp"</span><span style="color: #d7ba7d;">]</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-family</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">'Osaka-等幅''Osaka-Mono'</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#AAAAAA</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">20px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">h1.MYtemp-h1</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">:</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> ;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-left</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">solid</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">#dd7700</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#AAAAAA</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">25px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">h2.MYtemp-h2</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">:</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> ;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border-left</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">solid</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">#dd7700</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">22px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">h3.MYtemp-h3</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">:</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">2px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> ;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">22px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">h1.MYtemp-h1:first-letter</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FF8f00</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">35px</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">h2.MYtemp-h2:first-letter</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FF8f00</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">30px</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">ul.MYtemp-ul, ol.MYtemp-ol</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">:</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">23px</span><span style="color: #d4d4d4;">; </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">ul.MYtemp-ul</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list-style-type</span><span style="color: #d4d4d4;">:</span><span style="color: #ce9178;">square</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">ol.MYtemp-ol</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list-style-type</span><span style="color: #d4d4d4;">:</span><span style="color: #ce9178;">lower-roman</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">ol.MYtemp-li</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list-style-type</span><span style="color: #d4d4d4;">:</span><span style="color: #ce9178;">lower-roman</span><span style="color: #d4d4d4;">;;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">ul#contentslist</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list-style-type</span><span style="color: #d4d4d4;">:</span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">ul#contentslist a</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-decoration</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">table.MYtemp-table</span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">border</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">2px</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">solid</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">#AAAAAA</span><span style="color: #d4d4d4;">;;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#090909</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5px</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">td.MYtemp-td</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-family</span><span style="color: #d4d4d4;">: Consolas;</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">14px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #d7ba7d;">div.MYtemp-plain</span><span style="color: #d4d4d4;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">18px</span><span style="color: #d4d4d4;">;</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
</div>
</td></tr>
</tbody></table>
<h2 class="MYtemp-h2" id="commentary">
解説</h2>
<div class="MYtemp-plain">
上記サンプルを見ての通りなんですが、<br>
投稿に使うすべての(使いそうな)タグに先頭の文字列Mytempのクラスを割り当てて<br>
投稿の中身だけに効くCSSを作りました。<br />
bloggerのテンプレートを書き換えた方がいいのでは?って意見もありそうなんですが、<br>
記事単位で微調整するにはこれがいいかなぁと。<br />
前に投稿した気にのレイアウトに影響するのも気持ち悪いですもんね。
</div>
<h2 class="MYtemp-h2" id="finish">
終わりに</h2>
<div class="MYtemp-plain">
今回作った投稿用CSSで記事全体の見通しが良くなって、読みやすくなっているとうれしいと思います。<br />
実行は自己責任で!
</div>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0tag:blogger.com,1999:blog-1058697607643902719.post-78098889370970205222017-08-01T22:05:00.001+09:002017-08-01T22:06:41.797+09:00CSS備忘録 CSSだけでドロップダウンメニューを作るCSSだけでマウスオンすると展開するメニューを作ってみました。<br />
これHTMLだから簡単だけど、GUIアプリで作ったら大変だなきっと・・・。とか思ってます。<br />
<br />
それではサンプルです。<br />
<a name='more'></a><br />
<h3>
目標</h3>
CSSだけでマウスオンすると展開するメニューを作る。
<br />
<h3>
sample.html</h3>
<table border="1" style="background-color: #010101; height: 613px; padding: 5px; width: 470px;">
<tbody>
<tr><td><span style="color: white;"><span style="color: grey;"><!</span><span style="color: #d4d4d4;">DOCTYPE html</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"IE=edge" </span><span style="color: #9cdcfe;">http-equiv</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"X-UA-Compatible"</span><span style="color: grey;"> /></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">link</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./samplecss.css" </span><span style="color: #9cdcfe;">rel</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"stylesheet" </span><span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text/css"</span><span style="color: grey;"> /></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #d4d4d4;">sample</span><span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">header</span><span style="color: grey;">></span><span style="color: #d4d4d4;">ヘッダーだよ </span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"box"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Menu </span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">ul</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"list"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkA.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクA</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkB.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクB</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkC.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクC</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkD.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクD</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">header</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span><span style="color: #d4d4d4;">meinだよ</span><span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></span> </td></tr>
</tbody>
</table>
<h3>
samplecss.html</h3>
<table border="1" style="background-color: #010101; height: 1129px; padding: 5px; width: 470px;">
<tbody>
<tr><td><br />
<span style="color: white;">
<span style="color: #569cd6;">*</span><span style="color: #d4d4d4;"> {</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">box-sizing</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">border-box</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">html</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#FFAAAA</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">a</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-decoration</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">.container</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">max-width</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">900px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">auto</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">header</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">relative</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">40px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#AAFFFF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">#box</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;"> :</span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">top</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">right</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">40px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">center</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">#FFFF55</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">#list</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">top</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">40px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">right</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">.item</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list-style-type</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;"> :</span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;"> :</span><span style="color: #ce9178;">#AAAAFF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">.item a</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">#FFFFFF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">#box:hover</span><span style="color: #d4d4d4;">{ </span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">#FFFFFF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#5555FF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">#box:hover #list,</span><br />
<span style="color: #d7ba7d;"></span><span style="color: #d7ba7d;">#box:hover #list .item</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">.item:hover</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">#5555AA</span><span style="color: #d4d4d4;">; </span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span></span> </td></tr>
</tbody>
</table>
<h3>
表示例1:メニュー非表示</h3>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBi_WKOfCsl-1ZOjqXBy9LU2a6qUPAW_BjoQrdTLoPFEO6obY6WjOa_GInkBpt2_imzzuFC5Ml7KyEi0xwyx6F_BJjnvcy3mbwZmIyh2znd5dD9XhLRZ_uAKg7oYRFt8WAz6dpCWUL5R8/s1600/SnapCrab_NoName_2017-8-1_21-14-59_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="462" data-original-width="392" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBi_WKOfCsl-1ZOjqXBy9LU2a6qUPAW_BjoQrdTLoPFEO6obY6WjOa_GInkBpt2_imzzuFC5Ml7KyEi0xwyx6F_BJjnvcy3mbwZmIyh2znd5dD9XhLRZ_uAKg7oYRFt8WAz6dpCWUL5R8/s320/SnapCrab_NoName_2017-8-1_21-14-59_No-00.png" width="272" /></a></div>
<h3>
表示例2:メニュー表示(menuの部分をマウスオンしています。)</h3>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCwI2q2Uzy8qCZARP0srkdkjNYUMz-1e2taU34rpzGPRayK_P4gsOqglr90pX2XelDaxfRAhEf8PNU6ftcyxzS4UeAnDKjIT0-p-oznyJIsC4-dgqPnv5bhyKtF5upmuGD2mWiihPMSYw/s1600/SnapCrab_NoName_2017-8-1_21-16-38_No-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="465" data-original-width="390" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCwI2q2Uzy8qCZARP0srkdkjNYUMz-1e2taU34rpzGPRayK_P4gsOqglr90pX2XelDaxfRAhEf8PNU6ftcyxzS4UeAnDKjIT0-p-oznyJIsC4-dgqPnv5bhyKtF5upmuGD2mWiihPMSYw/s320/SnapCrab_NoName_2017-8-1_21-16-38_No-00.png" width="268" /></a></div>
<h3>
ポイント</h3>
<ul>
<li>HTML側
<ol>
<li>div要素でマウスオンする対象を作る。</li>
<li>マウスオンするdiv要素の子要素としてul要素を設定</li>
<table border="1" style="background-color: #010101; padding: 5px;">
<tbody>
<tr><td><span style="color: white;"><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"box"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">Menu </span><br />
<span style="color: grey;"> <</span><span style="color: #569cd6;">ul</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"list"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">a</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">href</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"./LinkA.html"</span><span style="color: grey;">></span><span style="color: #d4d4d4;">リンクA</span><span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span><br />
<span style="color: grey;"></span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"item"</span><span style="color: grey;">></span><br />
<span style="color: grey;"> </span><span style="color: grey;">・</span><br />
<span style="color: grey;"> ・</span><br />
<span style="color: grey;"> ・</span><br />
<span style="color: grey;"><span style="color: #d4d4d4;"> </span></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span><br />
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></span></td></tr>
</tbody>
</table>
</ol>
<li>CSS側
<ol>
<li>ul要素,li要素はdisplay:noneを指定し描画されないように指定する。</li>
<li>マウスオンする対象として作ったdiv要素の疑似クラス:hoverの子孫要素で、<br />
ul要素とli要素に
display:block を指定する</li>
<table border="1" style="background-color: #010101; height: 443px; padding: 5px; width: 367px;">
<tbody>
<tr><td><span style="color: white;"><span style="color: #d7ba7d;">#list</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">position</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">absolute</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">top</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">40px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">right</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">.item</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">list-style-type</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;"> :</span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;"> :</span><span style="color: #ce9178;">#AAAAFF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">.item a</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;"> : </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">#FFFFFF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">#box:hover</span><span style="color: #d4d4d4;">{ </span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">#FFFFFF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#5555FF</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">#box:hover #list,</span><br />
<span style="color: #d7ba7d;"></span><span style="color: #d7ba7d;">#box:hover #list .item</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">block</span><span style="color: #d4d4d4;">;</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d7ba7d;">.item:hover</span><span style="color: #d4d4d4;">{</span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;"> : </span><span style="color: #ce9178;">#5555AA</span><span style="color: #d4d4d4;">; </span><br />
<span style="color: #d4d4d4;"></span><span style="color: #d4d4d4;">}</span></span></td></tr>
</tbody>
</table>
</ol>
</li>
</li>
</ul>
これでCSSだけでマウスオンすると開くメニューが作れました。<br>
結構使えそうな部品がわかってきたので、何かWebページを作ってみたいところです。<br>
うーん、コンテンツが特に何もないなぁ。<br>
<br>
参考になれば幸いです。<br>
AXYhttp://www.blogger.com/profile/01725827090654115923noreply@blogger.com0