WEB情報をエクセルVBAで操作する

エクセルVBAとIE(Internet Explorer)を使って
WEBサイトを操作すると次のような事が出来ます。

 ・指定したサイトの情報をまるごと取得する
 ・Yahooオークションから商品情報を一覧で取得する
 ・販売サイトを検索し、商品の最安値を描出する
 ・中古車サイトから車の画像を描出する
 ・クチコミサイトで商品の検索と評判を描出する

突然のプログラム紹介で申し訳ありません。
私たちが学んでいるHTMLの知識を活用して
さらにおもしろい事が出来ると思ったからです。

以下サンプルプログラム(トンダバヤシネット情報からリンクコネクションを描出)
 Public Sub printMain()
    Dim ie As InternetExplorer
    Set ie = CreateObject("InternetExplorer.Application")
    'ie.Visible = True  'IEを表示
    ie.Visible = False 'IEを非表示
    ie.navigate "http://tondabayashi-net.seesaa.net/"
    Do While ie.Busy Or ie.readyState < READYSTATE_COMPLETE
        DoEvents
    Loop
    Dim FileName As String
    FileName = ThisWorkbook.Path & "\JIRO_" & Format(Now, "YYYYMMDDHHmmSS") & ".txt"
    Dim FileNum As Integer
    FileNum = FreeFile()
    Open FileName For Output As #FileNum    
    Dim htmlDoc As HTMLDocument 'HTMLドキュメントオブジェクトを準備
    Set htmlDoc = ie.document 'objIEで読み込まれているHTMLドキュメントをセット 
    Dim el As IHTMLElement 'IHTMLエレメントオブジェクトを準備
    For Each el In htmlDoc.Links 'htmlDocのリンクコレクションの要素全てについて繰り返す
         Print #FileNum, el.href 'elのリンク先URLを出力
    Next el    
    Dim colDes As IHTMLElementCollection 'IHTMLエレメントコレクションを準備
    Set colDes = htmlDoc.getElementsByName("description") 
         'htmlDoc内のname属性descriptionの要素をコレクションとして取得
    Print #FileNum, colDes(0).Content 'コレクションの最初の要素をデバッグ表示    
    Close #FileNum   
 End Sub

以下、上記プログラムの出力
javascript:document.cookie='force_pc=0; max-age=15768000; path=/'; document.cookie='force_sp=1; max-age=15768000; path=/'; document.location='/?from_pc'
http://blog.seesaa.jp/
https://sda.seesaa.jp/clk/qwAOtGPttI/
http://tondabayashi-net.seesaa.net/
http://tondabayashi-net.seesaa.net/article/455402874.html
http://code.jquery.com/jquery-1.11.1.min.js
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/kensyou.jpg?d=a1
https://saruwakakun.com/html-css/basic/display
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/455211873.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/455061669.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/454426018.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/454299067.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/453727745.html?seesaa_related=category
http://tondabayashi-net.seesaa.net/article/455211873.html
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/455061669.html
http://www.htmq.com/style/color.shtml
http://www.htmq.com/style/font-weight.shtml
http://www.htmq.com/style/font-size.shtml
http://www.htmq.com/style/font-family.shtml
http://www.htmq.com/style/line-height.shtml
http://www.htmq.com/style/text-align.shtml
http://www.htmq.com/style/text-decoration.shtml
http://www.htmq.com/style/text-shadow.shtml
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/454426018.html
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/1-kayu2.JPG?d=a0
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/2-kurugussu2.JPG?d=a1
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/3-putikogi1.JPG?d=a2
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/4-samugetan1.JPG?d=a1
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/4-samugetan3.JPG?d=a1
http://tondabayashi-net.up.n.seesaa.net/tondabayashi-net/image/S_6890854862581.jpg?d=a1
http://tondabayashi-net.seesaa.net/article/454426018.html#comments
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/article/454299067.html
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
http://tondabayashi-net.seesaa.net/category/9463550-1.html
http://tondabayashi-net.seesaa.net/index-2.html
http://tondabayashi-net.seesaa.net/index-3.html
http://tondabayashi-net.seesaa.net/index-4.html
http://tondabayashi-net.seesaa.net/index-5.html
http://tondabayashi-net.seesaa.net/index-2.html
http://tondabayashinet.main.jp/doz/index.html
http://tondabayashinet.main.jp/dorafuto/index.html
http://tondabayashinet.main.jp/k2/index.html
http://tondabayashinet.main.jp/hawaiidroute/index.html
http://tondabayashinet.main.jp/fudaiken/index.html
http://tondabayashinet.main.jp/thankyou3/index.html
http://tondabayashinet.main.jp/oeses/index.html
http://tondabayashinet.main.jp/woody/index.html
http://tondabayashinet.main.jp/mkirara/index.html
http://tondabayashinet.main.jp/jiro/index.html
http://tondabayashinet.main.jp/tacky/index.html
http://tondabayashinet.main.jp/gura/index.html
https://www.facebook.com/tondabayashi.net/
https://twitter.com/tondabayashinet
http://tondabayashi-net.seesaa.net/article/454426018.html#comment
http://tondabayashi-net.seesaa.net/article/449063884.html#comment
http://tondabayashi-net.seesaa.net/article/449063884.html#comment
http://tondabayashi-net.seesaa.net/article/448720176.html#comment
http://tondabayashi-net.seesaa.net/article/448720176.html#comment
http://blog.seesaa.jp/tag/
http://blog.seesaa.jp/tag
http://blog.seesaa.jp/
大阪府富田林市金剛公民館で活動中のホームページサークルの共同編集ブログです。
以上、紹介です。

以下連絡事項
 ・1月の勉強会
   平成30年1月17日(水) 13時~ 第1講座室 
        1月24日(水) 13時~ 第2講座室(ここしか取れませんでした)
 ・冬休みの宿題
   トップ画像(サイズ:1280 x 200~500)を作ってくる

                         By バッテリー

続きを読む

12月6日(水)の勉強会

【本日の授業の概説】

スマートフォンでよく見る形のナビゲーションメニューが作りたいなあ、どーしよっかなあ」という時に活用できるスキル[ハンバーガーメニュー(meanmenu)]が、本日のテーマです。


私はスマートフォンを持っていないので知りませんでしたが、ハンバーガーボタン (ハンバーガーアイコン)とは、スマートフォンサイトでよく見る三本線のボタンです。大抵の場合ハンバーガーボタンを押すとその下にメニューが展開されます。そしてもう一度ボタンを押すとメニューが折りたたまれます。

アコーディオンのように伸縮する様から、こういったメニューをアコーディオンメニューとも呼びます。単純にハンバーガーボタンから展開されるメニューという事でハンバーガーメニューとも言います。

この、ハンバーガーメニューを知識として理解することが、次回から始まるレスポンシブルデザインスマホ対応には不可欠となります。ホームページ作成において、今後はスマホ対応にすることを前提に授業が進められると思いますので、本日のテーマ「ハンバーガーメニュースマホ対応」については十分に理解していただきたいと思います。


【本日の授業内容】

1.nonkohan講師より「ハンバーガーメニュー」というフォルダをUSB経由でGET!

 このファイルには(1)before(2)meanmenu使い方(3)images(4)afterが入っている。


2.まず、「ハンバーガーメニュー」を開いた後で、(1)beforeのファイルを右クリックしてブラケットで開く。(1)before内には何も入っていない空白の状態である。


3.この空白に「indx.html」と「style.css」をブラケットで作成する。


作業ファイル新規作成名前を付けて保存→ indx.htmlと名前をつけて保存。

この中に、一から書き込むのが面倒な方は、前回11-29の「これだけは覚えておこう改訂版」の中のHTMLの基本構文その1から基本構文をコピーして貼り付けて保存する。


作業ファイル新規作成 名前を付けて保存style.cssとつけて保存。先頭部分に@charset "utf-8";を記入する。


4.html<body></ body >の間に、nav>ul>li*3(短縮形)を打ち込みTABキーを押す。そうすれば、<nav><ul>  <li></li> <li></li>< li></li> </ul></nav>となる。


5.<li></li>の間に、aを打ちTABキーを押すと、<li><a href=""></a></li>となる。<li><a href=""></a></li>3つ出るので、それぞれの""#を打ちこむ。そして<a href=""></a>の間にメニュー1,メニュー2,メニュー3を記入する。<a href=""></a>によりカーソルを当てれば他のところにリンクさせることが出来る。


【完成形】

navはなくても結果は同じ。しかしナビゲーションの役割をしているとPCに教える。

<body>

<nav>

    <ul>

        <li><a href="#">メニュー1</a></li>

        <li><a href="#">メニュー2</a></li>

        <li><a href="#">メニュー3</a></li>

    </ul>

</nav>

</body>


6.次にリスト1,2,3を横並びにさせる。横並びの手順として必要な3要素は

(1) 幅を決める(2) それぞれにフロートをかける(3) 親要素にフロート解除指示。


7.前記6の指示は全てCSSで行う。CSSには下記のように記載する。


@charset "utf-8";

nav ul {width: 454px;margin: 0 auto;}


nav ul li {width: 150px;              float: left;           border-left: 1px solid #000;

              text-align: center;}


nav ul li a {       display: block;text-decoration: none;              color: #000;

              font-weight: bold;}


nav ul li:last-of-type{border-right: 1px solid #000;}


上記の指示における短縮形は下記の通りである

w454width: 454px;m0-a margin: 0 auto; fl  float: left;

bl+ border-left: 1px solid #000; br+border-right: 1px solid #000;

tac text-align: center;  dbdisplay: block;  tdntext-decoration: none;

ccolor: #000; fwbfont-weight: bold;

nav ulli la: last-of-type nav ul li: まで打てばlast-of-typeが選択できる。そして、nav ul li:last-child{  br+}を入力する。


8.前記7までの作業で、ホームページの外観が出来上がったので、これをスマホ対応するためにはジャバスクリプトの指示を出す要素 [meanmenu,css]にリンクさせる必要がある。その手順を下記ので行う。


afterフォルダ内にある[meanmenu.css][jquery.meanmenu.js]

beforeフォルダ内に張り付ける


htmlheader内スタイルシートのリンク最後に下記を記載する。

               <link rel="stylesheet" href="meanmenu.css">


bodyタグの最後</body>の前にjavascript(下記の指示)を貼り付ける。

下記の文章は、【1-(2)meanmenu使い方のフオルダー】内にあります。


<!-- meanmenujavascript読み込み -->

               <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

               <script src="jquery.meanmenu.js"></script>

               <script>

                               jQuery(document).ready(function()

       {jQuery('header nav').meanmenu();});

               </script>


9.<nav></nav>の外側を<header></header>でくくる。

上記のジャバスクリプトの指示は、‘header内のnav’に適用されるので、<nav></nav>の外側を<header></header>でくくらなければなりません。くくって下さい。


【最終完成形】

<body>

<header>

<nav>

<ul>

<li><ahref="#">メニュー1</a></li>

<li><ahref="#">メニュー2</a></li>

<li><ahref="#">メニュー3</a></li>

</ul>

</nav>

</header>


10.これで完成です。スマホ対応になったかはパソコン画面で検証して下さい。

 検証するには、表示画面を出し右クリックで検証をクリック、スマホ画面で表示させて、ハンバーガーメニューが出来ていればOKです。よくできました。ハンバーガーメニュー画面の背景色や、透明度等を変えるにはmeanmenuで指示を行って下さい。(指示の箇所はnonkohan講師により示されています)。

kensyou.jpg


11. さて、何か忘れていませんか・・・、親要素にフロートの解除がなされていません。どうするかは、会員の皆さんならすぐわかると思いますので、フロート解除の指示(短縮形:ofh)を親要素に組入れてみて下さい。


12 ちなみに、前回の授業で会員の方からブロック要素とインライン要素についての質問がありました。単純に訳すと、ブロックは塊、インラインは詰め込むという意味です。塊には幅が指定できますが、詰め込みには幅は指定出来ないということです。また、固まりの中に詰め込むことが出来るのであり、固まり(ブロック要素)を詰め込み(インライン要素)で囲む状態(例: <a href="#"><li>メニュー1</li></a>)は間違いということを認識しましょう。これについてわかりやすく説明しているサイトを下記に示します。

CSSdisplayの使い方を総まとめ!inlineblockの違いは?

     https://saruwakakun.com/html-css/basic/display

                   

                             by ショコラ

11月29日(水)の勉強会報告

先週から3週連続となる勉強会の2週目です。
最初に先週の復習で短縮形タグを入力して「ボックスレイアウト」の作成をおさらいしました。
今週のテーマは「これだけは覚えておきたいメニューの作り方」です。
本日配布されたテキストメモに全て説明されていますが簡単にご紹介です。
 1.リストには番号なしリストulと番号ありリストolがありますが
  通常良く使う番号なしリストulで<li></li>を括ります。
 2.更にリスト全体の<ul></ul>を<nav></nav>で括ります。
 3.リストはブロック要素…横幅いっぱいのエリアを持っています。
 4.メニューリストは当たり前ですがどこかのページへ飛ばすため、リンクを貼ります。
 5.リンクの<a>を貼ることでリストはブロック要素からインライン要素に変化します。
 6.インライン要素に変化したリストは文字の大きさ分しか容積がありません。 
  容積の無いリストは、当然に非常にマウスが押しにくいので横幅やサイズ指定して
  容積を増やして見栄えを良くする必要があります。
 7.だからインライン要素をブロック要素に指定するdisply:block;を付け加えます。【お約束事】


  インライン要素とは文章の一部としてブロック要素内で使用される。
  ブロック要素とはひとつにまとまったブロックを構成する要素

やっと先日より解らなかったfloatが理解出来る様になりましたが、また新しい課題の
「ブロック要素」「インライン要素」が表れました。しばらくかかりそう・・・!
                               11月の報告者 ドラフト10位


11月22日(水)の勉強会

11月度の第1回目の勉強会は約1ヶ月振りの開催となりました。
また、開催週が変則的となっている影響なのか4名の欠席者がありやや寂しい勉強会でした。

 ♦2017年の反省会日程
   ・12月20日(水)18:00~で予定していますが、会場予約してから確定です。
   ・会場はとっさま(南海金剛駅前)昨年と同じです。
 ♦2018年1月の勉強会日程
   ・第3週目/17日(水)、第4週目/24日(水) 

本日の勉強会のテーマは今週より3週連続の開催となることから、今一度基本のおさらいを
きっちりマスターした上で次のステップに行きましょうとのnonkohan講師の指導で
  1. これだけは覚えておきたいCSSの基本
  2. これだけは覚えておきたいHTMLの基本その1
  3. これだけは覚えておきたいHTMLの基本その2 の3点を学習しました。

これだけは覚えておきたいCSSの基本

フォント

セレクタ

意味

短縮形

備考

color

文字色(前景色)を指定する

c


font-weight

フォントの太さを指定する

fw

fw:b(太字bold)

font-size

フォントのサイズを指定する

fz

fzの後に数字

font-family

フォントの種類を指定する

ff



テキスト

セレクタ

意味

短縮形

備考

line-height

行の高さを指定する

lh


text-align

行揃えの位置・均等割付を指定する

ta


text-decoration

テキストの下線などを指定する

td

td:n(下線無)

text-shadow

テキストに影をつける

ts+



上記のタグの短縮形を使って「ボックスレイアウト」を作成しましたが、基本レイアウトの
作成ですから簡単と思っていたもののまだまだ先導して貰わないとダメな部分もありました。
次週は最初に上記タグを使ってHTMLの作成をもう一度やりますのでしっかり復習しておいて
ください。                          報告者 ドラフト10位

韓国 三食レポート

韓国へひとり旅。
美味しく食べた庶民の味をご紹介します。

1-kayu2.JPG

朝、カボチャのおかゆ。完全に裏ごししてあり、カボチャもお米も粒が残っていません。
トロリとした濃厚なスープのようでした。まわりの惣菜は、サービスのパンチャン。

おまけのような惣菜をつける商習慣があります。無料でお代わり自由。どんな料理
にもパンチャンがつくのが、あちら流。後列左から時計回りで、辛みそ、ナムル、
じゃこ、はんぺん?、キムチ、つくだ煮のり

2-kurugussu2.JPG

昼。ブチコギ 中央が盛りあがった火鍋に肉や野菜をたいて周辺にたまる
タレにつけて食べます。日本風に言えば、すき焼きに似てるかも。味は
やや濃いめ。

上方の金物がご飯が入っているお茶碗?です。汁物を含めてパンチャン
がいっぱいつきました。



3-putikogi1.JPG

昼、カルグクス。具だくさんな韓国風手打ちうどん(中央)。目の前でオモニが叩いて刻
んでゆがいてくれます。お好みですいとん状の塊を少し入れてくれと頼むと作って
くれます。これがいい食感でした。

本番がくるまえにパンチャンが次々でてきます。のり、キムチ、汁、サンチュ、
それに驚いたことに冷麺や赤飯もつきます。うどんを食べる前にお腹いっぱいに
なります。


4-samugetan1.JPG

夜、タッカンマリ。鶏の水炊きです。薬味野菜などをいれるサムゲタン(参鶏湯)
よりは庶民的なもの。若鳥一羽をまるごと鍋にいれ、オモニがあっと言う間
に食べやすいようにハサミで分解?してくれます。

トリは辛みみそやタレがはいった小皿にとって食べます。柔らかくほくほくと
溶けておいしい。

4-samugetan3.JPG

食事にはつきもののアルコール。左はハイトビール。キリンビールに似た味。
右は長寿ブランドのマッコリ。濁酒です。炭酸が効いた酸味があって美味しい。
大衆食堂なので、オッチャンたちが気炎を上げてにぎやかに食べかつ飲んでいま
した。

S_6890854862581.jpg

さて、話はかわって、こちらは緊迫?の南北軍事境界線。あのイムジン河畔
の高台から、呼べば応える距離に北朝鮮が望めます。あいにく視界がよくな
かったのですが。晴れた日なら農作業をする人たちの姿も見えるそうです。

元アラコキ