DOMの勉強をかねて、マジックのカード情報を取得するブックマークレットを作成してみました。
幸運にもマジック日本語公式サイトにはウルザブロック以降のカード情報が残っています。
そこからgetElementsByClassNameでコピペします。
自分向けなのでiPhoneアプリのTextwellへ貼り付ける仕様になっております。
カードリスト｜マジック：ザ・ギャザリング
↓こんな感じです。
対抗呪文
インスタント対象の呪文１つを打ち消す。
堕天使
クリーチャー ― 天使飛行
クリーチャーを1体生け贄に捧げる：堕天使は、ターン終了時まで＋2/＋1の修整を受ける。
CSSでなんとかカードっぽくしてみて使って下さい。
CSS苦手な私はこんな感じにしてみました。
<style>
.cad {
width:280px;
height:500px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:10px 10px 10px 10px;
margin:20px 20px 20px 20px;
vertical-align:middle;
color:#fff;
background-color:#000;
border-radius:30px;
font-family:Arial;
}
.cadtext{
width:240px;
height:450px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:20px 10px 10px 10px;
margin:10px 10px 10px 10px;
vertical-align:middle;
color:#222;
background-color:#fff;
border-radius:30px;
font-family:Arial;
}
.cadimg{
text-align: center;
margin: 5px;
}
.cadpoto{
text-align: right;
}
</style>
今回困ったのが、この日本語公式サイトはjQueryか何かでソースをいじっている様でして。
特にカード名はマウスを乗せるとカード情報が出る関数が仕込まれていまして上手くカード名だけが入手できませんでした。
おそらくは、
「クラス名で探してその中のaタグを取得」
とかは出来るのでしょうが、私の技術力では無理でした・・・。(T_T)
妥協案として、カード名はdocument.writeで書き換えてからぶっこ抜いてます。
DOM・・・奥が知れん！
ただ、これは楽しいですね。
公式サイトの画像への直リンクを取得するスクリプトですので、その範囲でご利用下さい。
検索機能などはありませんので任意のカードをタップして表示させてから実行して下さい。
幸運にもマジック日本語公式サイトにはウルザブロック以降のカード情報が残っています。
そこからgetElementsByClassNameでコピペします。
自分向けなのでiPhoneアプリのTextwellへ貼り付ける仕様になっております。
カードリスト｜マジック：ザ・ギャザリング
Textwell 1.2.4
分類: 仕事効率化,ユーティリティ
価格: ￥300 (Sociomedia)
javascript:(function(){var getName=document.getElementsByClassName("cardname");var getMana=document.getElementsByClassName("mana");var getType=document.getElementsByClassName("type");var getPoto=document.getElementsByClassName("poto");var getText=document.getElementsByClassName("text");var getImg=document.getElementsByClassName("listimg");var onText=document.getElementsByTagName('h4');var text=encodeURIComponent(getMana[0].innerHTML+'</br><div class="cadimg"><img src="'+getImg[0].src+'"></div></br>'+getType[0].innerHTML+'</br>'+getText[0].innerHTML+'</br><div class="cadpoto">'+getPoto[0].innerHTML+'</div></span></span>');base=document.createElement("div");document.body.appendChild(base);document.write(onText[0].innerHTML);onName=document.getElementsByTagName('a');location.href='textwell:///insert?text=<span class="cad"><span class="cadtext">'+onName[0].innerHTML+text})();↓こんな感じです。
対抗呪文
堕天使
クリーチャーを1体生け贄に捧げる：堕天使は、ターン終了時まで＋2/＋1の修整を受ける。
3/3
CSSでなんとかカードっぽくしてみて使って下さい。
CSS苦手な私はこんな感じにしてみました。
<style>
.cad {
width:280px;
height:500px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:10px 10px 10px 10px;
margin:20px 20px 20px 20px;
vertical-align:middle;
color:#fff;
background-color:#000;
border-radius:30px;
font-family:Arial;
}
.cadtext{
width:240px;
height:450px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:20px 10px 10px 10px;
margin:10px 10px 10px 10px;
vertical-align:middle;
color:#222;
background-color:#fff;
border-radius:30px;
font-family:Arial;
}
.cadimg{
text-align: center;
margin: 5px;
}
.cadpoto{
text-align: right;
}
</style>
<style>
.cad {
width:280px;
height:500px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:10px 10px 10px 10px;
margin:20px 20px 20px 20px;
vertical-align:middle;
color:#fff;
background-color:#000;
border-radius:30px;
font-family:Arial;
}
.cadtext{
width:240px;
height:450px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:20px 10px 10px 10px;
margin:10px 10px 10px 10px;
vertical-align:middle;
color:#222;
background-color:#fff;
border-radius:30px;
font-family:Arial;
}
.cadimg{
text-align: center;
margin: 5px;
}
.cadpoto{
text-align: right;
}
</style>
複数条件でのDOMが難しい・・・
今回困ったのが、この日本語公式サイトはjQueryか何かでソースをいじっている様でして。
特にカード名はマウスを乗せるとカード情報が出る関数が仕込まれていまして上手くカード名だけが入手できませんでした。
おそらくは、
「クラス名で探してその中のaタグを取得」
とかは出来るのでしょうが、私の技術力では無理でした・・・。(T_T)
妥協案として、カード名はdocument.writeで書き換えてからぶっこ抜いてます。
DOM・・・奥が知れん！
ただ、これは楽しいですね。
公式サイトの画像への直リンクを取得するスクリプトですので、その範囲でご利用下さい。
検索機能などはありませんので任意のカードをタップして表示させてから実行して下さい。
gooブログ 日記・写真を投稿！blogアプリ 3.0.2
Sylfeed 3.2.9
Textwell 1.2.2
