klim.log()

フロントエンドエンジニア見習いによる学習記録

ウェブサービスやSNSのデータをバックアップする

2018年も終わりに差し掛かり、年末年始休暇で時間を持て余している人もいるかも知れません。そんな方は是非この機会にオンラインサービスのバックアップを取ってみましょう!

目次

注意点

  • ヘビーに利用しているサービスほど、データをエクスポートする時間が多くかかります。
    • 時間がかかりそうなサービスから先に着手するといいかも
  • ヘビーに利用しているサービスほど、エクスポートされたデータの容量が多くなります。
    • PCやHDD/SSDの空き容量は要チェック
  • サービスに登録しているメールアドレス宛にエクスポート用のURLが送られてくるケースが多いです。

Google

  • https://takeout.google.com/settings/takeout
    • バックアップしたいデータを選択し、一番下にある 次へ ボタンをクリック
    • その後表示される画面で、ファイル形式やアーカイブのサイズを選択する
      • 筆者の場合データサイズが大きかったせいか、アーカイブ用URLがメールで送られるまで時間がかかった上に、ZIPファイルのサイズが10GBになった

SNS

Twitter

Facebook

Instagram

Mastodon

  • https://[インスタンスのアドレス]/settings/export
    • フォロー・ブロック・ミュートのリストがCSV形式でダウンロードできる
    • 併せて、トゥートとメディアのアーカイブもダウンロードできる

はてな

はてなブログ

  • https://blog.hatena.ne.jp/[USER_ID]/[USER_ID].hatenablog.com/export/movable_type
    • はてなブログドメインは複数あるので上記URLの[USER_ID]を編集しただけではアクセスできないかも…
    • ダッシュボード → 設定 → 詳細設定 → エクスポート(記事のバックアップと製本サービス)
    • 残念→ 記事に掲載している写真やそのほかのコンテンツはバックアップできません。

はてなダイアリー

はてなブックマーク

  • http://b.hatena.ne.jp/-/my/config/data_management
    • エクスポートの隣にある ブックマーク形式 Atomフィード形式 RSS1.0形式 のリンクをそれぞれクリック(1つだけで充分な気もする)
    • 現在エクスポート可能な件数は2万件までです。それ以上の件数のブックマークをエクスポートしたい場合は問い合わせフォームよりご連絡ください。 という記述が気になる人はお問い合わせフォームへ

はてなアンテナ

その他ウェブツール

Feedly

  • https://feedly.com/i/opml
    • サイドバーのFEEDSという文字の右にある歯車アイコンをクリック → 右上の矢印(Export OPML)をクリック → Download your Feedly OPML をクリック

Slack

  • 自分が管理しているSlack Teamがある人向け
  • https://[USER_ID].slack.com/services/export
    • Export タブをクリックし、Export date rangeから期間を選択して Start Export をクリック

GitHub

Simplenote

Evernote

Visual Studio Code 設定集

コツコツ育て上げる系の記事です。毎日のようにこの記事をアップデートしていくつもり。

VS Codeだけじゃなくテキストエディターはカスタマイズしてナンボのところがあるけれど、やっぱりメモ残しておかないと色々分からなくなるので、せっかくだからブログにまとめておく。

内容的にフロントエンド寄りになります。

【追記:2019-06-22】 毎日のようにこの記事をアップデートしていくつもりと言ったな、あれはウソだ。 という訳で、半年ぶりに更新。

目次

環境

User Settings

基本設定のやつ。デフォルトのものは極力記述しないようにする*1

{
    "breadcrumbs.enabled": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code','Myrica M',Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.renderWhitespace": "all",
    "editor.renderControlCharacters": true,
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.variables": {
        "lang": "ja"
    },
    "telemetry.enableCrashReporter": false,
    "telemetry.enableTelemetry": false,
    "workbench.statusBar.feedback.visible": false,
    "workbench.colorTheme": "Monokai",
    "window.title" : "${dirty}${activeEditorMedium}${separator}${rootName}",
    "files.associations": {
        ".{htmllint, csslint}rc": "json",
        "Vagrantfile":"ruby"

    }
}

説明

  • カーソルの点滅をチカチカからチィカチィカみたいな感じに(雑
    • "editor.cursorBlinking": "smooth"
  • エディター用フォントはFiraCode派。リガチャ(合字)でコーディングがはかどる。
    • editor.fontFamily"
    • リガチャをオンにする
      • editor.fontLigatures
  • スペースと制御文字は全部可視化
    • editor.renderWhitespace
    • editor.renderControlCharacters
  • Emmet関連
    • サジェストに表示させる
      • emmet.showSuggestionsAsSnippets
    • TABキーでEmmetを発動させるかどうか
      • これを true にすると、いったんカーソルを外した文字列(例: h1 )に再度カーソルを当てた上で tab キー押下してEmmetが発動できる。
      • emmet.triggerExpansionOnTab
    • Emmet発動時の属性等を指定できる。
      • 例えば ! で展開される時の html 要素の lang 属性を、デフォルトの en から ja に変更したい…という時に設定する。
      • emmet.variables
  • クラッシュレポートや匿名情報共有やフィードバッククレクレアイコン
    • telemetry.enableCrashReporter
    • telemetry.enableTelemetry
    • workbench.statusBar.feedback.visible
  • カラーテーマ
    • workbench.colorTheme
    • 筆者はMonokai派
  • タイトルバーにファイルパス等を表示させる
  • 特定のファイルや拡張子に、特定のシンタックスハイライトを対応付けさせる

保存場所

/Users/[USER]/Library/Application Support/Code/User/settings.json

Keybindeings

キーボードショートカットをアレコレするやつ。 筆者は基本的にエディターやIDEのデフォルトから大きく変えないタイプ(が、何か追加する時はSublime Textに合わせがち)

[
    {
        "key": "ctrl+shift+;",
        "command": "workbench.action.terminal.focus",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+;",
        "command": "workbench.action.focusFirstEditorGroup",
        "when": "terminalFocus"
    },
    {
        "key": "cmd+k cmd+u",
        "command": "editor.action.transformToUppercase"
    },
    {
        "key": "cmd+k cmd+l",
        "command": "editor.action.transformToLowercase"
    }
]

説明

  • ターミナルとエディターのフォーカスを切り替える
    • workbench.action.terminal.focus
    • workbench.action.focusFirstEditorGroup
  • アルファベットの大文字小文字を切り替え
    • editor.action.transformToUppercase
    • editor.action.transformToLowercase

保存場所

/Users/[USER]/Library/Application Support/Code/User/keybindings.json

Extensions

みんな大好き拡張機能。詳細はリンク先を確認。

UI関連

  • Bracket Pair Colorizer 2
    • 入れ子になったかっこを色分けして表示してくれる。
    • Bracket Pair Colorizerの作者が作成したバージョン2版で、バージョン1よりも処理速度や正確さが向上しているらしい。
  • EvilInspector
    • 全角スペースを強調表示してくれる
  • indent-rainbow
    • インデントの深さを色分け
  • vs code-icons
    • サイドバーのファイルアイコンをデフォルトのやつよりいい感じにしてくれるやつ

テキスト・入力補助関連

  • Markdown All in One
    • キーボードショートカットキーを割り振ってくれたり、画像のパスを入力補完してくれたり色々と高機能なMarkdown拡張機能
  • vscode-input-sequence
    • VS Codeのデフォルトのキーボードショートカットである cmd+alt+↑↓ と組合わせると大変便利。
    • 上記ショートカットで矩形選択した上で cmd + alt + 0 で連番を入力できるようになる。これでインプットパネルが出てくるので、ここで 1 と入力して Enter すると、1始まりの連番が挿入されている。
  • テキスト校正くん

Git関連

コーディング強化

Vue.js関連

Docker関連

  • Docker
    • サイドバーでimagesやcontainersを確認したり操作したり、Dockerfileのシンタックスハイライト機能も。

User settings for Extensions

先述のsettings.jsonに下記を追記することで、上記拡張機能の設定を変更できる。

{
    "gitlens.defaultDateStyle": "absolute",
    "workbench.iconTheme": "vs code-icons"
}
  • GitLensで日付を絶対表示に
    • "gitlens.defaultDateStyle": "absolute"
  • サイドバーのvs code-icons
    • "workbench.iconTheme": "vs code-icons"

保存場所

/Users/[USER]/.vs code/extensions

参考URL

*1:settings.jsonの紹介記事を嬉々として見に行ったらほとんどがデフォルト値のものをわざわざUser Settingsに記述しているものが多くて辟易とした。VS Codeのバージョンアップでデフォルト値が変更された時の対策としてはアリではあるけれど…

今更ながらHerokuを使い始めたので最速でPHPファイルをアップしてみる

2018年にもなってHeroku入門記事を書きます

目次

導入

何がともあれセットアップ

  1. アカウント作成
  2. コマンド経由でHeroku CLIをインストール
$ brew install heroku/brew/heroku

他の環境の人は以下参照

プロジェクト作成

ディレクトリ作成

小技を使ってワンライナーディレクトリ作成&そのディレクトリに移動*1

$ mkdir heroku_test && cd $_

ファイル作成

適当に index.php を作成

<?php phpinfo();

composer.json も作成

{}

この2つでPHPプロジェクトであると認識されるらしい

Git

Gitでコミットしておく

$ git init
$ git add .
$ git commit -m 'Initial commit'

Herokuにログイン&アプリ作成

ログイン

$ heroku login

heroku: Press any key to open up the browser to login or q to exit: 

上記コマンドを叩くと、なにかキー押せと言われるのでEnterとか押下する

するとブラウザに飛ばされて以下のような画面に

Herokuにログインできたところ

Log in をクリックすると以下の画面に

Herokuのログイン画面の様子

この画面が出たらコマンド画面に戻り、以下のようなコマンドが出ていたらOK

Logging in... done
Logged in as klim0824@example.com

アプリ作成

$ heroku create

Creating app... done, ⬢ hoge-fuga-123456
https://hoge-fuga-123456.herokuapp.com/ | https://git.heroku.com/hoge-fuga-123456.git

$ heroku create すると、自動でデプロイ先とgitが生成される(ここの手順の前に git init しておかないと、リモートブランチにここのが紐付かれないっぽい?)

デプロイ

gitでpushしてデプロイ

$ git push heroku master


Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 4 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (4/4), 285 bytes | 71.00 KiB/s, done.
Total 4 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> PHP app detected
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        NOTICE: No runtime required in composer.lock; using PHP ^7.0.0
remote:        - nginx (1.8.1)
remote:        - php (7.3.0)
remote:        - apache (2.4.37)
remote: -----> Installing dependencies...
remote:        Composer version 1.8.0 2018-12-03 10:31:16
remote: -----> Preparing runtime environment...
remote:        NOTICE: No Procfile, using 'web: heroku-php-apache2'.
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 15.4M
remote: -----> Launching...
remote:        Released v3
remote:        https://hoge-fuga-123456.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/hoge-fuga-123456git
 * [new branch]      master -> master

https://hoge-fuga-123456.herokuapp.com/ にアクセスするとキチンとデプロイされていることが確認できる

よかったですね

Dashboardとか

デプロイしたHerokuアプリは以下のURLから確認できる

アプリを削除するには、 アプリ名 →Settings → Delete app... → Deleting your app and its add-ons is irreversible. Enter your app's name (hoge-fuga-123456) below to confirm you want to permanently delete it: と書かれたポップアップが出てくるので、入力欄に「hoge-fuga-123456」を貼り付けてEnter

macOS Sierra から Mojave にアップグレードした

数日かけてmacOS Mojaveをクリーンインストールしたのでメモを残す。 通常だと、OSSを上書きインストール→クリーンインストールという2段階を経るようだが、面倒なのでUSBメモリ経由で1回だけクリーンインストールする方針を採った。

目次

必要なものとか

TimeMachine等でデータをバックアップ

  • 下手したら一番時間がかかる工程
  • 外付けHDD等にPC内のデータをバックアップ
  • これを機会に要らないデータとかアプリを削除してもいいかもね

macOS Mojaveインストール.app のダウンロード

  • Appストアからインストーラをダウンロード。
    • 約6GBとサイズが大きくダウンロードに時間がかかるため、WiFi環境でゆったり待つべし。電源の確認も大事。
  • OSアップグレードの画面が出てくるが、ここではすぐに画面を消してしまおう。
  • ダウンロード後はApplicationフォルダに格納されている。

USBメモリインストーラを作成

インストーラをダウンロードしたら、起動可能なインストーラとして使う予定の USB フラッシュドライブやその他のボリュームを接続します。空き容量が 12 GB 以上あり、Mac OS 拡張でフォーマットされているものを用意してください。
  • 用意しましょう(説明丸投げ)
  • ターミナルを起動し、次のコマンドを叩く
    • sudo /Applications/Install\ macOS\ Mojave.app/Contents/Resources/createinstallmedia --volume /Volumes/MyVolume
    • macOS Mojaveインストール.app の保存場所を変更している場合、 /Applications の箇所のパスを適宜変更する
    • 最後の /MyVolume も適宜変更
    • パスをコピーする際はこの方法が便利

インストーラUSBを接続した状態でMacを起動(再起動)する

  • いよいよ本番
  • optionキーを押下したまま電源ボタンを入れる(再起動する)

ディスクを初期化する

  • macOS ユーティリティ」画面から「ディスクユーティリティ」を選択。
  • フォーマットは APFS でいいかと
  • やり残したことを思い出した人はここでフォーマットする前にやっておきましょ

Install macOS Mojaveの起動メニューを選択してクリーンインストール

  • macOS ユーティリティ」画面から「macOS 再インストール」を選択
  • あとはWiFiに接続したりiCloudにログインしたりパスワードとか設定したりする
  • Mojaveから外観でダークテーマを選択できていい感じ

TimeMachineで今までのデータを復元

  • 「移行アシスタント」を起動し、TimeMachineを起動してデータ復元

OSのソフトウェア・アップデート

  • 「システム環境設定」→「ソフトウェア・アップデート」を選択して、Mojaveをアップデート
  • ここでも数GB程ダウンロードが発生

アプリのアップデート

  • AppストアのUIが一新されている
  • サイドバーからアップデートをクリック

セキュリティとプライバシーの設定を確認

  • TimeMachineで復元すると大体の環境が元通りになるが、「セキュリティとプライバシー」の一部の設定がデフォルトに戻っているようだった
  • プライバシーのタブ内で、権限を渡すアプリの設定のチェックが外れていたので、ここの設定を見直した

Launchpadのアプリの並びを整理する

  • なんでここの順番もバックアップとってくれてないんでしょうね

効果とか

  • ダークモード最高
  • 40GBくらい空き容量が増えた(!!)

Sourcetreeを久しぶりに起動したらエラー画面が出てきた

ここしばらく触っていなかったSourcetreeを久しぶりに起動したらエラー画面が出てきてげんなり。

環境

  • macOS Mojave
  • Sourcetree 2.7.6 (執筆時現在の最新は3.0)

起動直後に表示されるエラー

  • 'git log' failed with code -1:'launch path not accessible'
  • 'git status' failed with code -1:'launch path not accessible'

Sourcetreeに表示されるエラー画面1 Sourcetreeに表示されるエラー画面2

解決方法

  1. 環境設定 → Git → Gitのバージョン を確認する
  2. System Git launch path not accessible と表示されているのを確認する
  3. 内蔵のGitに戻すシステムのGitを使用する を選択する

Sourcetree設定画面1 Sourcetree設定画面2

原因?

  • 因果関係が定かで無いので推測でしかないが、前回のSourcetreeの起動から今回の起動の間に、Git本体に関して色々弄ったことがあった
  • 今まではXCodeに備え付けられていたGitを利用していたが、XCodeをアンインストールしてHomebrewでGitをインストールしたことがあった
    • このタイミングでSourcetree内部のpathの設定がおかしくなった?

参考URL