FinTech Dialy

FinTech Diary

FinTechのこととかクレジットのこととか。金融・ITの話題を中心に書いていきます。

【ブログ作成】Google+サービス終了に伴うブログデザインの修正

Google+が2019年4月にサービス終了するので、先に対応しておきましたφ(..)

 

Google+終了のお知らせ

Google+自体は使用していないのですが、はてなブログGoogle+のシェアボタンを設定していたので、外すか、別のものに置き換えて対応することにしました。

www.itmedia.co.jp

 

修正内容

対応ヶ所

記事下のシェアボタンを修正しました。

【修正前】

f:id:natsumedeus:20190211194252p:plain

 

【修正後】

f:id:natsumedeus:20190211194537p:plain

 

対応内容

ダッシュボードから、「デザイン設定」⇒「カスタマイズ」⇒「記事」と進みます。

①ソーシャルパーツ

Google+1ボタンの選択を解除します。替わりに、Tumblrを選択しておきました。

変更内容は「記事ページをプレビュー」で確認できます。

f:id:natsumedeus:20190211195128p:plain

 

②記事下HTML

先ほどの「記事」の下方にある「記事下」のHTMLを修正します。記事の左下に固定で表示している半透明のシェアボタンはこちらで設定しています。

f:id:natsumedeus:20190211195754p:plain

 

こちらは下記記事を参考に設定しています。

www.lisz-works.com

 

Google+の替わりに、LINEの共有ボタンを設定することにしました。

下記に修正箇所のみ抜粋します。

 【修正前】

    <!--Google+-->
    <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button">
      <i class="fa fa-google-plus"></i><br>
      <span class="small-text">Google</span>
    </a>

【修正後】

    <!--LINE-->
    <a href="//line.me/R/msg/text/?{Title} {URLEncodedPermalink}" target="_blank" class="line-button">
      <i class="fa fa-comment"></i><br>
      <span class="small-text">LINE</span>
    </a>

 

LINEボタンの設定は下記記事を参考にしました。

www.stdio.jp

 

 ③デザインCSS

「記事」の最下部にある「{}デザインCSS」からCSSを修正します。

f:id:natsumedeus:20190211204301p:plain

下記に修正箇所のみ抜粋します。

 【修正前】

.googleplus-button {
background: #dd4b39;
}

【修正後】

.line-button {
background: #00C300;
}

 

その他修正点

記事の読み込みが遅いかな(・・?と感じたので、ブログパーツをいくつか外しています。以前のデザインは下記参照。

fintechdiary.hatenablog.com

 

【Twitter】リスト/モーメントまとめ

あまりメンテできていませんが、せっかく作ったのでご紹介しておきたいと思いますφ(..)

 

リスト

FinTech

twitter.com

 

IT

twitter.com

 

クレジット

カード会社/ブランドなど

twitter.com

 

暗号通貨公式

通貨や取引所の公式アカウント

twitter.com

 

暗号通貨

暗号通貨界隈

twitter.com

投げ銭

暗号通貨の投げ銭botなど

twitter.com

 

ノブレスオブリージュ

現代のノブレスオブリージュ(暗号通貨のtipなど)。

twitter.com

 

株式

twitter.com

 

クラウドファンディング

ソーシャルレンディングクラウドファンディングなど

twitter.com

 

その他金融決済

銀行・証券会社公式、その他決済サービスなど

twitter.com

 

 

プログラミング

twitter.com

 

メディア

twitter.com

 

ブロガー

twitter.com

 

ソシャゲ

ソシャゲ公式等

twitter.com

 

#コンパス

ソシャゲの#コンパス

twitter.com

 

社畜少女リリカ

#コンパスのギルドの仲間

twitter.com

 

バーチャルYouTuber

twitter.com

 

 

アニメ・ゲーム等

twitter.com

 

イラストレータ

絵師様

twitter.com

 

 

 

モーメント

いつのまにかスマホからだとモーメントを編集できない仕様に変更されていました。

私はこの機能割と気に入っているのですが、そのうち廃止されてしまうかもしれません∩(´;ヮ;`)∩

Vtuber

twitter.com

 

暗号通貨

twitter.com

 

XRP

twitter.com

 

MONA

twitter.com

 

XP

twitter.com

 

NEM

twitter.com

クレジット

twitter.com

 

キャッシュレス

twitter.com

 

Medium

twitter.com

 

はてな

twitter.com

 

二次元イラスト

twitter.com

バンドリ

ソシャゲ「バンドリ! ガールズバンドパーティ!」関連のイラスト等

twitter.com

 

#コンパス

ソシャゲ「#コンパス」関連のイラスト等

twitter.com

 

おまけ:ツイートまとめ

一日のツイートをまとめて記事として投稿する別ブログを作成しました。

natsume410.hatenablog.com

 

私のツイートは通勤中にSmartNewsで見たニュース記事の連携がほとんどです。

キャッシュレスとかクレジットとか、自分の興味のある記事を備忘録的につぶやいています(一部萌画像が紛れ込みます)。

なので、一日のつぶやきをまとめるとその日の備忘録が完成します。 

 

自動投稿は下記記事を参考にしました。

www.hinapishi.com

 

 

できれば、自分の興味ある記事を自動収集するキュレーションサイトを作ってみたい…と思っています。思っているだけで何もしていませんが…

 

 

【クレジットカード】PayPal不正利用とその後の対応

PayPalで不正利用の被害にあったので、被害の内容と対応内容をメモφ(..)

一応ですが、100億円あげちゃうキャンペーンで話題になった「PayPay」ではなく「PayPal」の方です。まあPayPayもかなりの額の不正利用被害があったようですが…

 

www.paypal.com

 

不正利用の発覚

1月3日

発覚の契機

PayPalは久しく使っておらず、登録メールアドレスが以前使用していたアドレスのままだったので、変更しようと思いログインしようとしたところログインできず…

以前使用していたメールアドレスを久々に覗いてみると、12/20にPayPalからメールアドレス追加のお知らせが来ていました。しかし、その日にアドレスの追加など行っていませんでした…(' ';)

お知らせメールに「心当たりがない場合、不正アクセスか確認するのですぐに連絡して下さい。」的なことが記載されていたので、すぐにサポートに連絡することにしました。

 

サポートへ連絡

下記から電話で問い合わせました。

www.paypal.com

 

最初は自動音声の質問にダイヤルで回答し、最終的にオペレーターに問い合わせ。

以下、会話の概要。

(^ q ^;):私

(◎-◎):オペレーターさん

 

(^q^;)「あの…ログインできなくて…メールアドレスも変わってしまっててパスワードの初期化もできなくて…なんか12/20にアドレス追加のお知らせ来てるんですけど、それ私じゃないので、勝手に変えられちゃったみたいなんですけど…」

 

(◎-◎)「そうですか…それは不正アクセスの可能性が高いですね。ちなみに、12/20にカード番号末尾XXXXのカードで28,000のご利用がございますが、お客様のご利用でしょうか?」

 

(^q^;)「あ、いえ…よく覚えてないんですが多分違うと思いますが…ちょっと確認してみます。」

 

MoneyForwardで利用明細を確認…身に覚えのない28,000の利用歴が/(^o^)\

 

(^q^;)「確認しましたが、使われてますね…でもこれ私じゃないです。」

 

(◎-◎)「不正利用の可能性が高いので、専門の部署に回して調査致します。調査の結果、不正利用だった場合(カード会社に)異議の申し立てを行い、取引を取り消させて頂きます。なお、現在のアカウントは凍結、又は削除させて頂きますが、いかが致しますか?」

 

(^q^;)「削除して下さい。それと、異議の申し立てって初めてなんですが、カード会社とのやりとりはそちらで行っていただけるということですか?」

 

(◎-◎)「はい、こちらでやり取りさせて頂きます。それでは、調査結果が分かり次第、ご連絡致します。」

 

(^q^;)「あ、はい、わかりました。よろしくお願いします。」

 

PayPalの対応

1月3日

問い合わせ直後のメール

問い合わせ後、すぐに以下の内容のメールを頂きました。

・早急に調査し、10営業日以内に調査結果を連絡すること

・顧客アカウントのセキュリティは、常に最優先事項であること

問い合わせから4時間後のメール

取引が未承認だったため、全額返金される旨のメールが来てました。

文字通り最優先で対応してくれたみたいです。

迅速な対応に感謝ですm(_ _)m

 

1月4日

PayPalから改めて調査結果の報告がありました。

・取引が未承認だったため、全額返金されること

・カード会社には返金済みであること

・後はカード会社の処理なので、返金まで一週間~一ヶ月かかること

 

ということで、無事に返金されることになりました (⌒-⌒)

 

不正利用を防ぐために

不正利用の原因

今回は結局全額返金ということで事なきを得ましたが、私のアカウント管理に下記のような問題があったと反省しています。

・古いメールアドレスを登録したまま放置した

・以前、パスワードが流出し脅迫メールが来た際に、銀行やカード会社等の決済絡みのサービスは登録パスワードを変更していたのだが、PayPalはほとんど使っていなかったので、変更するのを忘れていた

 

ちなみに、脅迫メールは以下のようなものでした。以前使用していたことのある本物のパスワードが記載されていたので割とマジで驚きました。

www.itmedia.co.jp

 

不正利用の対策

①登録メールアドレスの最新化

各種サービスに登録しているメールアドレスは最新のものに更新し、身に覚えのないメールアドレスやパスワードの変更メールが来た場合、サポートに連絡する。

②パスワード流出の確認

迷惑メールを確認し、パスワードが流出していないか確認する。上のようなメール来てたら、パスワード変えないと私と同じ目に遭うかもしれません…

③利用明細の確認

身に覚えのない取引がないか、カードや銀行の利用明細を確認すること。明細の確認は一々カード会社や銀行のサイトにログインする必要があるので手間ですが、MoneyForwardに連携させるとまとめて確認できるので便利です。

 

app.seedapp.jp


 

おまけ:PayPal

不正利用の被害に遭ったのはこれが初めてでしたが、PayPalの迅速な対応により、私の中でのPayPal株はむしろ上昇しました。

 

実際の株価も、わずかですが保有しています。PayPalはオンライン決済分野のパイオニアであり、今後もその分野をリードしていくと考えています。

stocks.finance.yahoo.co.jp

investortrader.info

 

ただ、今まであまり使う機会がなく今回の件でアカウント削除してしまったので、また使う機会があるかは微妙ですが…(-_-;)

 

 

 

【プログラミング】IEX APIで暗号通貨のレート情報を一覧表示【JavaScript】

前回使用したIEX APIに暗号通貨の情報を取得するものがあったので、今回はそれを使用してレート情報を一覧形式で表示します(10秒ごとに自動更新)。

レート情報一覧

 

Data provided for free by IEX. View IEX’s Terms of Use.

補足事項

使用しているAPI

IEX APIの「Crypto」を使用しています(下記リンクからCryptoの項目に飛べます)。

iextrading.com

 

表示している通貨はIEX APIで取得できるものを表示しています。

github.com

各項目の説明

一覧の各項目の説明は「Quote」の項目を参照(下記リンクからQuoteの項目に飛べます)。

iextrading.com

 

一覧には、APIで取得した情報の一部のみを表示しています。

以下のようなJSONデータを取得できるので、その内の必要なものを表に編集して表示しています。

{"symbol":"BTCUSDT",
companyName:"Bitcoin USD",
primaryExchange:"crypto",
sector:"cryptocurrency",
calculationPrice:"realtime",
open:3860.6,
openTime:1543255545323,
close:3815.03795516,
closeTime:1543341945323,
high:3987,
low:3689.12,
latestPrice:3795.06,
latestSource:"Real time price",
latestTime:"1:05:45 PM",
latestUpdate:1543341945323,
latestVolume:77984.561363,
iexRealtimePrice:null,
iexRealtimeSize:null,
iexLastUpdated:null,
delayedPrice:null,
delayedPriceTime:null,
extendedPrice:null,
extendedChange:null,
extendedChangePercent:null,
extendedPriceTime:null,
previousClose:3862.27,
change:-65.54,
changePercent:-0.01698,
iexMarketPercent:null,
iexVolume:null,
avgTotalVolume:null,
iexBidPrice:null,
iexBidSize:null,
iexAskPrice:null,
iexAskSize:null,
marketCap:null,
peRatio:null,
week52High:null,
week52Low:null,
ytdChange:null,
bidPrice:3793.64,
bidSize:2.412389,
askPrice:3796.28,
askSize:0.015882}

 

コード

 HTML

ここに一覧を表示します。

<div id="crypt_table"> </div>

 

JavaScript

 ページ読み込み時に下記の処理を実行する。

 1.初期処理(InitProc)

  グローバル変数の初期設定を行う。

 2.メイン処理(MainProc)

    (1)表のヘッダー部分の編集

    (2)getCryptoInfo関数で通貨情報を取得し、editInfo関数に渡す。

    (3)editInfo関数で表のデータ部分を編集し、テーブルを作成、又は更新する。

 3.自動更新処理(AutoUpdate)

        setInterval関数でメイン処理を10秒ごとに実行する。

//<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>←ローカルのHTMLで作る場合は最初にjQueryを読み込んでね
<script language="javascript">// <![CDATA[
window.onload = function () {
    InitProc();
    MainProc();
    AutoUpdate();
}

function InitProc(){
    //グローバル変数の初期設定
    currency_list = ['BTCUSDT', 'EOSUSDT', 'ETHUSDT', 'BNBUSDT', 'ONTUSDT', 'BCCUSDT', 
                     'ADAUSDT', 'XRPUSDT', 'TUSDUSDT', 'TRXUSDT', 'LTCUSDT', 'ETCUSDT', 
                     'IOTAUSDT', 'ICXUSDT', 'NEOUSDT', 'VENUSDT', 'XLMUSDT', 'QTUMUSDT'];
    table_data = [];
    update_flg = 0;
    edit_roop_cnt = 1;
}

function AutoUpdate(){
    //10秒ごとに更新
    setInterval(MainProc,10000);
}

function MainProc(){
    var table_header = ['No','Symbol', 'Name', 'latestPrice', 'latestVolume', 'change', 'changePercent'];

    //Edit Header
    table_data[0] = [];
    for(var i = 0; i < table_header.length; i++) {
        table_data[0][i] = table_header[i];
    }

    //Get & Edit Info
    for(var j = 0; j < currency_list.length; j++) {
        in_currency = currency_list[j];
        getCryptoInfo(in_currency, editInfo);
    }
}

function getCryptoInfo(currency, callback){
    $.ajax({
        url : 'https://api.iextrading.com/1.0/stock/' + currency + '/quote',
        type : 'GET',       
        async : true,        
        cashe : false,     
        dataType : 'json',  
        contentType : 'application/json' 
    }).done(function(result){
        callback(result);
    }).fail(function(result){
        alert('Failed to load the information');
        console.log(result)
    });  
}

function editInfo(result){
    var edit_data = [];
    var edit_change_per = result.changePercent.toFixed(4) + '%';
    var currency_num;
    
    for(var i = 0; i < currency_list.length; i++) {
        if(result.symbol == currency_list[i]){
            currency_num = i + 1;
            edit_data = [currency_num, result.symbol, result.companyName, result.latestPrice, result.latestVolume, result.change, edit_change_per];
            table_data[currency_num] = [];
            for(var j = 0; j < edit_data.length; j++) {
                table_data[currency_num][j] = edit_data[j];
            }
        }
    }
    
    if(edit_roop_cnt==currency_list.length){
        edit_roop_cnt = 1;
        if(update_flg==0){
            makeTable(table_data,"crypt_table");
            update_flg = 1;
        }else{
            updateTable(table_data,"crypt_table");
        }
    }else{
        edit_roop_cnt++
    }
}

//【Javascript】表(table)の動的作成:https://algorithm.joho.info/programming/javascript/table-array-2d-js/
function makeTable(data, tableId){
    // 表の作成開始
    var cell='';
    var rows=[];
    var table = document.createElement("table");

    // 表に2次元配列の要素を格納
    for(var i = 0; i < data.length; i++){
        rows.push(table.insertRow(-1));  // 行の追加
        for(var j = 0; j < data[0].length; j++){
            cell=rows[i].insertCell(-1);
            // nullの置換
            if(data[i][j] === null){
                data[i][j] = '-';
            }
            cell.appendChild(document.createTextNode(data[i][j]));
            cell.style.border = "1px solid gray"; // 枠線
            // 背景色の設定
            if(i==0){
                cell.style.backgroundColor = "#bbb"; // ヘッダ行
            }else{
                //cell.style.backgroundColor = "#ddd"; // ヘッダ行以外
            }
            //変動比の色の設定
            if(i!=0 && (j==5 || j==6)){
                if((j==5 && data[i][j] < 0) || (j==6 && data[i][j].indexOf('-') != -1) ){
                    cell.style.color = "red";    // マイナス
                }else{
                    cell.style.color = "green";  // プラス
                }
            }
        }
    }
    // 指定したdiv要素に表を加える
    document.getElementById(tableId).appendChild(table);
}

function updateTable(data, tableId){
    var table = document.getElementById(tableId).lastChild; //bug fix:firstChild->lastChild
    var text_value = '';

    // 表の値を更新
    for(var i = 0; i < data.length; i++){
        for(var j = 0; j < data[0].length; j++){
            text_value=table.rows[i].cells[j].firstChild;
            // nullの置換
            if(data[i][j] === null){
                data[i][j] = '-';
            }
            text_value.nodeValue = data[i][j];
            //変動比の色の設定
            if(i!=0 && (j==5 || j==6)){
                if((j==5 && data[i][j] < 0) || (j==6 && data[i][j].indexOf('-') != -1) ){
                    table.rows[i].cells[j].style.color = "red";    // マイナス
                }else{
                    table.rows[i].cells[j].style.color = "green";  // プラス
                }
            }
        }
    }
}
// ]]></script>

 

参考

APIの呼び出し等、ベースは下記記事参考。

qiita.com

 

JavaScriptでの表の作成は下記記事の「makeTable」関数をほぼそのまま使用させて頂きました。変更点は枠線の設定、 nullの置換、変動比の色の設定等です。

algorithm.joho.info

 

表示形式は下記参考。

cc.minkabu.jp

finance.yahoo.com

 

自動更新は下記参照。

[参考] 一定時間で繰り返す(setInterval)-JavaScript入門

 

テーブル操作などの参考。

[参考]二章第八回 テーブルの操作 — JavaScript初級者から中級者になろう — uhyohyo.net


 おわり

とりあえずそれっぽく動くようになりましたが、なんかおかしいとこあったらごめんなさい(><;)

 

テーブル操作とか、変数をalertで表示して確かめて「ここにこれ入れればいいんじゃね?」みたいな原始的なやり方で進めてしまったので、やはりもっと体系的に理解しないと効率が悪くてだめですね…(+ +;)

 

あとはとにかく納期やスケジュールや工数や納期や納期を気にしないで好き勝手作るのは楽しいなぁ(⌒-⌒)

 

 

追記:バグ修正

はてなブログを直接編集するのは更新ボタン押したりで時間かかるので、ローカルでHTML作って編集してたのですが、いざはてなブログで公開したら自動更新が動かない/(^o^)\

 

ので、バグ修正です。

1.エラー箇所の特定

(1)とりあえず怪しそうなところでalert

 updateTable関数のループがおかしいことがわかりました(ほぼ何もわかりませんでした)。

(2)Googleの検証機能でデバック

 ブラウザ(chrome)で右クリックメニューの「検証(I)」をクリックすると色々できる画面が出てきます。最初からこれ使えばよかったね(⌒-⌒)

f:id:natsumedeus:20190106222712p:plain

↑こんな感じでGoogle先生がエラー箇所を優しく教えてくれるよ

この便利機能は「Chromeデベロッパーツール」と言うようです。詳しくは下記参照。

ics.media

 

2.エラー原因の特定

(1)とりあえずググる

「Uncaught TypeError: Cannot read property 」とかでググります。

 下記あたりの記事を見ましたが、jQueryの読み込みが原因なら最初のテーブル作成時にエラーになっているはずなので、違う…

lilac-xi.hatenablog.com

arata.hatenadiary.com

(2)Googleの検証機能でデバック

 ググっても解決しなさそうだったので、デバックで変数の中身などを確かめながらもう少し調べます。変数の値はカーソルを当てるだけで簡単に見れます。職場のTeraTarmとは大違いだなぁ(⌒-⌒)

f:id:natsumedeus:20190106220355p:plain

↑デバック中に変数にカーソルを当てると、こんな感じで中身を表示してくれるよ

(2)エラー原因

 crypt_tableのchildNodesに下記のような違いがありました。updateTable関数の「text_value=table.rows[i].cells[j].firstChild;」でtextの方を取得してしまっていたのがエラーの原因でした。

f:id:natsumedeus:20190106221902p:plain

 

なんでこんな違いがあるのか、はっきりとはわかりませんが恐らく下記あたりなのかと思います…

language-and-engineering.hatenablog.jp

d.hatena.ne.jp

d.hatena.ne.jp

 

3.エラー箇所の修正

updateTable関数の

「text_value=table.rows[i].cells[j].firstChild;」を「text_value=table.rows[i].cells[j].lastChild;」に修正。

場当たり的な感じで根本的な解決になってない気はしますがとりあえずこれで動くよう にはなります(-_-;)

 もっと勉強しないと…><;

 

 

 

【プログラミング】APIで遊ぼう-株式チャート描画等【JavaScript】

今回は色々なAPIで遊びます。

 

米国株式のローソク足チャート描画

下記記事を見つけて面白そうだったので、実際に動かしてみることにしました。

コードはほぼ下記記事の通りなので、自分で考えたものではないです。

あくまで、下記記事のコードをはてなブログ上で動かしてみただけです。

[参考]JavaScriptローソク足チャートの作成

qiita.com

 

//チャート描画

①テキストボックスに銘柄のティッカーを入力(例:ibm

②プルダウンリストから描画期間を選択(6y:6ヶ月/1y:1年/2y:2年/5y:5年)

③Get Infoボタン押下で描画

-------------------------------------------------------------------------------------------------------------------------------------

 
 
-------------------------------------------------------------------------------------------------------------------------------------

Data provided for free by IEX. View IEX’s Terms of Use.

 

 [参考]銘柄一覧

入力できる銘柄は下記参照。

iextrading.com

 

[参考]米国株式取扱銘柄一覧(SBI証券)

日本語はこちら。おまけに事業内容も見れます。 

 

変更点

上記のコードそのままだとはてなブログでは動かなかったので、若干変更している点があります。

はてなブログjQueryを使う

参考記事の通り、「window.onload」を使って回避。

 [参考]はてなブログのカスタマイズでjQueryを使う!CDNからの読み込みは不要!

frontend-takuyan.hateblo.jp

 

[参考]はてなブログ側のjQueryを利用する記述方法

www.otona-hattatsushougai-challenge.com

 

②サイズ調整

そのままの大きさだと記事内に入りきらないので、そこは数値を調整しています( [function]mainChartのwidthやheightの部分です)。

 

 

その他気になった記事

 面白そうな記事のメモφ(..)

[参考]Bitcoin のリアルタイムチャートを Chart.js で表示する

リアルタイムで動きます。これは楽しい^^

nagix.hatenablog.com

 

 

[参考]bitFlyerの過去チャートを取得するAPI

チャート取得参考

blog.shoby.jp

 

[参考]WebSocketを使ってcoincheckの板情報(BTC/JPY)をリアルタイムで表示する

板情報の表示

www.segmentation-fault.xyz

 

APIで遊ぼう

ブログでなくても、HTML手書きでもAPIは使えます。

プログラミングの実践に丁度良いと思うので、勉強してみたけど何作っていいかわからん><みたいな方はAPI動かしてみてはいかがでしょう(・・?

ほとんど参考サイトのコピペだったとしても、何かしらそれっぽく動かせると楽しいですよ٩( 'ω' )و