ひぐのカメラとプログラミング日記

大学院生の日記です。主にプログラミングとカメラについて。最近はデータ分析・Kaggleにハマっています

【驚愕】Amazonの半年の合計購入金額をスクレイピングした結果…

f:id:zerebom:20181110102422p:plain

こんにちは、ひぐです!

スクロールするとついてくる広告みたいなタイトルで申し訳ないです。

 

突然ですが、Amazonの商品購入のスムーズさってやばいですよね。

 

実店舗での買い物だったら

商品を手に取って、

 

他の店と比較して、

財布とにらめっこして、

やっぱ店員さんがグイグイ来るからやめようか…

 

みたいな葛藤があると思いますが、

Amazonだと欲しいと思ってるうちに手が滑って、気づいたら家に届いてるんすよね。

憎いねぇ!即日発送ゥ!

 

Amazonの滑らかなUIによって、

僕の財布の紐はひもQ並みにゆるっゆるになってしまいました

 

心なしか、amazonのロゴがいつもより笑っているように見えます

f:id:zerebom:20181110102338p:plain

 

しかし!

そうもいってられません。俺の全財産がベゾスに吸い上げられてしまわぬよう

今回は財布のひもを再び固めるようなコードを紹介したいと思います。

 

 

それは

Amazonの合計使用金額を算出」するコードです!

自分の使用金額を確認して無駄遣いを減らしていきましょう 

 

この記事はこの本を参考にしました

gihyo.jp

 

 

 

コード全文

import sys
import os
import re
from robobrowser import RoboBrowser

# 認証の情報は環境変数から取得する。
AMAZON_EMAIL = os.environ['AMAZON_EMAIL']
AMAZON_PASSWORD = os.environ['AMAZON_PASSWORD']

# RoboBrowserオブジェクトを作成する。
browser = RoboBrowser(
    parser='html.parser',  # Beautiful Soupで使用するパーサーを指定する。
    # Cookieが使用できないと表示されてログインできない問題を回避するため、
    # 通常のブラウザーのUser-Agent(ここではFirefoxのもの)を使う。
    user_agent='Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:45.0) Gecko/20100101 Firefox/45.0')


def main():
    # 注文履歴のページを開く。
    sum_money=0
    print('Navigating...', file=sys.stderr)
    browser.open('https://www.amazon.co.jp/gp/css/order-history')

    # サインインページにリダイレクトされていることを確認する。
    assert 'Amazonログイン' in browser.parsed.title.string

    # name="signIn" というサインインフォームを埋める。
    # フォームのname属性の値はブラウザーの開発者ツールで確認できる。
    form = browser.get_form(attrs={'name': 'signIn'})
    form['email'] = AMAZON_EMAIL  # name="email" という入力ボックスを埋める。
    form['password'] = AMAZON_PASSWORD  # name="password" という入力ボックスを埋める。

    # フォームを送信する。正常にログインするにはRefererヘッダーとAccept-Languageヘッダーが必要。
    print('Signing in...', file=sys.stderr)
    browser.submit_form(form, headers={
        'Referer': browser.url,
        'Accept-Language': 'ja,en-US;q=0.7,en;q=0.3',
    })

    # ページャーをたどる。
    while True:
        assert '注文履歴' in browser.parsed.title.string  # 注文履歴画面が表示されていることを確認する。
        print(browser.parsed.title.string)

        sum_money+=print_order_history()  

        link_to_next = browser.get_link('次へ')  # 「次へ」というテキストを持つリンクを取得する。
        if not link_to_next:
            print('直近半年のAmazon使用合計金額は')
            print(str(sum)+'円です')
            break  # 「次へ」のリンクがない場合はループを抜けて終了する。

        print('Following link to next page...', file=sys.stderr)
        browser.follow_link(link_to_next)  # 「次へ」というリンクをたどる。


def print_order_history():
    """
    現在のページのすべての注文履歴を表示する。
    """
    # ページ内のすべての注文履歴について反復する。ブラウザーの開発者ツールでclass属性の値を確認できる。
    sum=0
    for line_item in browser.select('.order-info'):
        order = {}  # 注文の情報を格納するためのdict。
        # 注文の情報のすべての列について反復する。
        for column in line_item.select('.a-column'):
            label_element = column.select_one('.label')
            value_element = column.select_one('.value')
            # ラベルと値がない列は無視する。
            if label_element and value_element:
                label = label_element.get_text().strip()
                value = value_element.get_text().strip()
                order[label] = value  # 注文の情報を格納する。

        print(order['注文日'], order['合計'])  # 注文の情報を表示する。
        price=re.sub(r'¥ ' ,'',order['合計'])
        price=re.sub(',' ,'',price)


        sum+=int(price)
    return(sum)

if __name__ == '__main__':
    main()

 

 

大まかな説明

Robobrowserでブラウザを開き、フォームに入力。ログインする

商品を表示している部分をCSSタグで指定して、その中の値段部分を取得する

for文でページ内の商品を全て取得し合計を出力

 

 

いくつか説明

 

RoboBrowserってなに?

RoboBrowserはヘッドレスブラウザ(画面が表示されないブラウザ)です。

ブラウザの動きをコードで指定し、自動で動かしてくれるライブラリです。

ヘッドレスブラウザはいくつもあるのですが、robobrowserは

フォームの入力など簡単にできます

GitHub - jmcarp/robobrowser

 

ちなみに、RoboBrowserでCSSタグを取得するときは、

Beautiful Soupと記述方法が同じです

日本語で翻訳してくれた方(神)がいるので参考にどうぞ↓

kondou.com - Beautiful Soup 4.2.0 Doc. 日本語訳 (2013-11-19最終更新)

 

os.environってなに?

今回のコードはAmazonにログインするため、メアドとPWが必になります。

コードに直接個人情報を書き込むのは、IQ3でも危険とわかるでしょう

os.environによってローカルの別ファイルに保存してある

任意の文字列を読み込んで、コードを実行できます。

 

詳しくは

note.nkmk.me

 

実行結果

f:id:zerebom:20181110102200p:plain

 

使いすぎワロタ

 

おわり

内閣支持率と大臣の発言の相関について研究した

こんちは!

今日は自分の研究テーマをインターネットにアップロードしました!

 ã·ã³ãã«ãªãã¬ã¼ã³ã®ã¹ã©ã¤ãã®ã¤ã©ã¹ã

 

 

SlideShareというサイトを使えば一瞬でアップデートできますね!

今日は研究テーマの紹介とアップロード方法の紹介をします!

 

くそ雑How to アップロードforハテブ

  1. SlideShareにログイン(新規登録する)
  2. www.slideshare.net

  3. アップロードボタンからアップロードする
  4. f:id:zerebom:20181007125024p:plain
  5. 左下の"Share"ボタンを押してHTMLをコピー
  6. はてなブログに張り付けられる!

注意点

  • pptx形式はpdfに変換しないと表示が崩れる
  • アップロードするスライドの名前は半角数字にする
  • (アップロード後の名前は漢字OK)

 

簡単ッッ!!

 

 

研究テーマ紹介↓

 

 

 

研究した感想

 

  • 研究室で自然言語処理をやっているのが俺しかいないのでしんどい
  • どうやったら相関が出るか、検討がなかなかつかない

 

研究歴5か月くらいなので、方針が定まらずパニックってます。

感想お待ちしてます!

 

Help me---------------------

 

おわり

 

6ヶ月プログラミングをして出来るようになったこと/勉強法をまとめてみた

  • どうもひぐです!

 

今日はそろそろプログラミングの勉強を始めて半年たったので、

今までやってきたことを纏めていきたいと思います!

 

この記事は半年勉強してきてダレてきた自分に喝を入れつつ、

こんなに頑張ってきたじゃん!ナイス!と自分をほめるために書きます。

 

半年勉強してみて、もっとこうすれば良かった/こうして良かった

って事が見つかってきたので、

これから勉強する人は参考にしていただけたらと思います! 

 

推奨する読者層

  • プログラミング始めたいけど何からやればいいかわからない人
  • 自分もプログラミングの勉強を始めたけど、どういう進路でやればいいかわからない人
  • ほかの人がどうやって勉強しているのかなって知りたい人

 

 

4月/5月

詳しくは以下の記事に

 

 

zerebom.hatenablog.com

 

プログラミングの勉強を始めました。

1週間でProgateのレベルを100まで上げたり、

AidemyのインターンPythonを毎日10時間くらい勉強したりと、

この時期が一番集中してできていました。

 

6月

インターンをし始めて、先輩の方々がReactをやっていて、

自分もフロントエンドに携わりたいなと思い勉強をし始めました

 

また研究室に配属されて、しっかり成果を出さなくてはいけない時期になってきたので

Pythonによる研究も始めました

 

あとは100DaysofCodeを始めました。

これでつぶやくと、自分が何をしている人なのかアピールできるので、

似たことをしている人と交流が出来ていいですよ!

 

 

7月

研究とインターンPythonを扱うものの、Reactが面白くて割と触っていました。

 

  • フロントエンドエンジニアとして働きたい
  • 高給なインターンや学生バイトはWeb系のフレームワークが使えるとよさそう
  • Python等のデータ分析を出来るバイトは少ない

 

等の理由からReactを勉強していました

 

 

この時期にブログをちゃんと書き始めるようになったのかな?

 

8月

大学院の入学試験があったのでプログラミングは一回お預けになりました。

この時勉強した内容は

つまんないな~と思っていたけど、のちのち機械学習ディープラーニングを勉強する

うえでめっちゃ役立ちました。特に線形とか!

 

大学の1年で学ぶ数学は本当に応用範囲が広いので、

一年生の人はちゃんと勉強しようね!

 

9月

無事院試に合格したので、自分の興味ある分野をしっかり勉強し始めました。

9月はかなり勉強にコミットできました。

 

アプリを作ったり、Qiitaを書いたり、アウトプットを意識したのが良かったです

 

データ分析のKaggleにもチャレンジして、

しっかり分析結果をアップロードできるようになりました。

 

10月

あっという間に半年が経って焦ってきました💦

自分の大学の研究に自信が持てなくて、うーんという感じです。

とりあえず早めに卒論をかけるように頑張っていきたいです。。。!

 

出来るようになったこと/成果物まとめ

 

AdobeXD

HTML

CSS

Bootstrap4

簡単なシングルWebページをデザインから一貫して書けるようになった。

 

zerebom.hatenablog.com

 

 

Python

Flask

Keras

↑上のWEBページに製作スキルと合わせて画像認識アプリを作成した

 

zerebom.hatenablog.com

 

Kaggle(データ分析のコンペ)

Pandas

Numpy

sklearn

前処理の基本的な方針を掴むことが出来た。

欠損の少ないデータなら自分で調べながら進めることが出来るようになった。

 

React/Redux

基礎を学んだ、カンバン式Todoアプリを作成中(たぶん出来ない)

 

ブログ

月間1000PVくらいになった!(ありがとうございます!)

 

その他

Git/Githubを使えるようになった(add,push,commit,checkoutくらいしか使わんけど)

HerokuにWebアプリをデプロイできるようになった

Qiitaに記事をのっけた

qiita.com

もくもく会に参加するようになった

エンジニアの友達増えた!

ブログのおかげで文章をほめられることが増えた

(工学系生徒の文章が書ける、という基準はむちゃくちゃ緩い)

 

勉強して気づいた事

 

・まずは一つの分野に絞った方がいい

プログラミングを勉強する前は

どんな言語であれプログラミングを勉強する→色々とパソコン・ITとかに強くなる

 

だと思っていたのですが、実際は

 

目的に沿った言語を選び、その目的に対して勉強する→その分野が出来るようになる

➝他の分野を勉強する&その分野を深く知る➝だんだん強くなる

 

です。

プログラミングの勉強って言うのは、

分野ごとに全然要求される知識が違う&使いどころが違うのです。

 

プログラミングを勉強する方の中には、

「流行ってきたし、教養として身に着けたい」とか

「とりあえずよく聞くPythonでもやりたい」とかいう動機があると思うのですが、

 

Progateの講座を全言語勉強する、みたいなやり方は

「英語と中国語と韓国語とイタリア語のあいさつの仕方だけ勉強する」

みたいな感じになってしまいあまり役に立ちません。

 

つまり、プログラミングを勉強して何が出来るようになりたいか考え、

出来るようになったことで何に活かすかまで考えられるといいですね!

 

 

僕もフロントエンドと機械学習両方やって、片方忘れていって

もったいなかった部分は結構あります💦

 

 

 

・アウトプットして初めて出来たといえる

他人が自分の事をプログラミングが出来るかどうかを判断するにはどうしたらいいでしょうか?

 

成果物を見るしかありません!

 

結構受験勉強みたいにインプットばっかりになっちゃう人が多いと思うのですが、

あやふやでもいいから形にしてみる!

というのがプログラミングでとにかく大事です。

 

Reactの勉強は結構やったのですが、

結局アウトプットできずどんどん忘れてしまったのでもったいなかったです。

 

アウトプットするまでが学習!と思って取り組みましょう!

 

 

・人に会う/頼るのめっちゃ大事

勉強し始めたころはその分野で自分より詳しい人が絶対いるので

すぐ頼りにしちゃいましょう!

自分で悩むより絶対早いです

 

その時は、次同じレベルの疑問がわいたらどうしたらいいか?も聞けるといいですね。

先輩エンジニアはどうやって課題解決の方針を立てているのか?を知れると、

次は自分で解決できるかと思います。

 

相手に迷惑かも・・・?としり込みせずにどんどん聞いて成長しましょう!

そして成長したら、自分より下のレベルの人に教えてあげましょう!

 

人に会うのもとても大事です!

自分より強い人見ると燃えるし、どうやって勉強すればいいかの指標になるかと思います!

共通の趣味の人ってだけで盛り上がるしね!

 

 

 ・プログラミングが必要な環境に身を置く

これも大事ですね!趣味でやるには相当な熱意と、根気がいると思います。

学生なら成果物を作ったうえで、長期インターンに応募したり、

クラウドソーシングで受託案件をとったりしたほうが絶対伸びます。

僕も研究で必要なPythonが一番書けるようになりましたw

 

 

勉強してきたおススメのサービス・本

 

React

Reactはバージョンによる変化が激しいので、

古い書籍・サービスには注意が必要です!

 

Udemyで体系的に学べるといいですね。

Reactは大型設計を書くために作成されているので記法のほかに、

ディレクトリ構造とかも学べるといいのかなぁと思います。

www.udemy.com

 

 

HTML/CSS

prog-8.com

みんな大好きProgateで間違いないと思います。

 

終わったら、AdobeXDの使い方学んで、

サクッとポートフォリオでも作っちゃいましょう!

helpx.adobe.com

 

人のサイトを模写するところから始めると勉強になりますよ!

 

Python

 

・Aidemy

aidemy.net

 

ステマではないです(笑)

まずは、AidemyでPython基礎を勉強するといいと思います!

最初の方の講座は無料だし、Vtuberが教えてくれるらしいですよ!

 

そのあとは書籍での勉強がいいかなと

Pythonはできることが色々あるし、それによって学ぶことが全然違うので

見合った本を買えばいいと思います!

いかにお勧めのサイト・本を載せておきます

(詳しくはツイッターか、コメントで聞いてください)

 

業務の自動化なら

www.oreilly.co.jp

 

データの自動収集(スクレイピング

gihyo.jp

 

機械学習

book.impress.co.jp

↑※緑のが新しいので注意です!

 

ディープラーニング

www.oreilly.co.jp

 

データ解析&機械学習(実践)

Kaggle: Your Home for Data Science

 

 

 

おわり

以上です!

6ヶ月で、あれこれ触りすぎた感が半端ないです(笑)

 

これからの半年は機械学習・データサイエンスに注力して実力をつけていきたいです

機械学習系をやっている人の平均戦闘力が高すぎて泣きそうですががんばっていきます(白目)

 

 

 

 

使える!Pythonライブラリのチートシート一覧

こんばんは!ひぐです。

 

 

f:id:zerebom:20180918224856p:plain

突然ですが!Pythonの魅力として充実したライブラリが挙げられますよね!

が!一つ一つ覚えることがいっぱいでなかなか使いこなせない。。。

 

ということで、今日はPythonのライブラリのチートシートを紹介したいと思います!

 

トイレのドアにでっかく貼るなり、枕の下に敷くなりして暗記しましょう('ω') 

*1チートシートとは

 

 

 

 

 

 ①Numpy

Numpyはベクトル、行列の高速計算用ライブラリです。

 

DataCamp社という海外のデータサイエンティストを育てるオンラインスクール?

が提供してくださっております(感謝)

英語しか見つけられなかったですが、いつか英訳したいと思います!

 

 

②Pandas

Pandasは行列を扱うライブラリです。

csvに出力したり、列ごとに処理をかけたりとExcelのマクロのようなことが出来る超便利なライブラリです!

 

こちらは@s_katagiriさんという方が、日本語に翻訳して下さっています!

しかもGithubからpdf・pptx形式でダウンロード出来ます

感謝。。。涙

 

 

qiita.com

 

github.com

 

 ③scikit-learn

scikit-learn(通称sklearn)は機械学習系のライブラリです!

 

こちらも、DataCamp社が提供しております!

www.datacamp.com

 

以下のURLからPDF形式でダウンロードできます

https://s3.amazonaws.com/assets.datacamp.com/blog_assets/Scikit_Learn_Cheat_Sheet_Python.pdf

 

 

おわり

この3つ、特に最初の2つのライブラリは、

Pythonで頻出なのでぜひとも覚えたいですね!

 

他にも良いチートシートがあったら教えていただけたらと思います!

 

自分も作れるように精進したいです…!

*1:いまさらですがチートシートとは、覚えるべきことを見やすくまとめた画像の事です

PythonでAI画像認識アプリを作りました!【Day57】

しばらく更新の間隔があいてしまいました💦

 

今日はPythonでAI画像認識アプリを作ったので、

その紹介をしたいと思います!

 

今回の記事はAIの中身について詳しく言及するというより、

アプリの作り方を一から紹介するので、

Progateがひとまず終わった方、Rails等他の言語をやってる方もぜひ見てください!

 

こちらからクリック↓

ShikiSya

f:id:zerebom:20180916155031p:plain

 

 

 

どういうアプリか

Pythonを用いてAIの一種である、深層学習によって写真の四季を判定します

 

 

 

どういう知識があれば作れるのか

このアプリを作るには大まかに分けて3つの技術が必要となります。

箇条書きで必要な言語を書きました。

 

  • AIの仕組みを理解し、コードに落とし込む技術  
      • Keras(Tensorflowを簡単に書くためのラッパー)
      • Tensorflow(AIを作る)
  • アプリの見た目を作る技術
    • HTML(見た目を描画する)
    • CSS(HTMLを装飾する)
    • Chart.js(アニメ付きグラフを表示する)
    • Bootstrap(HTML・CSSを書きやすくする)
    • Adobe XD(見た目をスケッチするツール)
  • Pythonの結果を見た目に反映させる技術
    • Flask(PythonのデータをHTMLに渡す)

 

 

 

どういう手順で作ったか。

  1. ざっくりとイメージをする
  2. Pythonで中身を書いていく
  3. 見た目をAdobe XDで書いていく
  4. HTML&CSSでコーディングしていく
  5. デプロイする

 

こんな感じです。詳しく見ていきましょう!

 

①ザックリ考える

画像を判別するアプリを作る上で何が面白いか考えました!

人間でも判別しにくいものを判別出来たら面白いな!と思い、

四季という抽象的なテーマにしました。

 

そしてそのために必要な工程を考え、中身を実装していきました。

 

 

Pythonで中身を書いていく

 

以下のような手順で進めていきました。

 

  1. ニューラルネットワーク転移学習するためにKerasでモデルを組む
  2. 学習用データとして、Flickr APIから大量の画像をDLする
  3. 学習させ、その結果をHTMLにFlaskで渡す

 

この時参考にさせていただいたサイトはこちら↓

 

ykubot.com

 

aidiary.hatenablog.com

 

③見た目をAdobe XDで作っていく

Pythonで中身を書くことが出来たので、次はコーディングの目安になるように

Adobe XDで見た目を作っていきます。

 

Adobe XDは無料で使えるプロトタイプ作成ツールです。

公式チュートリアルもしっかりしていて、

1日触ってれば使えるようになるぐらい簡単です!おススメ!↓

 

helpx.adobe.com

 

そしてこんな風にプロトタイプを作成しました!

f:id:zerebom:20180916163337p:plain

 

デザインするうえで気を付けたことは、

  • 高級感を出すために、白黒・セリフ付きフォントを基調にする
  • 四季というテーマがわかりやすいように背景にでっかく写真を貼る。

 

です!

 

WEBデザインの基本は本を読んで、勉強しました👀

この本めっちゃおすすめです

SBクリエイティブ:いちばんよくわかるWebデザインの基本きちんと入門

 

あとは他の方が作ったWEBアプリとかをザーッとみて、

自分のイメージに合うものを選んで参考にさせていただきました。

 

ここで探すといいと思います!↓

www.eggineer.com

 

④HTML&CSSでコーディングしていく

 

実際にコーディングしていきます。

Adobe XDでプロトタイプを丁寧に作っていたので、それに沿って行くだけです!

ただ、僕の場合Twitterからの流入が殆どだと思ったので、

スマホでも見やすくなるように気を付けました。

 

 

Bootstrapも使ったのですが、あんまり仕組みを理解できておらず、

Flexboxと混ざってあんまり真価を発揮できなかったので次回は気を付けたいです…

 

また、結果画面のグラフではChart.jsを使いました。

JSは殆ど触ったことがないのですが

書き方が完全に独立している上、日本語のドキュメントがしっかりあったので、

楽々導入できました!

 

www.webprofessional.jp

 

⑤デプロイする

あとはデプロイするだけ!だったのですが、ここで死ぬほど詰まりました…

 

 

↑限界になっている僕

 

WEB系の方にとっては常識らしいのですが、

デプロイする場合は、最初にデプロイして徐々にpushするといいそうです。

そうすると、どこでエラーが起こったのかわかりやすいので…

ここの知見はのちほどQiitaで纏めるかもしれないです。

 

 

 

参考にしたサイト:

qiita.com

 

AI部分の大雑把な解説

 

画像の引用元:

news.mynavi.jp

AIと言われても中身何しているか全然わからないですよね!

ここでは簡単に解説します。

 

今回はニューラルネットワークの転移学習という技術を使っています。

 

ニューラルネットワークとは、

人間の神経細胞を数学的にモデル化した特徴分類器です。

 

ディープラーニング(=深層学習)はそのニューラルネットワークを何層にもして高性能にしたものと言えます。

 f:id:zerebom:20180916172427j:plain

 

 

 

入力画像が与えられてそれに対して、今まで学習した画像データと参照して、

この画像はこのカテゴリだ!と判定しているわけです。(死ぬほどざっくりした解説)

 

そして転移学習とは学習済みのモデルの最後の部分だけ、入れ替えたものです。

これにより、少量の画像データでも学習を行い、分類器として力を発揮できるのです

f:id:zerebom:20180916172429j:plain

 

と、まあめちゃくそざっくりとした解説ですね(笑)

詳しく知りたい人はAidemyの教材(無料)で学ぶといいかもしれないです!

aidemy.net

 

おわりに

以上です!アプリを作ると

  • 成果物として形に残る
  • 各技術とのつながりを理解できる
  • 周辺知識も身につく
  • 楽しい!!

いいことばかりです!ぜひみなさんも基礎が終わったらアプリを作ってみてください!

 

 

めちゃくちゃざっくり書いたので、ここ詳しく聞きたい!

って言うのがあったら是非コメントやTwitter(@zerebom_3)で連絡ください!

 

では~

 

 

 

 

【旅費タダ】Travel Nowで大阪・神戸に行ってきた【大阪編】

おひさです!ひぐです!

 

今日は、Travel Nowのオープンキャンペーンで手に入れた、

チケットを使って旅行に行ってきたのでそのレビューをしたいと思います!

 

あと、一眼レフ Canon EOS8000Dも最近買ったので、その写真を挟みつつ!

 

 

Travel Nowってなに?

Travel Nowは旅行に行くために必要なめんどくさい工程を省いて、

旅行を手配してくれるアプリです。

travel.app

コンセプトはこんな感じです。↓

 

f:id:zerebom:20180724001633p:plain

 

僕はTravel Nowがリリースした当初行っていた、

3万円以下のプラン無料キャンペーンに申し込みが出来たので、

「ホテル代、往復航空券」が無料になりました!

 

いや、太っ腹過ぎない?????????????????

うっかり「どうだ、明るくなったろう」のおじいさんかと思ってしまいました。

 

800px-Narikin_Eiga_Jidai

 

 

Canon EOS8000Dってなに?

Canonが発売している、一眼レフカメラです。

ポジション的には「初心者向けだけど、しっかり機能も充実」って感じです。

僕はAmazonで展示品(新中古)を68000円で買いました。

 

友人とこの方のブログを参考に買いました!

kotoba-box.com

 

大まかな旅程

二日で大阪・神戸を観光しました!

ゴリゴリに練り歩きました。ねりねりにゴリ歩きました。

 

1日目:

(9時発)成田空港➡関西空港➡動物公園前➡串カツ八重勝➡西成➡天王寺大阪城➡三ノ宮➡

南京街➡ホテル

 

2日目:

神戸異人館➡スタバ➡灘の酒蔵通り➡ステーキランド神戸店➡神戸空港関空(14時発)➡成田

 

こっからは時系列にどうぞ!↓

 

1日目

成田発

9時に成田につきました。

飛行機はJetstarでした!

アプリに予約番号が書いてあるので、それを機械に入力してチケットを手に入れます。

 

と、思ったら機械でエラーが出て予約できず。フロントで受け付けてもらいました

(ちょっと焦った)

 

f:id:zerebom:20180724003809j:plain

 

 

そして搭乗!あっという間に乗れちゃいました。お金払ってないのに。(笑)

f:id:zerebom:20180724004103j:plain

 

関空着➡動物公園前

そして2時間弱で到着!

行く先も決まってなかったのですが、とりあえず難波でも行けばいいかなと思い、

「ようこそ大阪キップ」を購入しました。

ようこそ大阪きっぷ|南海電鉄

 

1850円でバス一日乗車券・大阪市内地下鉄1日乗車券・関空

難波のラピート特急券が買えます。

 

 

特急券だけで1500円くらいするのでお得すぎワロタです。

ラピートかなりイカしてる↓

f:id:zerebom:20180724004846j:plain

 

難波についた後、親戚のおじさんに連絡しました。

お昼を食べに動物公園前に来てとのこと。

当日に茨城から来たって言ったのに案内していただきました。(ほんとすいません)

f:id:zerebom:20180724004945j:plain

 

あたりまえですが、超暑かったです。

太陽のギラギラな殺意が降り注ぎます。

 

それすら巧みに使うキャッチの兄さんたちに驚きました。

大阪の商人魂…!

 

キャッチの兄さん

「ウチ、めっちゃ冷えてまっせ!なんと、エアコンの温度。"21.5℃"

 

いや、そこ売るのかよ!

 

カメラを持って歩くと死ぬほどキャッチの方に話しかけられます。

モテ期かとおもっちゃった。

 

 

無事兄ちゃんたちと話しつつ全然違うお店、串カツ八重勝に。

ちょっと入り組んだとこにあるので、地元の方が多めな印象でした!

f:id:zerebom:20180724005956j:plain

 

てか、ここの商店街のキャラ。あほそうすぎる

f:id:zerebom:20180724010044j:plain

 

 

 

さて、肝心の八重勝ですが、、、

死ぬほど旨かったです。。。。。。。。!!!

 

f:id:zerebom:20180724010207j:plain

 

こんなでっかいエビ初めて食べた…(感動

暑いしうまいし、めっちゃビールおいしい。

3人でビール大ビン5本開けます(白目)

 

 

 

 八重勝➡西成

ラクラしたまま食後はすぐ近くの西成に向かいます。

 

酔っぱらったまま商店街歩いて大丈夫かな、

と思ったけどここにいらっしゃったおじさんは殆ど酩酊していました。(笑)

さすが、西成。。。!

 

ディープな街並みです。

f:id:zerebom:20180724010744j:plain

 

f:id:zerebom:20180724010841j:plain

 

 

そして、すぐ近くにはあべのハルカス。都会の街並みに。

大阪、切り替えはやい…!

f:id:zerebom:20180724011015j:plain

 

そのまま天王寺駅まで歩いていき、電車で大阪城に向かいます。

おじさんとは、方向が違うのでここでお別れしました。

f:id:zerebom:20180724011213j:plain

 

 

天王寺大阪城大阪駅

そして、大阪城に到着!

緑と堀の水の青色が映えます。

 

f:id:zerebom:20180724011231j:plain

 

めちゃくちゃ外国人の方が多いです。

ほんとに8割とかそんくらい。サムライ、かっこいいもんね。

f:id:zerebom:20180724012256j:plain

 

 

眺めも最高でした!

f:id:zerebom:20180724012313j:plain

 

中には大阪城を建設した、豊臣秀吉の書物などが説明付きで展示されています。

 

日本史に疎すぎて

はえー、おっきいンゴ」

などと、偏差値2くらいの感想しか言えなかったのが悔しいです。

 

 

 

そして、大阪城を観光した後、1日乗車券のあるバスを使って大阪駅へ、そのままホテルのある神戸へと向かいました!

 

f:id:zerebom:20180724013212j:plain

 

 

 

 

 

 

 

 

 

今回はここまで!

思ったより、長くなりそうなので神戸編はまた後程書きます。

 

では~

 

 

【Adobe XD】WEBデザインの模写練習【Day12】

こんちは!ひぐです!

 

非常に日数が空いてしまいました💦

サッカー面白かったっすね!!

 

今日はもくもく会を行いました!

今の自分には、デザインのインプットが足りない&Adobe XDの理解が乏しい

という課題があると感じていたのでXD を使って、

WEB・スマホページのデザインの模写を行いました!

 

こんな感じ↓

f:id:zerebom:20180701012948p:plain

f:id:zerebom:20180701012952p:plain

f:id:zerebom:20180701012953p:plain

 

上から、模写元のページを紹介すると、

ジャパンインベスターパートナーズ

www.ji-partners.co.jp

  ベイク チーズタルト | BAKE CHEESE TART

cheesetart.com

北陸・信越トリップ ~北陸へ、北陸からひろがる旅~

hokuriku-w7.com

 

この3つです!どれもとてもきれいなWebサイトです。。。!

 

どんな風に模写したかさっくり説明したいと思います!

 

⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩

 

①まず、Adobe XDをダウンロードします

XDについての記事↓

 

zerebom.hatenablog.com

 

 

②サイト全ページ保存ツールFireShotを使ってキャプションを取る

Chromeの追加アプリです!

2分くらいで理解&ダウンロードできます!⇩

FireShotとは?無料で使い勝手が良い画面キャプチャアドオンの使い方|ferret [フェレット]

ferret-plus.com

 

③キャプションをペースト

XDは画像をクリップボードに保存➡貼り付けが行えます!

(ctrl+C➡ctrl+V)

なので、こんなふうに隣に並べて模写します!

f:id:zerebom:20180701021456p:plain

 

ちなみに、横に並べず

画像を最下層にして、編集画面と重ねるともっと効率いいです!

 

ですが、余白とか、グリッドとかデザインについて考えず、脳死でトレース

出来てしまうので練習にはならないかも・・・!

 

 

 

-------------------まとめ-----------------

 

実際模写を行うことで、

Adobe XDの使い方をかなり覚えることが出来ました!

というかXDが高性能&使いやすすぎて、すぐ覚えられる!

 

また、なんとなく見てたWebサイトも模写してみると、

図の置き方、空白の使い方等いろいろな気付きがありますね!

 

時間が出来ればXDの操作方法なども簡単に纏められたらいいなと思います!

では~

 

google-site-verification: google1c6f931fc8723fac.html