読者です 読者をやめる 読者になる 読者になる

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

これからウェブを志す人が知るべきウェブページとの付き合い方

プログラミング プログラミング-講座

sponsor

ウェブデザイナーやエンジニアになりたいという人がたくさんいるのではないかと思います。

けど、世の中のHTML教則本って初めはすごいものができないから、時間の無駄に思えたり、面白くなかったり、問題がいろいろあるように思っています。

この記事では、そういう本でもがいている人が、実際に世の中に溢れているウェブページの裏側を見ながら、ウェブ人材として成長する足がかりを作る方法を説明します。

f:id:hiroyoshi-deki:20151220171721j:plain

目的:世の中のバズりタイトルを集めて、勉強しよう

プログラミングを利用して何かをしようにも、すごいことを設定しなければ、動き出せません。

今回はぼくがブログで成長するために、バズりタイトルを集めて、勉強することにします。

ということで、年間ブックマークランキングがまとめられていましたので、これをコピペしてリスト化することにしました。

年間ブックマークランキングをコピペ

hatenanews.com

ただのコピペだとこう

f:id:hiroyoshi-deki:20151218154947p:plain

Sublime Textにペーストして結果を見てみます。

同じタイトルが2つあったり、順位が邪魔。できるだけ整理して見やすくしておきたい。

そんな印象を抱く結果でした。

削っていきましょう。

コピペした情報の分析

と、思ったんだけど。よく見ると二つの文字の区切りが「|」だったりスペースだったりまちまちです。

ということで、コピペした文字を

www.dekihiroyoshi.com

この記事の感じで操っていくのは諦めます。ちなみにこの記事はSublime Textの正規表現検索で

ぼくのレベルだとまだ、正規表現でこの状態にマッチする表現ができません。

できるかわからないし、わざわざ勉強するのもめんどくさいので、別の方法でいきましょう。

jQueryで適当な情報だけ取得

はじめにこれからすることのイメージを説明します。

ウェブページはHTMLで書かれています。HTMLは text markup languageというだけあって、文章をマークできる、つまり印をつけられる機能です。それを踏まえてjQueryは、その印から文章を引っ張ってこられる機能があるものだと思ってください。

それを使おうと思ったんです。が、タイトルまとめページはjQuery使えませんでした。

ためしにchromeの方は「右クリック > 検証 」で$("div")と打ってみてください。これは「div」という要素を取得するコードです。$ is not a functionとでてきます。

f:id:hiroyoshi-deki:20151219071228p:plain

$ is not a functionとは

$は関数じゃないという意味です。本来jQueryを使おうと思うと$という変数のなかに、関数が詰め込んであります。ですが今は$はundefinedになっているんです。

f:id:hiroyoshi-deki:20151219072932p:plain

他のページであれば、検証をして$と打つとfunctionがみられます。

f:id:hiroyoshi-deki:20151219072945p:plain

$を関数として使おうとしているから、$は関数じゃないよと怒られるんですね。

これは丸暗記になりますが、javascriptという言語は定義されて中身がない状態の変数にはすべてundefinedが入っています。

めんどくさい話をすると、メモリに変数の領域は確保したけど、まだ値がないという状態です。javascriptでは、そんなとき常にundefinedを入れているようです。

それと、そもそもjQueryをインストールしていないのに$という変数が定義されているのはおかしいです。普通なら

f:id:hiroyoshi-deki:20151219074353p:plain

定義すらされていない状態のはずです。

理由はわかりませんが$を無駄に定義したか、すでにあった$をundefinedで打ち消したかです。ぼくは後者がそれっぽいなと思います。

はてな側が使ってほしくなかったんでしょうか。

それはさておき、今回のエラーはjQueryライブラリが$のなかに準備されていない(undefinedだから)関数じゃないよと言っています。

javascriptで取得する

ここまで、実際にやろうと思ってから1分ほどです。文章で思考回路を書くと長いですが、一度覚えてしまえばすぐなので、がんばりましょう!

jQueryがダメならJavascriptで挑みます。

jQueryが使えずjavascriptが使える理由

実はjQueryというのはjavascriptが冗長とか見ずらいから、もっと短く見やすく書けるようにしようと生まれました。

ウェブブラウザはjavascriptは読み取れますが、jQueryはインストールしておかないといけないんです。となると素直にjavascriptを使えばいいなとなります。

といってもぼくは要素を取得する関数覚えてなかったのでぐぐりました。

「javascript 要素 取得」あたりです。

document.getElementsByClassName()で取得できるようです。

実際に取得してみる

documentというのはウェブページ自体のことです。ウェブページの要素をクラスネームから取得してねという関数です。

先ほどHTMLは印をつける言語と言いましたが、実は印にも名前が付けられます。それがクラスです。印にも名前があると、個別に呼び出せるので便利なんです。

試しにdocument.getElementsByClassName("")を実行してみると何も取得できないですが、エラーも出ていないのが分かります。クラス名を指定するときは「""」で囲んで、これは文章ですよと教えてあげないと動きません。「""」は何も名前の付いていなクラスを取得しようとしたものです。

では、実際にクラスを取得してみます。

取得するクラスの選定

chromeで検証を使ってHTMLがどうなっているか調べることができます。

f:id:hiroyoshi-deki:20151220133938p:plain

欲しい部分を検証した結果、trタグがずらーっとあることが分かりました。

これをjavascriptで取得したいと思います。とりあえずクラスから取得する方法はわかっているので、欲しい要素を含む名前があるクラスを探します。

4つ親の要素である、クラス名が 「article-content」という名前のdivがあります。

f:id:hiroyoshi-deki:20151220135921p:plain

divArticleContent = document.getElementByClassName('article-content')

このコードを使えば取得することができます。

実際に欲しい部分の指定方法

子要素が欲しいのでどんどん下っていきます。下るにはchildrenで取得できるはずです。

f:id:hiroyoshi-deki:20151220140717p:plain

ですが、上手くいかないようです。

qiita.com

ぐぐってみてもqiitaのページで同様に書かれています。

おかしいと思っても、あきらめず、取得した結果を見直すとか、どこか変なところを探しましょう。

f:id:hiroyoshi-deki:20151220160853p:plain

ぼくはdivArticleContentの外にかっこがあって、あれ?と思ったので、配列として指定してみたら上手くいきました。childでなくてchildrenなので、複数の要素が配列で帰ってくるようです。

childrenのchildrenを指定していきましょう。

f:id:hiroyoshi-deki:20151220161953p:plain

こんな感じでどんどん下っていって、trタグが取得できました。

あとはこのタグを表示するかファイルに書き出すかです。

とりあえず、表示してみます。

f:id:hiroyoshi-deki:20151220165214p:plain

lisの中身にもいくつかhtmlタグがあるので、指定方法を探してから

lis = divArticelContent[0].children[0].children[0].children[0].children
for(i=1; i<=lis.length-1; i++){
    console.log(lis[i].children[1].children[0].innerHTML)
}

f:id:hiroyoshi-deki:20151220165606p:plain

できましたー。

これならコピペでいけそう。

f:id:hiroyoshi-deki:20151220165908p:plain

取得内容の整形

www.dekihiroyoshi.com

この感じで邪魔な部分消していきましょう。

いったんVM80968:4 を全て消してから、後方のサイトタイトルを正規表現で消すことにしました。

正規表現はとりあえず「 \|.*\n| \-.*\n| \:.*\n| \/.*\n」をつかいました。「| - : /」をスペースで挟んだものから改行コードまでを選択します。

よく見るとタイトルの前部分にもサイトタイトルがあります。それも消しましょう。

ぼくは、さらっとみた結果2つだけだったので、手で消しました。

それで出来上がったのがこちらです。

全部実行するまで、5分程度でした。

取得結果

日本の全エンジニアに捧ぐ!現在公開されているAPI一覧【2013年版】

僕がユーザーとして本当に感動したWebサービスまとめ(2013年版)

めっちゃ安い航空券の取り方

【保存版】素敵なインテリアが探せるオススメWebサイト25選

あなたは100万円損してる!国からもらえる7つの手当金

クックパッドでリアルガチで簡単にできるレシピだけ集めた※追記あり【まとめ】

文章力が劇的アップ!読むだけでライティング能力が「グングン」上がる記事11選

mixiの新人研修トレーニングが非常にわかりやすくて実践的すぎる

これがもうとにかく便利すぎる「トマト缶」を使った極上のレシピ

「あ、この人、仕事できるんだろうな」って思う9つの瞬間

転ばぬ先のExcelワザ これだけは覚えておきたいExcelテクニックまとめ

DeNA南場さんの講演「ことに向かう力」がいい話だったので全文読め

最強オブジェクト指向言語 JavaScript 再入門!

副業もクリエイティブに!得意なことでお小遣い稼ぎができるWebサービスまとめ

あいりん地区で元ヤクザ幹部に教わった、「○○がない仕事だけはしたらあかん」という話。

プログラミング出来ない奴ちょっと来い

企画・提案・見積・納品・契約などのテンプレ・知識まとめ23

最初に設定しないと絶対損する!Google Analytics 9個の必須設定&解説

「学びたい、全ての人へ」creiveより

「うちら」の世界

あっという間に取れる!ワイシャツの黄ばみを真っ白にする2つの裏技

役に立つプレゼン資料・企画書が集まったサイト「bikkuri(ビックリ)」

Google AdSenseだけで家族を養ってきた僕が、今までやってきたブログ運営術をガチで解説するよ

はてなTシャツ2013ができました! プレゼントキャンペーンを実施します

【裏技】知らない人は損してるなあと思うこと28個「まとめ」

知らなきゃ損する!「1番安い」を探せるWebサービスまとめ

13歳の息子へ、新しいiPhoneと使用契約書です。愛を込めて。母より(Hana.bi)

感覚派デザイナーも知っておいて損はない「デザインの要素と原則」

ラスト・伏線・どんでん返しがすごい!本当に面白い映画10選

女性誌デザイナーの技術を盗め!40秒で髪の毛を切り抜くPhotoshopの神ワザ

漢字が使える!全部無料!日本語フォント41個【2013年最新版】

スマホ、タブレットで簡単にテレビを見る方法

同僚の外国人プログラマ観察記録

ニッポンの広告掲載料をまとめてみました。

もう迷わない!「」『』()【】の“使いどころ"/テクニカルライターが教える、文章の見た目を良くする技術

日本の全エンジニアに捧ぐ!現在公開されているテスト用ダミーデータ一覧

かなり得した!「副業や起業前」に知ると便利なツール・知識まとめ

低学歴と高学歴の世界の溝

コンビニに、さとり世代の新人が舞い降りた。

「疑わない」という怠惰について

月間20万稼ぐ!僕がブログを書くのに使う“神”ツールをドンッと紹介

人の注意力を操る妙技

私が部屋の収納とインテリアに目覚めるキッカケとなったブログ

Amazon.co.jpの取り扱うあらゆる商品を6%引きで買う方法

絶対に失敗しないトロトロ半熟ゆで卵の作り方。火をつけてから10分で完成、殻むきもバッチリ!

仕事をするとき気を付けていること

【保存版】これだけは作ってみたい。話題の神レシピまとめのまとめ、COOKPAD、はてぶ

すごい得した!便利な「無料」WEBサービスと知識まとめ

さようなら。ありがとう。

私のいる世界

たったの90秒!?腰痛・肩こりの痛みをなくす「セルフ整体」がすごい!

妊娠が発覚した時、パパがやってくれたら泣くほど嬉しい7つのこと【パパでき!】

【Unity】素人が7日間クソゲーを作り続けてわかったこと – uinyan. com

漢字も使える!「日本語フリーフォント」42個選びました【無料】

(追記)「男の節約術」を学び、Excelを使って5年で1000万円貯める手順を知る。

Web業界に飛び込んだ新入社員にとりあえず読ませたいスライドまとめ21個

スマホUI考(番外編) 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する

この上なく便利!すごい「jQuery」の小技まとめ32

人生計画表を作ろう!エクセル1シートでできる私の計画表と運用方法を紹介します。

これはすごい!100均アイテムを使った収納アイデアまとめ 47記事

Gitがこわくて触れられなかったけど、このスライドで理解出来るようになったよGitサイトまとめ

離婚直後の男性が綴った「結婚に関する20のアドバイス」が大反響を呼ぶ

ド素人が完全自作SNSを作ってみてわかったこと。

作業効率が劇的にアップ!PC上級者が知ってて当然のWindowsソフト26選

拭いても綺麗にならない黄ばんだプラスチックを白くする方法【パソコン】【黄ばみ】【劣化】

「疲れやすい体」がすぐに改善する5つの簡単ボディワーク

「人生のコツはこの3つだけ。」

土日で作るWebサービス入門

圧倒的に生産性の高い人の特徴、仕事の進め方、問題解決の方法

【2013年】コレ買って本当に良かったアイテム 15選

高効率睡眠で今後10年の活動時間を7300時間増やす方法

読むだけでプレゼン力が格段に上がる!良質スライド&記事のまとめ15選

最近話題になった「10個」のイケてるWebサービス・アプリ(2013年4月編)

僕が19年勤めた会社を辞めた時、後悔した12のこと

恥ずかしい英語におさらばできる無料の本格英文チェッカー「Ginger」が日本で正式ローンチ

競合他社のウェブサイトはどうなってるんだ? を簡単に調べる無料ツール3選+α

君はテレビ欄に掲載されていなかった深夜の恐ろしい番組を知っていましたか?*ホームページを作る人のネタ帳

ネットで見れる!国内有名Webサービスの「ナマ企画書」まとめ

Webの仕事をするなら最低限知っておくべき戦略フレームワーク×10

市販のホットケーキミックス、記載の分量から牛乳を20ccほど減らして溶かしバターとみりんを各大さじ1足すだけでびっくりするほど喫茶店の味

文章を「書ける人」と「書けない人」のちがい

海外Amazon転売楽すぎワロタ

【厳選】日本の全iOSプログラマに捧ぐ!iPhoneアプリ制作に参考になりすぎるデザインリンク集15選

ネットの進化とともに増加する”繊細チンピラ”とは?

すべての若い人に読んでほしい、今季のアメリカで最高の「卒業生に贈るスピーチ」

山岳ガイドが冬にヒートテックを使わない理由

あらゆる教養を学びたいあなたへ贈るおすすめの本12冊

人生は練習と思ってる所が本番で、本番と思ってる所がオマケだ。

忙しい人専用! 30分以内で4品できる「一汁三菜レシピ」10選|All About(オールアバウト)

知識0なのにすぐ出来た!iPhoneアプリ開発が簡単にできるまとめ16

ベッドで簡単寝る前ストレッチ!基礎代謝向上な1日5分間ダイエット♪

これは書くことがとことん苦手な人のために書いた文章です→小学生から大人まで使える素敵な方法 読書猿Classic: between

はてなスペース(β版)リリース記念! 音楽CDやアニメBlu-ray、大型液晶テレビなど豪華賞品プレゼントキャンペーン【~1/31まで】

【予算別】迷ったときに参考にしたい!センスが光るプレゼント

リンパマッサージの効果が凄いぞwww速攻で顔がシュッとイケメンになるwww

短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ

たった1枚に込められたクリエイティブすぎる17個の広告

うちの奥さんの、子供への読み聞かせ方がすごい: 不倒城

これはウェブページです。

覚えておくと絶対に役立つ!便利なGoogle検索方法7選(基本編)

© 2015 かんがえちゅう!