LastPassがセキュリティーブリーチだってよ。1Passwordは大丈夫かいな？

LastPassがハックされてユーザーの皆様のアカウント＆パスワードがダダ漏れのようですね。大至急マスターパスを変更して二段階認証を適用しましょう。というか、1Passwordに乗り換えて、keychainを自分で管理した方がいいんじゃね？ クラウドに大事なパスワードを預けるなんて恐ろしいこと、とても僕にはできませんよ。

Password Manager LastPass Warns of Breach

http://krebsonsecurity.com/2015/06/password-manager-lastpass-warns-of-breach/

Hack of cloud-based LastPass exposes hashed master passwords

http://arstechnica.com/security/2015/06/hack-of-cloud-based-lastpass-exposes-encrypted-master-passwords/

LastPass Security Notice - LastPass Blog

https://blog.lastpass.com/2015/06/lastpass-security-notice.html/

ところで、ちょうど昨日、1Passwordのセキュリティーに関してこんな煽り記事があって話題になってたけど、これってよくよく読んでみたら全くもって問題なしという結論じゃないですか。

1Password Leaks Your Data

http://myers.io/2015/10/22/1password-leaks-your-data/

When a Leak Isn’t a Leak

https://blog.agilebits.com/2015/10/19/when-a-leak-isnt-a-leak/

というわけで、いちおう僕が1Passwordをより安全に使うためにやってることを、ここでチラ見せしておくよ。会社のSlackに投稿するために書いた内容だから全部英語だけどね。英語苦手な人はせいぜい頑張ってね。それと内容は全てMacユーザ向けだけどね。Winの人はMacを買って出なおしてねー。

Here are some tips what I have done to make my 1Password security more robust:

• Use OPVault format for your keychain file: for more info → https://support.1password.com/switch-to-opvault/
• Hide your keychain file by changing the location, file name & extension: ie. If you change the keychain file name from 1Password.opvault to test.app, it’s more difficult for hackers to notice that it's a keychain of 1password. Also I put my keychain file inside a hidden folder (just add dot at the head of the folder name).
• Update your master password periodically: ie, if you include some numbers based on calendar, such as 'somepassword2015-10!', you can update your password monthly without forgetting your new password!
• Apply 2 factor authentication on Dropbox if you'd like to put your keychain file on Dropbox to share on multiple devices. Also don't forget to hide the keychain file (as mentioned above) in your Dropbox.
• Turn on the FireWall and FileVault on your Mac: System Preferences > Security & Privacy > Firewall > Turn On Firewall

Furthermore, in my case…

• I completely block any network traffic (both incoming & outgoing) of 1Password.app by using LittleSnitch, as I don’t even trust 1Password.app (engineers in AgileBits could potentially implement some malicious code in their app to leak your passwords).

Do you think this is too much? Maybe it sounds like paranoia…?

However, I’m pretty sure that no cyber security measure is perfect; any encryption or passwords will be compromised sooner or later, and we cannot be too careful.

というわけで、お気をつけてー

IllustratorでWebデザイン、spriteの書き出しまでドバっとやるよ。

Webデザインはたいていイラレでやるよ。

Webデザインするとき、僕はたいていイラレでやってるよ。
Fireworksってサポート終了してほぼ死亡状態だし、Sketch.app はベクターツールがイマイチだし、まだまだバグが多い。

イラレの設定はこんな感じ。

• Pixel Preview を on
• Pixel にスナップを on
• 環境設定 > “キー入力”を 0.5px にする
• 環境設定 > “単位”を全てピクセルにする
• グリッド設定とかは10px単位とかで適当に。
  • ちなみに960pxグリッドシステムのテンプレートとかよく使う -> 960GSでダウンロード
• 変形とかは Pixel Grid に整合を on
• その他 -> IllustratorをWeb作業に最適化するためのポイント

で、できたファイルはきちんとレイヤーを整理してから、レイヤー保持したままフォトショに移す。

• 参考： デザイン業務のスピードアップ！Illustratorのレイヤーを保持したままPhotoshopに持ってくる方法

さらに、そこからSlicy使ってRetina用画像も含めてドバッと書き出し。以上おしまい。

• 参考： Slicyはあっと驚くほど便利だった。

できあがったスライス画像はCompassでスプライト画像化するんだけど(やり方)、このスプライトをRetina対応にはちょっと工夫が必要。以下を参考にRetina書き出し用のmixinを作ってあげる。

• 参考： 楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法

んで、一旦フォトショを経由するのウザいなーとか思ってたら、こんなんあった。まだ試してないけど。

• Retina画像を一括エクスポートするアプリは本当にないのか？ならばつくろう。 | ここぽんのーと

Markdown でリンクにターゲット属性を付けるよ

Markdown のリンクにはターゲット属性を指定できないんだけど、Webにアップする時とかjQuery使ってクライアント再度で target="_brank" を追加してあげるといいですよ。こんな感じで。

<script>
    $(function () {
        $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
    });
</script>

Sublime Textで更新されたHTMLファイルをすばやくブラウザでプレビューする方法

• Browser Refresh ってパッケージをぶっこむ。
• そしてkeybindをいじる。
• やりかたの参考はこちら -> Sublime Text 2で素早くブラウザプレビューする方法

んで、これだけだとhtmlとかphp以外のファイルでも、更新のたびにブラウザがリロードされちゃってうざいんで、keybindに以下のcontextを設定する。これで、html, php, css, scssの時だけ保存と同時にブラウザを更新できるよー。

// Browser Refresh
{ "keys": ["super+s"], "command": "browser_refresh",
  "args": {
    "auto_save": true,
    "delay": 0.0,
    "activate_browser": false,
    "browser_name" : "Google Chrome"
  },
   "context": [
    {
      "key": "selector",
      "operator": "equal",
      "operand": "text.htm,text.html,source.php,source.scss,source.css"
    },
    { "key": "selector", "operator": "not_equal", "operand": "text.html.markdown" }
  ]
},

以上おしまい。

追記) markdownの保存時にもブラウザが更新されてウザイので、上記コードを一部変更しました。

WordPress で重複記事を削除するプラグインを作ったよ。

WordPressで重複記事を削除するための"Delete all duplicate posts"ってプラグインがあるんですが、なんかうまく動かないので、自分で作りなおしました。タイトルが同じ記事がアップされると、古いバージョンの投稿は自動で削除されます。

<?php
/*
Plugin Name: Delete duplicate posts
Plugin URI: 
Description: Deletes duplicate posts based on their title
Author: Mitsuki Fukunaga
Version: 1.0
Author URI:
*/

function WPDeleteDuplicates(){
    global $wpdb;
    $wpdbprefix = $wpdb->prefix;
    
    $wpdb->query("
        DELETE FROM ".$wpdbprefix."posts
        WHERE ".$wpdbprefix."posts.ID not in (
            select max_id from (
                SELECT MAX(t1.ID) AS max_id
                FROM ".$wpdbprefix."posts AS t1
                WHERE t1.post_type = 'post'
                GROUP BY t1.post_title
            ) as t2
        ) AND ".$wpdbprefix."posts.post_type = 'post'
    ");
}

add_action('publish_post', 'WPDeleteDuplicates');

?>

SCSSのおさらいメモ。

実行コマンド

• sass --style expanded scss/main.scss:css/main.css
  • --style expanded はTabIndexしないoption
• sass --style --watch scss:css 変更を自動反映

 Basic Syntax

• /*…*/ コメント, または //…
• & は親要素を表す
  

  a {
      text-decoration: none;
      &:hover {
          font-weight: bold;
      }
  }
  

 Variables

• $〜で変数を宣言
• {} 記号で値を評価
  

  $baseFontSize: 14px;
  
  #main {
      p {
          font-size: $baseFontSize;
          .sub {
              font-size: $baseFontSize - 2px; // 12px
              font-size: #{12 + 12}px; // 24px
          }
      }
  }
  

• 文字列変数
  

  $imgDir: "../img/";
  
  #main {
      background-image: url($imgDir + "bg.img");
      // or background-image: url("#{$imgDir}bg.img");
  }
  

• カラー変数
  

  $brandColor: rgba(255,0,0,0.9);
  
  #main {
      color: lighten($brandColor, 30%);
  }
  

  • lighten とか darken とか -> Builtin Functions 参照

 制御構文

• if分岐： @if, @else if, @else を使う
  

  $debugMode: true;
  
  #main {
      @if $debugMode == true {
          color: red;
      } @else {
          color: blue;
      }
  }
  

• forループ
  

  // .fs10 〜 .fs14 までいっきに作る！
  @for $i from 10 through 14 {
      .fs#{$i} { font-size: #{$i}px; }
  }
  

• whileループ
  

  // .fs10 〜 .fs14 までいっきに作る！
  $i: 10;
  @while $i <= 14 {
      .fs#{$i} { font-size: #{$i}px; }
      $i: $i + 1;
  }
  

 LIST

• 似たようなデータをまとめて管理
  

  $animals: cat, dog, tiger;
  @each $animal in $animals {
      #{$animal}-icon { background: url("#{$animal}.png"); }
  }
  

• ちょくせつリストをeach文に書いてもよし。
  

  @each $animal in cat, dog, tiger {
      #{$animal}-icon { background: url("#{$animal}.png"); }
  }
  

 FUNCTION

    $totalWidth: 940px;
    $columnCount: 5;

    @function getColumnWidth($width, $count) {
        $padding: 10px;
        $columnWidth: floor(($width - $padding * ($count - 1)) / $count);
        @debug $columnWidth;
        @return $columnWidth;
    }

    .grid {
        float: left;
        width: getColumnWidth($totalWidth, $columnCount);
    }

 ファイルの分離

• _settings.scss settingファイル
  

  $totalWidth: 940px;
  $columnCount: 5;
  

• _functions.scss 関数ファイル
  

  @function getColumnWidth($width, $count) {
      $padding: 10px;
      $columnWidth: floor(($width - $padding * ($count - 1)) / $count);
      @debug $columnWidth;
      @return $columnWidth;
  }
  

• main.scss 読み込み
  

  @import "settings";
  @import "functions";
  
  .grid {
      float: left;
      width: getColumnWidth($totalWidth, $columnCount);
  }
  

 @mixin (複数の設定をまとめて管理)

    @mixin round {
        border-radius: 5px;
    }

    .label {
        font-size: 12px;
        @include round;
    }

• 引数を付けることもできるよ
  

  @mixin round($radius:4px) { // def.value: 4px
      border-radius: $radius;
  }
  
  .label {
      font-size: 12px;
      @include round(10px);
  }
  

 @extend (継承)

    .msg {
        font-size: 12px;
        font-weight: bold;
        padding: 2px 4px;
    }

    .errorMsg {
        background: red;
        @extend .msg;
    }

    .warningMsg {
        background: orange;
        @extend .msg;
    }

Sublime Text 3 で MarkDown をサクサク書くよ。

SublimeText で MarkDown ドキュメント書く場合、ブラウザでプレビューするパッケージ入れてもいいんだけど、いちいちブラウザ出てくるとうざいんだよね。そこで、Marked でプレビューする方が圧倒的におすすめ。たしか450円ぐらいしたけどね。

やりかたはココにスクリーンキャストが落ちてるから見てちょ。
https://tutsplus.com/lesson/sublime-and-markdown-with-marked/

んで、Markedの設定を半透明＆OnTopにしておくとよい。Tool > Build System > Automatic を選択し、⌘-BでビルドするとMarkedが立ち上がってプレビューしてくれる。ついでに SublimeOnSaveBuild ってパッケージをぶっこんであげると、保存する度にプレビューが更新されるて便利だよ(リアルタイムプレビューではないんだけど)。

ところでSublimeTextガシガシ使ってる人は
"trim_trailing_white_space_on_save": true
とかやって行末の余計な空白を自動削除したりしてると思うんだけど、それだとwhitespace使ったMarkDownの改行が使えなくなっちゃうのですね。

その場合は、、、
パッケージが入ってるフォルダにMarkdown.sublime-settingsってファイルを作って、

{
"trim_trailing_white_space_on_save": false
}

って設定を書き込んであげましょう。するとどうでしょう、MarkDown編集時のみ文末空白の自動削除が無効になりますよー。すごい！

これでMOUとかKOBITOとか使ってる人をバカにできますね。

Sublime Text 3 設定

バージョンアップしたのでメモっておく。

{

 //エディタ表示関連
 "color_scheme": "Packages/Railscasts.tmTheme",

 "font_face": "Ricty",
 "font_size": 14.0,
 "font_options":
  [ "no_italic", "no_round" ],
 "line_padding_bottom": 3,
 "line_padding_top": 3,

 "margin": 0,    // Spacing btw gutter & text
 "rulers": [ 80, 100, 120 ],
 "word_wrap": true,
 "highlight_line": true,
 "scroll_past_end": true,
 "draw_white_space": "all", // "none", "all", "selection"

 // エディタ操作関連
 "spell_check": true,
 "indent_to_bracket": true, // Adds whitespace up to first open bracket
 "match_brackets_angle": true,
 "move_to_limit_on_up_down": true,
 "trim_trailing_white_space_on_save": true,
 "tab_completion": true,  // shift+tab for explicit tab


 // UI関連
 "theme": "Soda Dark.sublime-theme",
 "highlight_modified_tabs": true,
 "bold_folder_labels": true,


 // Application Behavior Settings
 "open_files_in_new_window": false,
 "preview_on_click": false,
 "enable_telemetry": false,
 "ignored_packages":
 [
  "Auto Encoding for Ruby",
  "All Autocomplete",
  "Vintage",
  "Ruby on Rails snippets",
  "RubyFormat",
  "LESS",
  "AppleScript",
  "LESS-build"
 ],


 // その他、よくわからんの。
 "build_env": {
  "PATH": "/usr/local/bin:/usr/local/sbin:/usr/local/share:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin"
 },
 "detect_slow_plugins": false,
 "disable_formatted_linebreak": true,
 "vintage_ctrl_keys": false
}

追記：
SublimeCodeIntelを有効にするとなぜかコンテクストメニューが使えなくなるので、Disableした。それと、BracketHighlighterが機能していなかったので、ST3ブランチを入れなおした。

MacBookAir11inchでVisualStudio2012を使う

C#でVisualStudio使わねばならんので、しぶしぶWindows開発環境を準備。
インストール詳細はこちら。

Windows 8 RTM & Visual Studio 2012 インストール方法　〜Mac VirtulBox版〜 - マイクロソフト アカデミック チームブログ - Site Home - MSDN Blogs


そして、以下の2つのコマンドをターミナルで入力し、VirtualBoxとWin8を再起動すると、全画面表示でピッタリサイズが合うように解像度が設定できるよ。

% VBoxManage setextradata global GUI/MaxGuestResolution any

% VBoxManage setextradata "Windows 8 Developer Preview" CustomVideoMode1 1440x900x32

SublimeText2からDashを使う方法

DashというDocumentViewerが非常に便利。
ついでにSublimeTextからショートカットで開けるようにすると、とっても捗るよ。

まずは Package Control から DashDoc というプラグインをインストールして、以下の keybind を設定。

Preferences > Package Settings > DashDoc > Key Bindings – Default にて以下をコメントアウト

[
  // { "keys": ["ctrl+h"], "command": "dash_doc"},
  // { "keys": ["ctrl+alt+h"], "command": "dash_doc",
  //                           "args": { "syntax_sensitive": "true" } }
]

Preferences > Package Settings > DashDoc > Key Bindings – User に以下を追加(末尾に追加する場合は最後の","をつけないようにね)。

{ "keys": ["command+shift+h"], "command": "dash_doc" },
{ "keys": ["command+h"], "command":"dash_doc",
    "args": { "syntax_sensitive": true } },

これで ⌘+h または ⌘+shift+h で一発で Dash が開くよ。
ついでにDashの Preference > General > Window style を "HUD"モードにしておくと、SublimeText をフルスクリーンで使ってる時にも同じ画面上に Dash を表示できて素晴らしい。

以上おしまい。

ref) Dash - Documentation Browser, Snippet Manager - Kapeli http://kapeli.com/dash
ちなみに今、DashのPremiumライセンスが600円の期間限定セール中。

MacのFinderが立ち上がらない時は…

MacでFinderがクラッシュした時、「アプリケーションの強制終了」から「Finder」を選択し「再度開く」とかやってもFinderが立ち上がらないことがたまーにあるよね。
これがまた、ターミナルで killall Finder とかやってもダメだったりするんだよね。

そんな時はターミナルをたちあげてこのおまじないをすると幸せになれますよ。 

/System/Library/CoreServices/Finder.app/Contents/MacOS/Finder &

ちなみに ~/.bash_profile に以下のコードを追加しておくと、いざという時に refinder と打ち込むだけでいいので、更に幸せになれます。

alias refinder="/System/Library/CoreServices/Finder.app/Contents/MacOS/Finder &"

[php] 可変変数

&var = 1;
$var_name = 'var';
echo $$var_name, PHP_EOL;  // 1が出力されるよ

• 動的に参照する変数変えたり、文字列から変数名を組み立てたりに使えるよ。

Packet Tracer on MacOS Mountain Lion

Cisco純正のネットワーク・シミュレータソフト「Packet Tracer」をMacにインストールした。
VirtualBoxとかでもよかったんだけど、できるだけメモリ節約したかったのでPlayOnMacを使用。(Mikuinstallerではうまく動かなかった！)
今のところ全く問題無さそうです。
インストール方法は以下ご参照。

http://adek2kn.com/packet-tracer-on-mac-/
http://www.playonmac.com/en/topic-8823-Cisco_Packet_Tracer_533.html

SublimeText2でCoffeeScript

以下のプラグインをインストール
- CoffeeScript
- CoffeeScriptCompile
- SublimeOnSaveBuild → 保存する度に自動コンパイル

[Java] オーバーライドとオーバーロード

Javaやっててオーバーライドとオーバーロードどっちがどっちだか、いっつもわからなくなるんで備忘メモ。

• オーバーライド：スーパークラスにおいて定義されているインスタンスメソッドを、サブクラス内で再定義すること
• オーバーロード：オーバーロードとは同一クラス内でメソッド名が同一で引数の型、数、並び順が異なるメソッドを複数定義すること

参照：Javaの道：クラス（８．オーバーライドとオーバーロード）

Mountain Lion に Ruby on Rails 環境をセットアップしたメモ

以下のリンクの通りにやればおけー。面倒くさいね。

Ruby on Rails 3.2 を Mac OS X にインストールする手順をかなり丁寧に説明してみました - Ruby on Rails with OIAX
http://www.oiax.jp/rails/zakkan/rails_3_1_installation_on_macosx.html

Reachability：iOSでネット接続を確認する公式ライブラリ

なんか全然うまくいかなくてどつぼにはまってたんだけど、Reachability.mのARCを無効にしたらあっさり解決したのでメモ。PROJECT設定 > TARGETS > Build Phases > Compile Sources > にReachability.mを追加し、オプションに「-fno-objc-arc」を追加。以上。

以下が参考になった。

Reachability：iOSでネット接続を確認する公式ライブラリ
http://labs.torques.jp/2012/03/19/2583/

WiFi接続チェック
http://ken-plus.blogspot.com.au/2012/03/wifi.html

PHPでZIP解凍する

いつのまにかロリポがマルチドメインに対応していたので、サーバーをHetemlからロリポに移行することにしたよ。いくつかWordpressを運用してたので、転送ファイルが大量。ということでSSHでzip圧縮して取り込んだんだけど、行き先のロリポでSSH使えねーじゃん… というわけで、zipファイルをFTPでアップしてから、PHPで解凍してみたら大変調子がよろしかったのでメモしとく。

zipファイルと一緒にこのPHPファイルをアップして、ブラウザでこいつを開くだけ。

<?php

define(ARCHIVE_FILE,'hoge.zip'); // 解凍したいファイル

define(FILE_OPEN_DIR,'.');   // 解凍先のフォルダ



$zip = new ZipArchive();

$zip->open(ARCHIVE_FILE);

$zip->extractTo(FILE_OPEN_DIR);

$zip->close();

unlink(ARCHIVE_FILE);

?>

SublimeText2のショートカットを強化した

マルチレイアウトでファイル間を行ったり来たりしながら作業するときに、グループの切り替えが非常に面倒だったので、このパッケージを追加したら超快適になった。

chrisguilbeau / cg-sublime / changeset / 9d5e18232892 — Bitbucket http://goo.gl/Yk91N

next_groupのショートカットは、Ctrl-Lが空いていたのでそれを設定したのだ。

SublimeText2とTerminal用にRictyフォントをインストールした

まずはFontforgeをインストール

> brew install fontforge

Rictyフォルダを適当に作ってそこにInconsolataフォントを突っ込む

> curl -o inconsolata.otf -LO 'http://levien.com/type/myfonts/Inconsolata.otf'

Migu-1M フォントも突っ込む

> curl -o migu-1m.zip -LO 'http://sourceforge.jp/frs/redir.php?m=jaist&f=%2Fmix-mplus-ipa%2F56156%2Fmigu-1m-20120411-2.zip'

Miguはzipなので解凍

> unzip migu-1m.zip

Rictyを生成する

> sh ricty_generator.sh inconsolata.otf migu-1m-20120411-2/migu-1m-regular.ttf migu-1m-20120411-2/migu-1m-bold.ttf

出来上がったフォントをFontBookに突っ込んで、terminal/sublで設定する。
ちなみにSublime TextはPreference > Settings - Userに次の一行を追加。

"font_face": "Ricty",

以上おしまい。