ブログ

  • ベーシック認証のかかったディレクトリ以下に、ベーシック認証のかからないディレクトリを作成する方法。

    ※ いつの間にか記事が消えていたので再掲。

    毎回毎回記憶から抜けてて、その都度調べているので覚え書き。
    .htaccessに以下の記述でOK。

    Satisfy any
    order allow,deny
    allow from all
  • Backlog→Hubot→Slack通知のCoffeeScript

    そろそろslackも活用せないかんなぁと思って、いろいろゴニョゴニョやってみて、結構な活用方法やノウハウがネット上に転がってます。

    んで、Backlog→Slackへの通知(bot)に関する情報となると、なぜかミニマムな情報しかない。
    (課題の追加・編集だけを通知、みたいな?)

    http://d.hatena.ne.jp/itog/20150226/1424939686あたりを参考にさせていただき、通知内容を充実させてスクリプトを晒してみる。

    課題関連やWiki関連、git関連の通知フォーマットがまったく異なるので、そのフォーマットにあわせてslackに吐き出す部分の追記・修正が主なところ。ご参考になれば。

    ※HubotやらHerokuについての情報はGoogle先生に聞いてみてください

    backlogUrl = 'https://<BacklogのスペースID>.backlog.jp/'
    
    module.exports = (robot) ->
      robot.router.post "/<任意の文字列>/:room", (req, res) ->
        { room } = req.params
        { body } = req
        try
          switch body.type
            when 1
              msg  = "*Backlog [#{body.project.projectKey}-#{body.content.key_id}] #{body.content.summary} _by #{body.createdUser.name}_*\n"
              msg += "課題が追加されました\n";
              msg += "#{backlogUrl}view/#{body.project.projectKey}-#{body.content.key_id}"
              msg += ">>> #{body.content.comment.content}\n"
            when 2, 3
              msg  = "*Backlog [#{body.project.projectKey}-#{body.content.key_id}] #{body.content.summary} _by #{body.createdUser.name}_*\n"
              msg += "課題が更新されました\n";
              msg += "#{backlogUrl}view/#{body.project.projectKey}-#{body.content.key_id}#comment-#{body.content.comment.id}"
              msg += ">>> #{body.content.comment.content}\n"
            when 5
              msg  = "*Backlog [#{body.project.projectKey}] #{body.content.name} _by #{body.createdUser.name}_*\n"
              msg += "Wikiページが登録されました\n";
              msg += "#{backlogUrl}wiki/#{body.project.projectKey}/#{body.content.name}\n"
              msg += ">>> #{body.content.content}\n"
            when 6
              msg  = "*Backlog [#{body.project.projectKey}] #{body.content.name} _by #{body.createdUser.name}_*\n"
              msg += "Wikiページが更新されました\n";
              msg += "#{backlogUrl}wiki/#{body.project.projectKey}/#{body.content.name}\n"
              msg += ">>> #{body.content.content}\n"
            when 8
              msg  = "*Backlog [#{body.project.projectKey}] #{body.content.dir}#{body.content.name} _by #{body.createdUser.name}_*\n"
              msg += "共有ファイルが追加されました\n";
              msg += "#{backlogUrl}file/#{body.project.projectKey}#{body.content.dir}#{body.content.name}\n";
            when 9
              msg  = "*Backlog [#{body.project.projectKey}] #{body.content.dir}#{body.content.name} _by #{body.createdUser.name}_*\n"
              msg += "共有ファイルが更新されました\n";
              msg += "#{backlogUrl}file/#{body.project.projectKey}#{body.content.dir}#{body.content.name}\n";
            when 12
              ref = body.content.ref.split("/").pop()
              msg  = "*Backlog [#{body.project.projectKey}] #{body.content.revisions[0].comment} _by #{body.createdUser.name}_*\n"
              msg += "GIT リポジトリ#{body.content.repository.name} の #{ref}にプッシュされました\n";
              msg += "#{backlogUrl}git/#{body.project.projectKey}/#{body.content.repository.name}/#{body.content.revision_type}/#{body.content.revisions[0].rev}";
            when 14
              msg  = "*Backlog [#{body.project.projectKey}] 課題をまとめて操作 _by #{body.createdUser.name}_*\n"
              msg += "課題がまとめて更新されました\n";
              msg += ">>> "
              for link in body.content.link
                msg += "[#{body.project.projectKey}-#{link.key_id}] #{link.title}\n"
                msg += "#{backlogUrl}view/#{body.project.projectKey}-#{link.key_id}\n\n"
            else
              # 上記以外はスルー
              return
    
          # Slack に投稿
          if msg?
            robot.messageRoom room, msg
            res.end "OK"
          else
            robot.messageRoom room, "Backlog integration error."
            res.end "Error"
        catch error
          robot.send
          res.end "Error"
  • 画像をスクエアにトリミングしてサムネイル表示!的な超シンプルjQuery Pluginを書いてみた。

    画像をスクエアにトリミングしてサムネイル表示!的な超シンプルjQuery Pluginを書いてみた。

    CMSから画像を登録して、表示するときには正方形にトリミングされたサムネイルを表示したい!というのがよくある相談です。
    WordPressなんかだと、WordPress自体がPHPで物理的にサムネイル画像を作成するので問題ないんですが、オリジナルのCMSとか静的HTMLサイトとか、外部(FlickrとかTumblrなど)のサービスから画像だけを転載する場合なども、表示上だけ正方形で表示したい!なんて言われて面倒なんですよね。
    既存のjQuery Pluginなども調べてみたけど、結構コッテリ(多機能)なPluginが無い。(検索能力が無いだけの可能性もある)

    なので、アッサリ・サッパリ系のPluginを作ってみたわけです。

    github: jquery.imgFitter.js
    demo: jquery.imgFitter.js

    動きとしては、
    ・IMGタグのSRCの画像を、CSSで背景画像に指定して、background-size: coverに設定。
    みたいな感じ。ただそんだけ。

    WordPressも超便利になってきた反面、システムとしてのボリュームがコッテリしてる。
    PHPのフレームワークもそう。いろいろ肥大化してる。
    だからマイクロフレームワークなんて言葉も出てくる。

    マイクロ。この言葉、響き、結構好き。

    ちょっと仕事が一段落したみたいなので、こういった単機能なマイクロツールを排出していきたいなぁと思う今日この頃。
    みなさん今週も頑張りましょう。

  • MySQLって美味いの?SQLiteでいいんじゃね?

    なんかねぇ。

    Webの仕事してるとさぁ。
    「サーバ情報ください」ってお願いすることあるんだよねぇ、当たり前だけど。
    んでさぁ。やっぱりFTPの情報しか教えてくれない人、いるんだよねぇ。
    「DBも利用するので、MySQLのアカウントもください」っていうとさぁ。
    「システム部に確認するから待っててね」って言われて、そのまま待ちぼうけな場合もあるんだよねぇ。
    直前になって「お、Oracleっすか!?」ってなって、開発環境が組めない、とかさぁ。

    となるとさぁ。

    もうSQLiteでいいんじゃね?って思うわけ。

    CSVならどんな貧素なWebサーバでも動くから間違いないんだけど、ロックが大変だからやりたくないんだよねぇ。

    とかモヤモヤ考えている憂鬱な月曜の朝でした。

  • “ScanSnap iX100”で名刺整理をデジタル化。

    まぁ実際に買ったのは年末の話なんですがw

    ずっとね。

    デジタルな仕事しているのに、名刺だけは実物(アナログ)管理ってことがずっと気になってたんですよ。
    まぁ確かにデザイナーの友人・知人も多いので、結構こだわった名刺なんかも頂きます。
    エンボスなどはよくある話で、縁が焼けたようなものや、厚さ1mm(これ迷惑w)なものなど、デジタル化したら味が無くなってしまいそうで嫌だし。

    けどね。

    気がついたんですよ。
    あぁずっと名刺整理してないなぁ。
    昔は会社別とか、あいうえお順とかに並べ直してたなぁ。
    そういえば名刺フォルダも持ってないし。
    名刺で相手の住所やらメアドやらを最後に調べたのって、いつだっけなぁ?
    あれ?名刺って、管理しても意味なくね?

    机の脇にある名刺の束。
    いつか整理しなきゃなぁって思いつつ、ものすごく微々たるストレスの種。
    もう開放されてもいいんじゃね?

    って思って。

    FUJITSU ScanSnap iX100 Wi-Fi・バッテリー搭載スキャナ FI-IX100
    富士通 (2014-06-20)
    売り上げランキング: 7,377

    買ってみたのでした。

    結論としては「実物の名刺、やっぱり不要だわ。」

    管理方法はいろいろあると思いますが、ぼくの方法としては、
    ・ScanSnapで取り込み。(一応両面。ただし裏面が活躍したこと無いw)
    ・PDF化してEvernoteに保存。
    ・PDF化のときにOCRでテキスト抽出。
    で管理。そうしておけば、だいたいの名前で検索すれば、その名刺がヒット。

    もうちょっとスマートに活用するため、Evernoteのノート名(タイトル)は「メアドのドメイン名 姓名」としています。
    例えばぼくの場合「nearly 元尾なにがし」みたいな。
    そうすることで、Evernote内でタイトル順に並べると、会社関連の人が一塊になるので便利。

    このデジタル化された名刺データを実際に利用するケースとしては……。
    特にありません。

    メアドって、なんか適当にやりとりしてると、誰かのメールのccに入ってるよね。だからあまり名刺で調べようと思わない。
    請求書送るにしたって、名刺で住所を調べるより、その人の会社のWebサイトを調べたほうが早いし、コピペもできるし。

    結局一番良かったことといえば……。
    机の片隅に溜まっていた名刺が無くなって、「片付けなきゃ……。」という微細なストレスから開放されたことだけです。

    P.S.そういえばe-文書法みたいなの見かけたんだけど、それ何?強いの??

  • ベランダ緑化も落ち着いたので、ベランダでBBQなど始めてみた。

    ベランダ緑化も落ち着いたので、ベランダでBBQなど始めてみた。

    ベランダがあると、インドア生活が少しだけ、ほんの少しだけアウトドアっぽくなります。

    去年から始めたビオトープやグリーンカーテン。
    緑があると、少しだけ「ほっ」とします。

    で、そこで飲むビールなどがとても美味い!
    風呂あがりには、間違いなくベランダに直行して、まだ引かない汗を拭いながら飲むビールが最高なのです。

    が。

    ほら、ぼくって肉が好きじゃないですか。
    なのに、家で焼肉するの、嫌いなんですよね。
    臭いがこもるから。風通しが良くても、やっぱり臭いはこもるんです。

    てことは。

    「ベランダを楽しむ」と「肉が好き」が交わると、「ベランダでBBQ」になりますよね?

    買ってみました。

    本格的にBBQを楽しむのなら炭火BBQセットなんでしょうが、マンションのベランダで炭をおこすと、たぶん、間違いなく怒られます。

    20150608_02
    あと、この炉ばた大将だと、もれなく焼き鳥もできる!という特典付き。

    もう何度か楽しみましたが、これはもうオススメですよ。

  • Gitで差分ファイルのアーカイブ(ZIP)を取得する。特に“/usr/bin/git: Argument list too long”と怒られた人向け。

    これに至った経緯。

    ・すでに稼働中のWebサイト(他社が構築したもの)の改修案件。
    ・既存のソースをすべてGitにぶち込んで、SourceTreeで管理。
    ・WordPressで構築されているのでファイル多杉。差分ファイルだけを納品したい。

    みたいな感じ。

    20150528_01
    こんな感じで、Commandクリックで2つ選択して、その差分ファイルをZIPで書きだそうぜ!という試み。

    手順としては、ターミナルから動作するシェルプログラムを作成して、それをSourceTreeのカスタムアクションに登録して起動させるというもの。

    まずはシェルの作成。

    diff_archive.sh

    #!/bin/sh
    if [ "$2" = "" ]; then
    	git diff --name-only HEAD $1 | xargs git archive --format=zip --prefix=_diff_archive/ HEAD -o _diff_archive.zip
    else
    	git diff --name-only $1 $2 | xargs git archive --format=zip --prefix=_diff_archive/ $1 -o _diff_archive.zip
    fi

    ネットでよく見かけるのは、

    git archive --format=zip --prefix=archive/ $1 `git diff --name-only $1 $2` -o archive.zip

    こんな感じのもの。この場合、差分ファイル数が多すぎる場合、/usr/bin/git: Argument list too longって怒られます。その対策として、多少環境に依存しちゃいますが、xargsでgit archiveに放り込んで行きます。

    んで、このシェル(diff_archive.sh)に実行権限を付与。
    右クリックの「情報を見る」で、ユーザ行の実行チェックボックスをチェック。

    次に、そのシェルプログラムをSourceTreeのカスタムアクションに登録。

    20150528_02
    SourceTreeの環境設定から、カスタムアクションタブを開いて、アクションを追加。

    これで準備完了。
    このエントリーの最初の画像のように、2つのコミット行を選択して、右クリック。
    カスタムアクションから「指定された差分をZIPで書きだす」(追加したアクションで登録した名称)をクリックで、gitのディレクトリに_diff_archive.zipが書きだされます。

    参考サイト

    Argument list too longって怒られない人向け
    http://ics-web.jp/lab/archives/4475

    怒られちゃった人への対処方法
    http://blog.shnr.net/gitで差分のエクスポート/

    で、このページがその両方をまとめたものになります。

    Gitが、おもしろいほどわかる基本の使い方33〈バージョン管理、SourceTree、Bitbucket〉
    大串 肇 久保靖資 豊沢泰尚
    エムディエヌコーポレーション
    売り上げランキング: 4,591
  • WordPressに飽きたんだけど、なんかいいCMSある?(なさげだけど)。

    ここ最近、暇。

    原因は主に2つ。
    長く付き合っていたクライアント(制作会社)と縁を切ったこと。
    飯の種(客の要望に合わせたオリジナルCMS開発や、SNSを絡めたキャンペーンサイトのシステム開発など)のブームが去ったこと。

    まぁそんな訳なので、いろいろ検証する時間が確保できまくりで、なんかいろいろなことが見えてきました。

    みんな大好きWordPress!

    もうデザイナーさんレベルでサイトが構築できちゃうから、ぼくみたいなプログラマーは用なし。
    独自のCMS開発に予算突っ込めるほどリッチなクライアントさんもいない。

    なので、意外と開発者が少なめで、WordPressでサイト構築してる人らがちょっと困っていることをカバーしているツール(CMSとか)ないかなぁ〜と探してたら、まぁちょっとマイナーだけど使えそう!というCMSが幾つかありました。
    まぁ具体的には挙げないけど、3つほどピックアップして、触ってみました。

    触ってみるからには、何か目標を。
    WordPressの公式テーマである「Twentyfifteen」の完コピ。
    HTMLやCSSの実装はもちろん、CMSが提供しているデザインカスタマイズも組み込みたい。
    たとえばTwentyfifteenのカラースキームを、検証対象のCMSのデザインカスタマイズ機能で組み込んだり、とか。

    結果。全滅。

    まず、管理画面がダサい。とにかくダサい。恥ずかしくて納品できないレベル。

    で、まぁ我慢できるレベルだと感じた唯一のものがconcrete5でした。(日本語メンバーの活動も盛んみたいで、コミュニティに質問投げたら速攻でレス付きましたw)

    concrete5本家
    concrete5日本公式

    でもね。でもね。
    4月から1ヶ月ほどゴリってみましたが、やっぱ無理でした。

    考え方が間違ってるのかもしれないけど、例えばWordPressを使ってサイト構築する場合(クライアントワークです)、
    ・テーマ作成
    ・適切なプラグインの導入
    ・足りない機能はfunctions.phpで追加したり、独自のプラグインを開発
    で足りる。ウィジェットは使わない。

    だけど、検証してみたconcrete5は、基本的なテーマカスタマイズはOKだけど、その中の要素(テキストエリアだとか画像の埋め込みやら)ってのがWordPressのウィジェットみたいな感じ。ドラッグアンドドロップでサイトができちゃいますよ!的な。

    ウィジェットみたいなもんだから、その部分のHTMLやらCSSがブラックボックスみたいになってて、HTMLの構造やらクラスやらIDやらが変更できないとか、変更できたとしても完璧じゃない(一部はそのCMSの仕様に準拠したり、テンプレートを選択するなどの更新者のひと手間が必要だとか)ものが多い。

    改めて向き合ってみると、WordPressは自由度が高い。
    テーマファイルも、結局はPHPだし、WordPressの内部関数もオープンになってるから、テーマから無理やり呼び出してどうにかこうにか希望の機能が実装できる。WordPressの外からWordPressの関数が呼び出せるのもまた良い。

    そんな訳で、やっぱり原点回帰。
    WordPressをより深く学んでみるモードに入っています。

    現在、これ( ↓ )が電子書籍化されているのを待っているところです。(願わくばKindleで)

    詳解 WordPress
    詳解 WordPress

    posted with amazlet at 15.05.19
    プライム・ストラテジー株式会社
    オライリージャパン
    売り上げランキング: 8,891
  • 安かろう悪かろうから卒業。ちゃんと使えるBluetoothヘッドセット“JABRA STEALTH”。

    みなさん、携帯電話(スマホ)を肩と耳に挟んで電話しますよね。んで、両手をフリーにして、メモ取ったり、キーボード打ったり。
    ぼくの場合、超なで肩なので、挟めないんです。なので、電話しながらキーボードを打つために、iPhoneの標準イヤホン(マイク付き)や、Bluetoothのヘッドセットを買ってみたり。

    Bluetoothのヘッドセットには悩まされました。
    Amazon辺りで「bluetooth ヘッドセット」で検索すると、検索結果が売るほどたくさん出てきます。
    安いものなら1,000円くらい、高いものだと10,000円くらい。商品詳細を眺めてみても、10倍の差がよく読み取れません。

    だから結局、安いものを購入。
    あの〜もしもし。聞こえますか?途切れます?ちょ、ちょっと待ってくださいね。(ヘッドセット外す)
    何度か繰り返して、捨てる。

    もう少し良さげな3,000円くらいのものを購入。
    あの〜もしもし。聞こえますか?途切れます?ちょ、ちょっと待ってくださいね。(ヘッドセット外す)
    何度か繰り返して、捨てる。

    もう多少高くても、カッチョ良くて、カスタマーレビューがたくさん書き込まれてて、悪評が少ないものにしよう!

    ビックカメラやヨドバシカメラを渡り歩き、どこのメーカーのヘッドセットがカッチョ良いかに当たりを定め、帰ってAmazonさんで復習。どのシリーズが良いか、レビューが書き込まれているか、悪評にはどのような種類のコメントがあるか、などなど。

    で、最終的に落ち着いたのがコレ。

    カスタマーレビューによく出てきたのが「今まで安いの使ってたけど使い物にならなかった。コレを買ってよかった」というもの。
    まさしくそれを体感したい!と思い、Jabra STEALTH購入決定。

    定価は9,800円だけど、Amazonでの実売価格は6,000円台後半くらい。

    実際に使ってみたところ……。

    確かに途切れない。
    完全に使えるヤツでした。

    iPhone, Macに同時接続してると、iPhoneの通話側にノイズが入るかな。その程度なら通話中にMacの接続切りゃぁ良い話。

    こうなれば気になるのがもっと高い商品。
    定価レベルで、
    17,600円のものや、17,442円のものもあるけど、見た目がかっこよくないし、レビューも少ないけど、どうなんでしょうね。ヘッドセットの品質というよりは、機能や機構による価格差なんじゃないかな。自分じゃ試す勇気ないし、レビューも少ないからわかんねぇな。

    いづれにせよ、「安かろう悪かろう」という言葉を噛み締めた42歳の春でした。

  • Google Mapsにカスタムボタンを追加してみました。

    Google Mapsにカスタムボタンを追加してみました。

    LR賃貸ブログさんでやってた2015年エイプリルフールのネタ。後日談として、本当に不動産サイトの地図に「Ingressボタン」を追加しやがりました。

    使う必要がないので学んでいなかったカスタムコントロール。ネットで実装方法調べてみたけど、あまり情報が無いってことはあまり知られてないのかな?
    実際に試してみたら、意外と普通の実装で対応可能だし、もしかしたら活用場面は多いかもね?という感想です。

    カスタムコントロール(ボタン)の追加 | gMapsSandbox

    支店名のボタンを並べて、ショートカット的な機能を追加する、とか。
    駐車場マップで、空車・満車を絞り込む、とか。
    十字キーのようなコントロールを作って、ファミコン的な地図ゲームを作る、とか。