masalibの日記

システム開発、運用と猫の写真ブログです

javasciptで表示領域から画像のピクセルを指定する

古いシステムで画像を表示する関数で tableタグのなかにtableを使って表示しているという 超ーーーいけていないのがあり、 ピクセルサイズが大きいサイズがきた時に 画面幅を振り切れるというバグがあった

単純にjsでパーセントを指定すると小さくなりすぎるという問題があった 結局、表示領域から計算して ピクセルを指定といういけてない形になった

<html><body>
<tbody><tr>
    <tr>
        <td class="orangeHdr">写真<br>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="4">
            <tbody><tr>
            <td width="130" align="center">
            <img id="img" src="https://lh3.googleusercontent.com/4yQhH6EqCJJKFr7gOybqoaKRfkDZ5HJsmvBLE4OwdfP7BT3GSIRXFG5JGpgVoT3QFCeqNb51qS6BySmj-jtC9pKsN4CrF1zegxouVf11bkJe24JXoNoe7zys-RgyQTBFYOWLaNTj8nDEtZZtc2YoyDF3QmJzyu5CzCKQiccrP1e3jyLw8RYCwi25q7Sx9eWli_KfPbvJRZe5LLUmlX9kJHHNJMFFIdk4qJMhOdmogJ9_PHIikmPK4bGDqLcnu8kaLoU9l3enylHrCfIV89HL18dOwaLer2J9NnA11blX1ojn4OBv-bNsWobunCrGyFu_O09DTLwE_I-iLjCfv07DBje1Oil3yQ1kAwIr7ZsbyS4fshpxxc-gwB_mRz55aVDopiwSdPxegY-NRWjzfx8SS88KUzBURhxRNLJwY9HLNlFUEeYsp1-PvvwgAWwE8-wl4memdO5egqW8zldF5uP_QlSmXnojl3cYysPK447O-9s8fBMKr_GjaLV3mYxLl-AUkWeMiqmJY_fIY8MwJiVpDr6dF0vduD0IF03AogXrb7vfw96r0YupyJbyEt2rwwZX4xzsvMsMLYjKLrjaMkJv_rDMZdtAOJ2kTa0IK9iLlqkJdZss691GSfrAFTj0y_Jgs6LOCg-5pnjCESfBOFu8heIdtyXyXXyRaVtHCS--zuKrhgqo-cbnD2QFKoUnPQHM9DarTkUqMH48zci9ZxA=w1218-h913-no" >
            <div style="background-color:white;font-weight:bold;font-size:10pt;text-align:center:padding:2px;margin:1px" id="state">現在</div>
            </td>
            <td valign="top">
            <input type="file" name="file" id="file"><br><br>
            <input type="hidden" name="pv" value="">
            </td>
            <input type="hidden" name="pvfile" value="/img/Common/Result/Result/00108216.jpg?dmy=2019%2F03%2F29+18%3A37%3A15">
            </tr>
            </tbody></table>
            </td>
    </tr>

</tbody>
    <script language="JavaScript">
       var element = document.getElementById("img") ;

       var intervalId = setInterval( function () {
           if ( element.complete ) {
               var width = element.naturalWidth ;
               var height = element.naturalHeight ;
               console.log("source image width");
               console.log(width);
               var sw  = window.innerWidth; 
               console.log("window.innerWidth");
               console.log(sw);

               if ((width * 0.8) > sw){
                   console.log("画面幅にあわないのでstyleあわせる");
                   console.log(sw * 0.6);
                   element.style.width = sw * 0.6;
                   console.log("update style");
               }
 

               clearInterval( intervalId ) ;
           }
       }, 1000 ) ;
   </script>
</body>
</html>

関係ないけど・・・

検証用にcodepenを使っていたら落ちた・・・

自分が原因かとあせった

自分の個人情報がもれたらしい

www.taito.co.jp

今回流出した可能性がある情報は、次のとおりです。

  • 氏名
  • メールアドレス
  • 電話番号
  • ハッシュ化されたパスワード
  • クレジットカード情報の一部（カードの下4桁、有効期限）（※）

クレジットがもれていないのが唯一の救いかな
利用したのが2018/11/26なので 正直で・・・どのアドレスで登録したのかすら覚えていたない

気がついた理由

たまたまこのサイトを監視していたから気がついた

www.taito.co.jp

運がいいのやら、悪いのやら

監視と書いてありますが はてなのアンテナで登録すれば更新されたら連絡がもらえます。今回は消すのを忘れていた。たまたま気がついた。

a.hatena.ne.jp

不思議なのは個人情報は以下のサイトに登録していた。

coubic.com

でももれたのは「タイトのサイト」のみだった 個人情報を渡す部分でもれたのかな・・・？

ハッキング方法の発表はない

インフラエンジニアとしては
どうやってもれたのか発表してほしい
他の人が同じ轍を踏まないように ハッキング方法などを教えてほしい。

【python3】pythonのPillowで画像の圧縮して、はてなフォトに投稿する

python

前回、画像の圧縮ができたので圧縮した画像をはてなフォトに投稿したいと思います

仕様

動き

  1. urlから画像をダウンロードして圧縮する
  2. ダウンロードした画像の縦横のピクセルを取得する
  3. 変換した画像サイズのピクセル数を計算する
  4. 画像圧縮する
  5. 変換画像を保存する
  6. はてなフォトの投稿用のXMLを作成する
  7. はてなAPIの認証用のヘッダーを作成する
  8. はてなフォトAPIにPOST送信する
  9. 結果のXMLを取得する

ソース

from base64 import b64encode
from datetime import datetime
from hashlib import sha1
import random
import requests
import sys
from pathlib import Path
import IPython
from io import StringIO
import io
import urllib.request
from PIL import Image

now = datetime.now()
dtime = str(now.year)+"""-"""+str(now.month)+"""-"""+str(now.day)+"""T"""+str(now.hour)+""":"""+str(now.minute)+""":"""+str(now.second)
print (dtime)
hatena_id = "masalib"
password = "xxxxxx"

username = hatena_id
api_key  = password 


# はてな送信用のヘッダーに認証データ
def wsse(username: str, api_key: str) ->str:
    created = datetime.now().isoformat() + "Z"
    b_nonce = sha1(str(random.random()).encode()).digest()
    b_digest = sha1(b_nonce + created.encode() + api_key.encode()).digest()
    return f'UsernameToken Username="{username}", PasswordDigest="{b64encode(b_digest).decode()}", Nonce="{b64encode(b_nonce).decode()}", Created="{created}"'

# はてなフォトに送るためのXMLデータ作成
def create_photo_data(file_name: str,title : str) ->str:
    uploadData = b64encode(Path(file_name).read_bytes())
    return """
    <entry pxmlns="http://purl.org/atom/ns#">
    <title>""" + title + """</title>
    <content mode="base64" type="image/jpeg">""" + uploadData.decode() + """</content>
    </entry>
    """


def post_hatena_photo_api(data):
    headers = {'X-WSSE': wsse(username, api_key)}
    url = 'http://f.hatena.ne.jp/atom/post/'
    r = requests.post(url, data=data, headers=headers)
    print(r.status_code)
    xml_data =r.text
    return xml_data

# 画像のURLからデータを取得してリサイズする
def get_imagedata_resize(url :str):
    f = io.BytesIO(urllib.request.urlopen(url).read())
    img = Image.open(f)
    before_x, before_y = img.size[0], img.size[1]
    # 横基軸の場合
    width = 480
    x = width
    y = int(round(float(width / float(before_x) * float(before_y))))

    img = img.resize((x,y), Image.LANCZOS)
    return img

savefilepath="resized" + dtime + ".jpg"
title="resizetitle"

imagesrc ="https://cdn-ak.f.st-hatena.com/images/fotolife/m/masalib/20190311/20190311221952.jpg"
imgdata = get_imagedata_resize(imagesrc)
imgdata.save(savefilepath)

print("data作成")

data = create_photo_data(savefilepath,title)

#print("はてなフォトに送信")
hatena_photo_post_xml = post_hatena_photo_api(data)
print(hatena_photo_post_xml)

#IPython.display.Image(savefilepath)

結果

XMLが表示されているだけですがよかったｗｗｗ

感想

先人の知恵に感謝です。自分の力のみでは作れなかった

teratail.com

slackのアプリにダークモード追加

会社の情報通の後輩から教えてもらいました

設定　→　ダークモードで変更できます

プログラマの私はコマンドラインの色が落ち着きます
たぶん職業病!!

chromeも黒が落ち着きます

qiita.com

【2019年3月】Googleの検索アルゴリズムのアップデートは辛かった

SEO

3月12日ぐらいにGoogleの検索アルゴリズムのアップデートがあった
アフィリエイトをやっている人は軒並みダウンを食らった
私のブログは今まで、色々なUpdateがあったが運よく被害がなかった
今回は、アフィリエイトとかやっていないのですが見事にくらいました

どれぐらい下がったのか？
約30%ぐらいダウンをくらいました
毎日コツコツかいて、１ヶ月に2,3%ぐらいしか増えないのに30%の下落は辛い

このダウンならたぶん立ち直れない

イケハヤさんも被害があったみたい


【悲報】Googleの鉄槌でブログアクセスが激減！SEOの傾向と戦略を考える。

イケハヤさん、曰く「公式や楽天、amazon,価格、マイベストみたいな大企業のコンテンツがあがっていく」 弱小アフィリエイトは今後も辛くなっていくそうです。

対策

googleは今後も公式（身元がわかっている所）を強くするみたいなので googleに依存しない流入をふやす。
　→TwitterやFacebook,youtube

youtuberにならないといけないのかな~・・・

CodeSandBoxからGitpodに引越した

クラウドでできるJavaScript開発環境なのですが 今まではCodeSandBoxというサービスを使っていました

gitpod引っ越しをきめた理由

同時アクセスが多い時にビルドでメモリが足りないというエラーがでる

f:id:masalib:20190326190201j:plain

code 137 errorで検索

https://support.circleci.com/hc/ja/articles/115014359648-Exit-code-137-Out-of-memory 時間帯によって使えたり、使えなかったりするのでイライラしていた。

そんな時に

paiza.hatenablog.com

という記事で

www.gitpod.io

というサービスがあったので引越しました

使いかたは、超簡単

例えば、任意のリポジトリページを開くと以下のような感じのURLになると思います。

https://github.com/sample/mysample

このURLの先頭に「gitpod.io#」を付与してみましょう。

gitpod.io#https://github.com/sample/mysample

よかった点

メモリのエラーが発生しなくなった。 このエラーはこちらで対応できないのでよかった

悪かった点

色々あるのですが工夫次第でなんとかなります

1. 月100時間の制限がある

そこまで使わないですが100時間の制限があるので 作業が終わったら停止する必要があります

あと何時間使えるのかは https://gitpod.io/usage/というページで確認できる

30分ぐらいで勝手に停止してほしいがどこにも記載されていないので毎回停止している。

2. hostを指定しないとビューで表示されない

gatsbyはデフォルトだとhostnameがlocalhostです。 これだとブラウザで確認できない。 私が無知でしらないだけかもしれないがnpmコマンドで指定してもhostが変わらない。 ゆえに"gatsby-cli"をインストールする（起動のたびに・・・）

$ npm install gatsby-cli -g
$ gatsby develop --port 8000 --host "0.0.0.0"

その後、portの部分にいってブラウザをopenするボタンを押さないとビューで確認できない。
ちょっとめんどくさい

f:id:masalib:20190326190544j:plainf:id:masalib:20190326190547j:plain
ブラウザで確認

3. githubにpushする手順が増えた

いいのか悪いのかはおいといてcodesandboxはgithubのリポジトリにpushするのが１つの画面で1発できた。 gitpodは３つの手順でpushする

  1. クラウドIDEでコミットするファイルを１つ１つ選ぶ。

    f:id:masalib:20190326192033j:plainf:id:masalib:20190326192038j:plain
    ファイル選択画面

  2. コミットする

    f:id:masalib:20190326192125j:plain
    コミット

  3. Pull Requestという画面でpushする
    f:id:masalib:20190326192144j:plain
    Push画面
    １つの画面でやってくれれば問題ないのですが別々の画面になっているのでめんどくさい。

開発コスト > サーバー費用

仕事の愚痴

自社のキャンペーンでサーバーを増やして対応したが
ロードアベレージが0.05って・・・
インフラとしてはOKだった。サービスとしては・・・ノーコメント
(大雑把ですがCPUを2を積んでいるのでロードアベレージも2までは耐えれる)

メモリはcurlのバグなのか1時間に5%ぐらいあがる
でもクリアすれば問題なかった

qiita.com

上司の意向でGMOアプリクラウドv5を使っているがSSDとかネットワークとか
めっちゃ早い・・・

メインで使っていると「あるクラウド業者」はSSDすらない。
問い合わせしてみたら「問い合わせが少ないので検討していない」と言われた。

切り替えたいが複雑なネットワーク（オンプレミスあり）を 組めないので移行できないが本当に辛いところ
AWSはNGっぽくて移行できない
(route53とs3を除く)

負荷試験とかで色々で直した結果だと思うが
プログラムで改善よりインフラの部分の改善の方がコスパがいいって。。。
プログラマーとしては辛い