scssとかのコンパイルにはkoalaがいい感じな件

最近はめっきり、scssを使ってcssを書く事が増えています。
特に、css spriteなんかは、compassの機能で画像まで吐き出してもらうようになって、かなり効率が良くなっています。
って使っていると言ってもそれくらいなんですが、それでもこういったメタ言語をつかうときコンパイルという処理が必要なことには変わりありません。

僕みたいなライトユーザーにとっては、「無料or低価格で、最低限の処理を楽にできる」というのが必須条件になるわけであります。

勉強を始めた当初は、scoutを使っていましたが、案件ごとに設定をするのがめんどうで・・・
いや、シンプルで使いやすかったんですけどね。

そこに登場したのがkoala
windows、macでも使えて、設定も超楽チン。
アプリを立ち上げて、プロジェクトのフォルダをドラック&ドロップするだけ。
koala02

フォルダ構成を自動で判別して、設定してくれます。
koala03

直感的というか、プロジェクトをセットするだけであとは何もしなくていいくらいです。この使ってる感ゼロの感じ素敵です。
compassにも対応してますし、僕は使っていませんが、CoffeeScriptにも対応しています。
立ち上げておけば、自動でコンパイルもしてくれるし、ファイル毎に書き出しの形式を設定できたり、エラーがあればアラートしてくれます。

Sublime Text2でもできますが、しばらくはこれを使いそうです。

それしても、web系のツールって、動物をモチーフにしたものが多いっすね。

TinyPNGはパンダだし、
SpriteCowはうしだし、
Koalaはコアラだし。

次はペライチサイト簡単作成ツールで、KIRINとかでるとか、でないとか。

データをサルベージしたり、ブログを再開したりの話

長らくブログの更新をしておりませんでした。
実は、ちょっと前に問題になったword pressの不法アクセス、僕のブログも被害に遭っておりまして、データが改ざんされた形跡があり、サーバー会社からアクセスが止められておりまして・・・
情けない。

データをあきらめてリスタートするか、どうするかというとこでしたが、幸いデータベースにはアクセスできましたし、FTPも生きていたので、その辺から復旧をしていた訳です。

ちょうどいい機会ですので、どうやって復旧したかレポートしたいと思います。

データベースからのデータ吸い出し

wpのコントロールパネルにアクセスできれば、簡単にデータの吸い出しができるのですが、今回はそれは不可でしたので、データベースからエントリー情報などを吸い出す事にしました。

データベースの管理画面にアクセスして、データをエクスポートします。その辺の詳細は、色々なブログでご紹介いただいておりますので、説明は割愛します。

word pressのセットアップ

既存のword pressがアクセスできない訳ですので、別のword pressを立ち上げてそこにデータを移管する形をとりました。
幸い僕が使っているさくらサーバーはデータベースを複数立ち上げられましたので、ディレクトリは違ってしまいますが、同時進行で2つのword pressを走らせて移管できました。

データの移管

ここが一番はまりました・・・
word pressのセットアップが終わった段階で、データベースの管理画面から事前に取り出しておいたデータをインポートする訳ですが、なかなかうまくいきません。

結論から言うと、データベースのテーブルの接頭語が違っていて、うまくインポートできなかったみたいです。
凡ミスです。

そこには比較的早く気付いたので、データベース全体をインポートするのではなく、エントリー情報などのテーブル毎にインポートしてみましたが、ダメでした。

ならば、wpのセットアップ時に接頭語を既存のものに合わせてみたらどうか・・・これもダメでした。この場合、word press自体がエラーになってしまったので、もしかしたら、やり方が悪かったのかもしれません。

うまくいった方法

データベース全体をインポート

現word pressの該当テーブルを削除

上書きしたいテーブルをリネームする

というちょっと回りくどい方法でうまくいきました。
How toのみのご紹介で申し訳ないですが、理由はわかりません。

ここで注意点としては、
プラグインなどで使う特別なテーブルはそのプラグインがインストールされていない状態でコピーしてしまうとword press側でエラーになってしまいました。

word pressをインストールするディレクトリが違う場合、データベースから復元したエントリーの画像パスなどは、過去のディレクトリを指していますので、事前にパスを書き換える必要がありますし、そもそも、画像データはデータベースから復元できませんので、別途FTPなどで拾っておく必要があります。

SNSへの投稿情報や、Facebook経由のコメントなども復元はできないと思います。(きちんと確認してませんが、諦めた方がいいと思います。きっと)

まとめというか教訓

セキュリティ対策は他人事じゃないよ。

そもそも、自分のセキュリティ管理が甘すぎたためにこんな面倒なことに巻き込まれてしまいました。それこそが、最大の反省点です。
・・・というか、自分のサイトで本当によかった。これがクライアントのサイトだったら・・・想像したくないです。

ブログを使っている以上、フロントエンドだけではだめ。

がっつりサーバーサイドの事を勉強する必要はないですが、最低限データベースの知識とか、セキュリティのこととか知っておかないともしもの時にかなり困ってしまうと実感できました。

ブログを書く事はやっぱり必要だった。

癖かもしれませんが、ブログにあれこれ書く事で勉強になるだけじゃなく、精神的にもバランスが取れていたように感じます。ブログをかけなかった期間は少し悶々としていました。(仕事も忙しかったのであれですけど)

情報のアーカイブとしても、何気に役立っていた。

こんなブログでも、僕的には情報のアーカイブとして役立っていたと実感できました。仕事中に行き詰まって、ブログを見返したい時にアクセスできなかった時の絶望感といったら・・・チーン。

そんな訳で、約1ヶ月半のブログ停止は色々な教訓を僕にもたらしてくれました。これで、リスタートです。
頻度よく更新していきますので、お楽しみに。

ショッカーに学ぶリーダー論

ちょっとあれな感じですが、面白かったのでシェアします。

ちょっとショッカーに就職したくなったかも。1日3回も死ぬのはいやだけど。
ってか、ショッカーが出世すると怪人になるのね。知らなかった。

作業効率を10%アップも夢じゃない。chromeアプリ『Facebook Nanny』のご紹介

僕的にかなりはまったのでご紹介します。
作業効率を高めてくれるであろうchromeアプリ『Facebook Nanny

しっかりとログを取っていないので正確な情報はありませんが、作業中のSNSからのダラダラタイム多くありませんか?
僕は多いです。やばいです。
大した情報収集をしているわけでもないし、というか、facebookからさほど必要のない情報を拾って、ブログ→webサイトを転々として・・・
気付はば、もうこんな時間 なんてことありますよね。

そう、仕事中のSNSは危険なんです。
でもやめられない。なんて中毒性が高いのだ。

という訳で、このアプリの登場です。

アプリの仕様はすごく簡単で、facebookにアクセスすると15秒だけ閲覧できます。その後は…

こんな素敵なメッセージと共にブラックアウトしてしまいます。
Facebook

素晴らしい、強制力。
はい、塩原、ちゃんと仕事しますよ。
ドMな僕は、chormeちゃんに怒られて、快感を感じてしまったり。もっと言って
・・・これくらいじゃないとだめなんです。きっと。

このアプリを導入して作業効率が10%アップしたとかしないとか。

そんな作業効率を高めてくれるであろうchromeアプリ『Facebook Nanny』のご紹介でした。

googleマップが新しくなりました

先日のGoogle I/O 2013でgoogleマップが発表されました。現段階では新UIを使うにはリクエストをして、認可されるまでできません。
というわけで、やっと新UIの承認が来ましたので、さっそく試してみました。

大きく変わったところは、ほぼフルスクリーンがデフォルトになって、左側にあった情報パネル(検索とかも)がすごくスマートになって、地図の上に表示されています。
あと、縮尺のコントローラーとストリートビューの切り替えが左下に移動しました。
全体的に地図を見せることに特化した作りになっているようですね。

実際に使ってみると、挙動も早く(ズームとか)地図を見るという事に関して言えば、すごく良くなったと思います。
地図を見るということに関して言えばです。

僕的には、googleマップで場所を確認するということもよく使いますが、それ以上にweb制作時に座標を確認したり、
埋め込み用のgoogleマップを生成したりという使い方の方が多かったりします。
で、この新しいUIはその辺がばさっとなくなっているようです。(詳しく調べるとあるかもしれませんが)

困ります。非常に困ります。

メールに地図を貼り付ける時に、短縮URLが使えないじゃないですか!
java scriptでgoogle mapを使う時に座標軸はどうやって調べますか?
java scpiptで埋め込むのが面倒な時に便利だったマイプレイス機能はどこにいったんですか?

というわけで、新しいgoogleマップすごくいいと思うのですが、暫くの間は前のバージョンを使うことになりそうです。

モバイル決済乱立の巻

ここ数日の間で、スマホを使ったモバイル決済のサービスがいくつかスタートしています。
Square

Coiney

どちらもiphoneなどのスマホに専用のカードリーダーを付けて、カード決済をしてもらうというものです。
実店舗でのカード決済導入に使うものですね。

さっそく、他のサービスも含め料金などを比較している方がいました。
キャズムを超えろ!|初期費用ゼロ、手数料最安、支払い最速!モバイル決済の本命Squareと、Coiney, PayPal here, 楽天スマートペイとの比較表を作ってみた

僕の実務としては、ほとんど提案する機会がないかと思いますが・・・
カード決済の導入って、審査とか大変で小規模店舗だとなかなか導入できないと聞いています。
モバイル端末を使って今まで出来なかったようなことが実現されてくるとワクワクしますね。

これからもっともっと色んなサービスが増えてくると思うと楽しみ過ぎます。
自分もそうゆうサービス提供者になれるように・・・がんばります!

最近使っているアプリやらウェブサービスをまとめ

ライフハックというわけではないのですが、最近良く使っているツールをご紹介します。

チャットワーク


最近にやっと少し使えるようになってきました。
言わずと知れた、ビジネスチャットです。
一度慣れてしまうと、メールが面倒くさくなります。

初対面の人は別として、仕事上の付き合いがある人との連絡は、余計な常套句を省いてもいいと思います。
それをメールでやると、ちょっとビジネスマン的にあれなんですが、「チャット」であれば許されるんじゃないかと。

メールは本当に届いているか不安ですしね。
社内の連絡やメンバー間での情報共有にはすごく便利だと思います。

チャットワーク - iPhone/iPad版 - ChatWork Inc.

って、それほど使いこなしていないのですが・・・

Any.DO


iOSのtodo管理アプリです。clear的な操作感と超シンプルなUIが気に入っていて使い始めました。
電話帳と同期してくれるので、○○さんに電話とタスクを入れると、このアプリから電話がかけられたりします。
また、chromeとも同期できるので、パソコンからtodoを管理することも可能です。
もちろん、アラート機能もついています。

感覚的には、iOSアプリのclearみたいな感じでしょうか。
clearほど斬新ではないけど、割りと似た使い勝手で一般的なtodoアプリの機能も兼ね備えているので使いやすいです。
また、chromeの場合、Gmailとも連携してくれるので、メールの閲覧画面から直接Any.DOへ投稿ができたり、そのTodoからメールを参照することもできます。
これは、かなりいい感じ。

個人的かつ短期的なタスクとかはここに入れるようにしています。

タスクの時間設定も「今日」「明日」「近日中」とかざっくりしてていいです。

Any.DO To-do list - Any.DO

Pocket

いわゆるソーシャルブックマークです。
以前は、evernoteに入れてたり、もっと前は、今はなきdeliciousを使ってたりと、迷走中だったブックマークですが、最近はもっぱらpocketです。
使いやすいかどうかは別として、一番はchromeのプラグインで一発でブックマークできることですかね。

整理ができない人間なんで、特にタグ付けせずにポンポン入れるだけですが、こうゆうinbox的なものがないとかなり困ります。
ブックマーク系は、一度ここに収納して、制作のツール系は精査していいものはchromeのブックマークへ入れたり(会社と自宅は同期してあります)、ブログのネタとしてevernoteへ入れたり、読む系の記事はiphoneで処理したりという感じです。

個人的には、もう少しiphoneのアプリから共有が簡単にできるといいんですけど・・・

Pocket (Formerly Read It Later) - Idea Shower

CloudMagic

これも最近入れたアプリです。
メールや、連絡先、SNSなどを横断検索できるアプリです。
メールは基本的にGmailアプリを使っているのですが、これ何気に検索がいまいちです。
昔もらったあのメールにアクセスするときは、CloudMagicの方が断然楽です。
CloudMagic - CloudMagic

と、羅列してみました。
仕事はあまり早くないのですが、こうの手の話題は大好物です。うまく効率化して、生産性を高めていきたいですね。

EC-CUBEで会員登録させない方法

もう扱うこともないかもしれないですが、備忘録として・・・

EC-CUBEは、このブログでも何度か取り上げている純国産のオープンソースECサイト作成CMSです。
賛否はあるにせよ、自由にカスタマイズできて、無料で使えるので、お使いの方も多いのではないかと思います。
で、そんなEC-CUBEですが、デフォルトでは、PCで表示すると会員登録画面が必ず表示されてしまいます。また、モバイルページに至っては、会員登録をしないと購入できないという仕様になっています。

利用用途によっては、会員登録させたくないという場合もありますので、その方法をご紹介します。

ちなみに今回のバージョンは2.11.4です。

PCの購入ページ

data/class/pages/shopping/LC_Page_Shopping.php

これのファイルは、会員登録しない場合の画面を制御するファイルです。
この中盤あたりに、
actionという関数が用意されています。詳しくわかりませんが、どうやらここで
購入ボタンを押したあとの挙動を判定しているようです。

        // お客様情報入力ページの表示
        case 'nonmember':
            $this->tpl_mainpage = $nonmember_mainpage;
            $this->tpl_title = $nonmember_title;
            $this->lfInitParam($objFormParam);

nonmemberという状態の時に個人情報を入力するページを表示させているようですので、
デフォルト状態でも同じ挙動にさせるために
このdefault:をごっそり

         $this->tpl_mainpage = $nonmember_mainpage;
         $this->tpl_title = $nonmember_title;
         $this->lfInitParam($objFormParam);

と書換えます。

あとは、テンプレート側で、会員登録やログインなどの表示を消してあげます。
(これが地味にめんどくさいです)

モバイルページ

data/Smarty/templates/moblime/shopping/index.tpl
デフォルトでは、会員登録や、ログインの記述がありますので、そこをごっそり消して、

購入手続き

<form name="member_form" id="member_form" method="post" action="./index.php">
<input type="hidden" name="mode" value="nonmember" />
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<div align="center"><input type="submit" value="購入手続きへ" name="buystep" id="buystep"></div><br>
</form>

このようにします。

次に、
data/Smarty/templates/moblime/shopping/nomember_input.tpl
というファイルを新規で作成します。
これは、先にPC版で修正したファイルと同じようなものですが、購入者の情報などを入力させるためのコードが必要になります。
PC版か、スマフォの同名のファイルをコピーして、不要な部分を削除すればよいかと思います。

以上です。
こういったカスタマイズが自由にできるのは魅力ですが、あまり深入りしてしまうと、バージョンアップした時に動かなくなったり・・・と心配もあります。
・・・いづれにしても上記の方法で実装可能でした。やるやらないは、個人のご判断で。

■参考
KH-WEBLOG 携帯サイトでも会員登録しないで購入できるようにする:EC-CUBE2.11.1