読者です 読者をやめる 読者になる 読者になる

しぃぶろぐ。

仕事とか技術関係のこと。

結局S11に開発環境を構築するの巻

諸事情とかいろいろあって、最小構成で行くつもりだったS11さんに、開発環境を構築することにしました。

これで文句ない動作してくれるなら、今のメイン機の立場がないかもしれない…。

目指せphpStorm+Vagrant

せっかく課金してまで使っているので、IDEはPHPStormさんをインストール。

OracleVirtualBoxとVagrantもダウンロード→インストール。

念のため、コマンドプロンプト

vagrant -v
Vagrant 1.8.1

をして確かめる。(バージョン番号は2016/02/03現在)

CPUの仮想化設定をenableにするため、BIOS設定を開く。

  1. 完全シャットダウン(Shift押しながらシャットダウン)
  2. F3またはF4を押しながら起動
  3. BIOS設定を選択(マウスでできる)
  4. AdvancedSettingを選ぶ(マウスで)
  5. 右側からIntelVertualなんとかが多分Disabledになっているので、enabledに変更する
  6. saveしてWindowsを起動

注意するのは、他のパソコンのようにロゴ画面で連打ではなく「キーを押しながら電源ON」の部分。ここでちょっとハマった。。。

今回は(いろいろやったけどうまくいかなくて最終的にScotch Box 2.0を入れました。 詳しくは http://qiita.com/naru0504/items/560a150943d2251e1ae8

で、そのためにGitをインストール。

以降は本家サイトの手順をなぞります。 GitのコンソールからGit cloneしました。

cloneしたディレクトリをphpstormのプロジェクトディレクトリにします。

(多分。このへん順番が前後しているのですが、最終的にはプロジェクトのディレクトリ=git cloneしたディレクトリでうまくいきました)

phpstormのTools>Vagrant>Up

正常終了したら、デフォルトだとpublic/がドキュメントルートで、http://192.168.33.10 で接続できます。

とここまで来て何ですが、 このプロジェクトのソースを別gitとか別SVNで管理することを考えるとややこしいような。

わざわざプロジェクト内にvagantしないでも、 コンソール(Alt+9)からVargant sshすればいいんじゃない…?

というわけで、今晩にでも作りなおしてきます…。

VaioS11買いました

以前の記事でも書きましたが、準メイン機が大きすぎた上に壊れかけていたので、小さいパソコンが欲しかったのです。

shiranuik.hatenablog.jp

ソニーショップでポチしてから待つこと数週間。 ようやく手元に届きました!

ハードウェア構成

  • intelCore i5 6200
  • メモリ4G
  • SSD 128G
  • 11インチディスプレイ(光沢なし・タッチパネルなし)
  • LTEモデル
    • So-netのPLAYSim付(初期費用無料キャンペーン)
  • 色は白!  正直白にしたかったからi5のメモリ4Gにしました(げふn

ソフトウェア

  • OS:Windows10Home
  • Officeなし

開封後真っ先にやったこと

開封後真っ先に電源ONしました。 Windowsの初期セットアップを行います。 この辺りはすでに何回かやっているので、そう苦労することもなく終了。 次にWindowsUpdateです。 Windows10が初期状態だったようで、コルタナさんも使えない状態でした。 WindowsUpdateは結構時間がかかりました。ひたすら待ちます。 Updateが終わったところで、自分仕様にするべくソフトをインストールしていきます。 今回S11に追加でインストールしたのは以下のソフト。 コンセプトとしては「気持よく操作できる範囲での最小構成」です。

 他のパソコンで使っているhotkeyだと、割当ができないって言われるので、とりあえずWin+Rを上書きする設定をつけています。

 買ってすぐにソースの修正が必要だったので、とりあえずSublimeさんにしました。が、テキストエディタは何にするか悩み中です。

  • Rlogin:ターミナルソフト

 これも修正が必要だったので入れました。ファイル転送も一応こなしてくれるので便利です。

  • kobito:マークダウン対応エディタ

 試しに入れてみたらすんごい綺麗でさくさくで感動しています。これを機にQiitaのロム専もやめようかな…。

外に持ち出そう!

今回せっかくLTEモデルにしたので、早速外で作業してみました。(昨日の投稿は外で書きました。) 電池持ちはすごく良いです。 家で1、2時間使ったあとでそのまま持ちだしたんですが、充電場所探す必要ありませんでした。2~3時間作業しても余裕。今朝さらに(スピーカーから音楽流しながら)2時間くらい作業してようやくバッテリー警告が出ました。

simはキャンペーンでくれたものをそのまま利用。とりあえず安いプランでやっています。必要なときに繋がるのはストレスフリーですね。 今のところは必要な時以外はオフにしています。

APNの設定

今回初めてAPNの設定をしてみました。

Windows10のAPN設定は、Windowsキー>設定>ネットワークとインターネットまで行き、 左のリストの中「携帯電話」>+で追加するか編集するかしてください。

PLAYSimでは、APNの設定後、説明書内のURLに接続するとプランを選んで契約の流れでした。 どれでも同じなのかな?

総評

小さいわりにキーボード入力がぬるさくストレスフリーです!

キーは小さめですが、隙間があいているので、指が縮こまることもないです。むしろ私にはキーボードの端から端まで届くので打ちやすい(笑 キーストロークもあるので、指が痛くもならないし、打鍵音がしないので周囲を気にせず作業できます。 タッチパッドが反応していらっとすることもほぼなしです。

しいて言うなら、そのタッチパッドの操作方法には癖があるので、慣れが必要そうです。慣れの問題だし、どうしてもアレだったらマウスつければいいだけなので、気にしていません。そもそもキーボード操作するからあんまり使わないし。

本体が熱くなっている印象はありませんが、今日触ったら充電アダプタがだいぶ発熱していました。充電用USB口がついていてお気に入りだったんですが、まぁ、本体とは離しておけるし、しょうがないかなと。

今回は「モバイル用ビジネスPC(小さい)」が欲しかったので、ガッツリS11のコンセプトと合致しました。 他の用途で使うとなると、また別の選択肢がでてくると思います。 このS11でIDE使ってデバッグ実行とか考えたくないので、メインには向きませんしね…。(そういう作業が必要なときはリモデするか、潔くメインPC+大型モニタ使います)

結論としては、買ってよかったの一言につきます!わーい!!

evernote+Marxicoのメモを共有するときは注意が必要

昨日の夜Vaioが届きました!

今、外のかっふぇーで書いてます。

LTEいえーい。

 

vaioさんに関しては別エントリにまとめます。

 

今日の本題は、

Marxicoで書いたメモを共有するときは注意!

ということです。

 

職場でチームメンバとevernoteのノートブックごと共有して、お互いに編集しているのですが。

Marxicoで書いたノートはMarxicoでしか編集できないようになっているんですよ!

あの赤いリボンによって!!!

別ノート用意して内容を(気を付けて)コピペして、通常のノートと同じようになりました。

 

個人のメモとるには便利なんですが…こまったなぁ、と。

閲覧のみさせたいメモの共有ならいいのかな?

 

とりあえず、使用する際は注意しましょう>自分。

 

 

ところで、VaioS11さんは、サイズのわりに打ちやすいキーボードですね。

キーとキーの隙間がしっかりあいているので、ミスタッチしにくいです。

タッチパッドも誤作動しないです。

打ち込み気持ちいいのはすんごくありがたい!

買ってよかったーーーー!

Evernote+Marxicoではてなに投稿してみる

普段ブログネタをEvernoteでスクラップして、はてなでまとめ直して→公開の流れで投稿しています。

Backlog使っているのもあって、Markdownでメモしてそのまま投稿ができたらなーと思っておりました。

そしたら、実ははてなってEvernote貼りつけができたんですね!画期的! evernoteで書いたものそのまま貼れるなら、EvernoteをMarkdownで書けばいいじゃない!

ということで、とりあえずMarxicoをインストールしてみました。

Markdownとは

「記法」です。テキストファイルでメモをとっていた方なら馴染みやすいと思います。*で箇条書きすると、自動的に箇条書きのタグに変換してくれます。

詳しくは こちらを 見てください。

Marxicoとは

markdownに対応したエディタです。
画面が2分割されて、片方にmarkdown記法で入力すると、もう片方にプレビューが表示されます。
evernoteと連携すると、Marxicoで書いた内容はevernoteに保存できます。
詳しい説明はグーグル先生に聞くか、こちらを見てください。
http://ht79.info/2014/12/23/evernote-heading-structure-app-marxico/
Chromeアプリです。
ダウンロード&インストールはここ

今回はじめて使ってみましたが、割とさくさくです。
違和感ないですね。
echo "hellow world!"; とか

1.
2. echo "hellow world!";
3.?>

な感じでコードもハイライトしてくれるらしい。

こんな感じで引用も見やすい。

なんて素敵。

私的高ポイントはエディタの色味をテーマで変更できるところですね。
フォントも変えられるし素敵素敵。

ダウンロードして投稿までの流れ

簡単です。

  1. 事前準備
    • Marxicoをダウンロード
    • Evernote連携の設定
    • おこのみで色とかフォントとか設定
  2. とりあえず新しいドキュメントを開いてみる
  3. 即時プレビューで確認ながらかくφ(..)
  4. 書き終わったらctrl+Sで保存(=Evernoteと同期)
  5. おもむろにはてなの投稿画面を開く!
  6. evernote貼り付けから書いた内容を選択して貼り付け!
  7. 公開!

気をつける点があるとすれば、はてな投稿時は「みたまま」にしましょう。
evernote保管時にmarkdown記法→リッチテキスト(フォントが大きくなったり太字になったり箇条書きになってたりする形式。)に変換されています。
なので、「みたまま」でないと見たまま(プレビューした状態)で投稿されません。

はてな投稿別にして、
Evernoteのエディタとしてもいいですねぇ。

※投稿時に追記。

見たまま投稿→貼り付けると、右上にリボンが表示されます。
エディタへのリンクなのですが、気になるからHTML編集で削除したほうがいいかも。

職場と家での開発(ハード的な)環境

年が明けてます。

結構経ちましたが、お元気ですか?

私は昨日の大雪騒動でへとへとです。

 

最近の開発環境+あるふぁについてまとめておきます。

あるふぁってひらがなだとちからがぬけますね。

 

@職場

古(くもないけど型落ちていた)Let'sNoteから変わりまして、

Thinkpadになりました。

赤ポチ大好きです!!!が、通常入力は東プレの外付けキーボードなのであまり出番がありません。

軽くて薄くてメモリが20Gもあります。

仮想環境だってさくさくだもんね!ぜんぜん使ってないけど!!!

ちょっと、この辺りは近いうちにどうにかしたいです。

xamppだと激重なので、vargrantにしてみたい…。

↓まとめ。

 

  • PC(Thinkpad
  • CPU:i75600
  • メモリ20G
  • SSD
  • IDE:phpstorm(便利です
  • rlogin
  • mysqlWorkbench
  • Boostnote(入れてみました。記法覚えたい…)
  • evernote
  • executer
  • clcl
  • 他いろいろ

 

@家

家ではデスクトップのメイン機が1台。

そこにリモートデスクトップして開発する端末として、

リビングPC1台、旧メインのノートパソコンが1台あります。

開発部屋が寒いので、最近は暖房の効いたリビングか寝室でお布団に入ってカチャカチャやっています。

メイン機

cpu:i7(世代忘れた…

メモリ:8G

リビングPC

以前紹介したECSLIVAのWin8モデルです。

shiranuik.hatenablog.jp

自力で無事にWin10にアップグレードしました。

(アップグレード前に処理が必要です。気になる方はこちらを見てください)

chromeとかいろいろ入れてましたが、一旦削除しないとアプデ用領域確保できませんでした。

最近はamazonプライムビデオのおかげで、主な用途は

息子たちがテレビでドラえもんを見る

になっております。

amazonさん、ありがとうございます。

ノートパソコン(たしかFaith製

cpu:i7(これも世代忘れた…

メモリ:たぶん4Gくらい…?

旧メインなのでstormさんとかいろいろ入っていますが、今はもう使っていません。

リモデ専用機になっています。

 

最後の旧メイン機に、モニタの接触不良がおこりはじめております(がくぶる

それ以前にでっかいノートパソコンを(家の中だけでも)持ち歩くのが面倒になってきました。

な・の・で!

新しい小型ノートパソコン買っちゃいましたw

vaio.com

えへww

小さくて軽いは正義です。

来週末に届く予定なので、現在首をながーーーーーーーくして待っています。

XAMPP環境でmysqldumpslowをする。

年の瀬ですね。

私も今日で仕事納めです。

 

気づいたら8月末頃から4ヶ月もあいてしまいました。

基本的にネタが微妙で出せなかったせいです。

日常小ネタだけでも出しときゃよかったかなー。

 

本題です。

今日のネタはMySQLの分析ですよー。

 

本番DBのデータ量が増えてきたせいで、パフォーマンスがおちるわロック待ちtimeoutするわで大問題中。

そのため、まあまずはスロークエリでも分析すっかね、と思ったところ。

本番DBでmysqldumpslowしても、そんなコマンドないよ!って怒られてしまいました。

あれー?と思いつつ、じゃぁ本番鯖でやるのも何だしローカルでやるかねと思って落としてきてコマンドプロンプトでmysqldumpslowしてみたら、

やっぱりそんなコマンドないよ!って怒られました。

おこっちゃいやん。

 

世の方々は「Mysqlが入ってるLinuxならふつーに使えるYO」みたいなこと書いてるのになんでぇぇぇええええ。

と、小一時間悩んでしまいました。

結論を申しますと。

mysqldumpslowは.plファイルでした。

perlにパスを通していない(他もいろいろ)ので実行できませんでしたよ。

ということ…なんてこと…。

 

Windows環境変数増やしたくないので、以下のように実行しましたよ。

フォルダ構成
C:\
 ├work
 │├ slow.log(mysqlで出しておいたスロークエリログ※本番のもの)
 │└ analytics.log(分析後のファイル)←これを生成したい
 └xampp
    ├perl
    │└bin
    │  └perl.exe
    └mysql
        └bin
            └mysqldumpslow.pl (←実行したい)
 
コマンド
C:\xampp\perl\bin>perl -f c:\xampp\mysql\bin\mysqldumpslow.pl -s l c:\work\slow.
log > c:\work\analytics.log
 
わかってしまえばなんだぁな結果でしたとさ。
 
 
ちゃんちゃん。

ブラウザの戻るボタンを押すと<select>の選択がおかしくなるのをjQueryで解決

まず大前提としてフォームのある画面では「ブラウザの戻るボタン」は極力押さないでいただきたい!

…のではありますが、まぁ、あれば押すのが人情ですよね。

今回はブラウザの戻るボタンを押して戻ったら、表示されているデータとフォームの選択値がずれちゃった、を解決する話です。

気づいたきっかけ

お客様からの指摘ですorz

普段自分が開発しているサイトではもちろん、ブラウザの戻るボタンなんて押さないので、気づかなかったですよ。

指摘のあったサイトは、検索フォームと結果データが一緒の画面なので発覚。

症状

初期表示(デフォルト検索結果含む):A→選択を変更して検索⇒結果表示:B→ブラウザの戻るボタン

の一連の処理を行うと、最後の画面が以下のようになります。

  • 結果表示⇒A
  • ソース上のフォーム選択状態⇒A
  • 画面上のフォーム選択状態⇒B

おそらく、妙な具合にキャッシュされちゃっているんだと思われます。

グーグル先生に聞いてみた

ら、解決策は「戻る使うな」という至極ごもっともな結果に。

それでも頑張る先人たちの足跡をたどるに、以下の点がポイントっぽい。

  • フォームキャッシュの削除
  • ブラウザによって削除され方に違いがある。
  • onloadとonunload=""を仕込めば、全ブラウザでフォームキャッシュが削除される
  • defaultSelectead と selected
  • form.reset() の方法⇒コレは使えなかった
  • defaultSelected==trueのoptionにselectedを付け直す(ループが必要)

最終的にこうなった

jQueryでブラウザ戻るボタンによるフォームずれ対応

 結果的には3行ですが、そこに至るまでの道のりが…長かった…。

defaultSelectedとselectedの違いとか、

option[selected]とoption:selected の違いも知らなかったです。

参照:

ブラウザの戻るボタンで戻ったときに呼ばれるイベントとかキャッシュとかそこらへんのこと - koumiyaの日記

jquery - Find default selected option in HTML select tag? - Stack Overflow (英語注意:真ん中のあたり)