nDiki : URL

URL - Uniform Resource Locator

URI escape (Perl)

によると

 $str =~ s/(\W)/'%' . unpack('H2', $1)/eg;

 $str =~ s/%([0-9A-Fa-f][0-9A-Fa-f])/pack('H2', $1)/eg;

がはやいそうです。

application/x-www-form-urlencoded でのエンコード (Perl)

同じく

によれば、

 $str =~ s/([^\w ])/'%' . unpack('H2', $1)/eg;
 $str =~ tr/ /+/;

 $str =~ tr/+/ /;
 $str =~ s/%([0-9A-Fa-f][0-9A-Fa-f])/pack('H2', $1)/eg;

がはやいそうです。

RFC

  • RFC1738 - Uniform Resource Locators (URL).
  • RFC1808 - Relative Uniform Resource Locators.
  • RFC2368 - The mailto URL scheme.
  • RFC2396 - Uniform Resource Identifiers (URI): Generic Syntax.

関連情報

スポンサード リンク

2016年12月9日 (金)

nDiki に貼る写真Flickr ではなく同じサーバに置く

この nDiki写真を載せる際は2005年から Flickr にアップロードしてそれを貼りつけるようにしています。これを今後は普通に画像ファイルを Web サーバ側に置くことにしました。

Flickr写真を置いておくメリットは以下があります。

一方デメリットとしては

  • Flickr にベンダーロックインされている。長期的には一抹の不安。
  • 一度画像URL が変わったタイミングで過去の写真が一部表示できなくなっている(記事側の URL を変更していく必要がある)。今後も同様の自体があり得る。

があります。

Flickr 利用で使い勝手的には問題が無いのですが、長期的に継続する Web 日記のコンテンツとしては他のサービスに依存しすぎないようにした方が良いということで、今後は普通に Web サーバに置くことにしました。

そうするとどのサイズの画像ファイルを用意するかを改めて考える必要が出てきました。

画像サイズ

今までは Flickr で生成されるから適当そうなもの(たいがい長辺 500px のもの)を選んで貼っていました。今後は自分で適切なファイルを作ってアップロードすることになるので画像サイズについてちょっと見直してみました。

Bootstrap 3 でのサイトの幅の見直してコンテナを 970px までに

Bootstrap 3 だと広くても幅 1140px (1170px - 30px) なので画像幅もこれだけあれば十分です。しかし考えてみると nDiki は1カラムなのでラージデバイス(≥1200px)向けのコンテナ 1170px はいささか広すぎます。ということでいったんミディアムデバイス向けのコンテナ 970px までしか広げないようにしました。

 @media (min-width: 1200px) {
     .container {
         width: 970px;
     }
 }

写真は基本 max-width: 100% の .img-responsive で表示しているので、これで最大 940px 幅で表示されることになります。

表示される写真の高さは最大 480px に

幅 940px だと 4:3 なら高さは 705px、3:2 なら高さは約 627px になります。13インチMacBook Pro 上の Google Chrome でこのサイズの写真を貼るとほぼ縦いっぱいになってしまいます。記事中の写真では 480px ぐらいまでかなという印象でした。ということで

 max-height: 480px;

としました。

これだと 4:3 なら 640x480px、3:2 だと 720x480px の画像サイズがあれば十分なことになります。縦位置だと 3:4 で 360x480px、 2:3 だと 320x480px です。

画像ファイルの画像サイズは長辺 1200px に

これで 640x480px (4:3) や 720x480px (3:2) にリサイズして Web サーバに置けば現時点では過不足ないということがわかりました。

ただこれだとデバイスの変化でサイトデザインを見直す時がきた時に解像度不足になってしまいます。Bootstrap のラージデバイス向けのコンテナサイズを考えていったん長辺 1200px で画像ファイルを用意することに決めました。

ついでに .pull-left と .pull-right の画像幅も調整

写真を左右に寄せた際に現状テキスト部分が狭くなりすぎることがあるのでこのあたりも合わせて今回調整しました。

 .img-responsive {
     display: inline-block !important;
     max-height: 480px;
 }

 @media (min-width: 768px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 992px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 1200px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }
スポンサード リンク
[ 12月9日全て ]

2017年1月29日 (日)

nNote 始めました

永続的に残しておくほどではないちょっとしたノートを置いておくスペースとして nNote を始めることにしました。

nDiki と同じく自作の DiKicker を使用しています。

Medium であったり note であったりその他の Blog サービスであったりと「何か」を書いて公開しておけるサービスを触ってみるたびに「この nDiki とは別に書くとしたら何だろう? 何を書きたいんだろう?」と考えを巡らせていました。

この nDiki は長く続けてきた中で

  • 永続的に残すことを前提にきちんとした URL (記事 ID) にする。
  • 誤読されないように、ある程度自分なりに推敲する。
  • AutomaticLink のために正確な用語で書く。
  • フィードが拾われて消費されることを前提に、きちんと書けてから公開する。

といった縛りが自分の中にできてきているので、もっと自由なスペースが自分は欲しいのではと思えてきました。

  • 必要が無くなったら 404 を恐れずさくっと消して良い。
  • まだ自分としてこうだという結論に至っていない考えだったり何かの断片だったりを書いて良い。
  • 最初から用語の正確性を追わなくて良い。
  • 頻繁に更新して良い。

そういったノートを書き留めておく場所が欲しいんだなと。

そのためのサービス・プラットフォームで何がいいかと考えると、やはりテキストファイルでさっと新規作成・再編集をしてサーバに同期して公開・更新できるものがいいなぁという結論に至って、結局欲しいと思って自作して使っているこれ (DiKicker) じゃないですかと。日付有りノート中心になってしまいますが、まあいいかなと。

ということでさくっと設定だけ増やして nNote を立てるに至りました。

[ 1月29日全て ]

2017年5月26日 (金)

東京ディズニーランドの準備

明日東京ディズニーランド(TDL)へ行くので準備。

2015年10月26日に発表された東京ディズニーリゾート公式 ショー抽選アプリもインストールしました。一昨年 TDL に行った時はまだ無かったので今回が初。現地でないと機能しないように作られているので明日使ってみます。

それから、やはり公式ページの情報が確実なので当日見やすいように Xperia Z5 のホーム画面にショートカットを追加しておきます。

旅のしおり的なやつは今回は個人のメモとして Google Keep に入れておくことにしました。スポット別にメモを作って公式サイトの URL を貼りつつ、テーマランド名をハッシュタグでつけたり、ポイントを書いてます。他人と共有したり印刷したりするつもりが無ければ手軽でよさそげです。

[ 5月26日全て ]

2017年5月27日 (土)

東京ディズニーランド 2017

rimage:/nDiki/2017/05/27/2017-05-27-090325-nDiki-800x1200.jpg

今日は健歩大会東京ディズニーランド。去年の健歩大会東京ディズニーシーにしたので今年は東京ディズニーランドにしました。一昨年の5月から約2年ぶりです。

前回ダメだった「プーさんのハニーハント」「ワンマンズ・ドリームⅡ - ザ・マジック・リブズ・オン」を今回はどちらも乗る・観ることができ、良い流れでまわることができました。満足満足。

9:00 入園

電車組なのでだいたいいつも通りの到着です。入園後左手のトイレで用を済ませていざ夢の国へ!

9:22 プーさんのハニーハントのファストパスをゲット

まずはプーさんのハニーハントのファストパスをゲットしに。この時間で 17:10 でした。前回は 9:40 過ぎ頃にきたら 19:45 のファストパスということだったので、真っ先に来て良かった。

空飛ぶダンボ

最初に選んだアトラクションは空飛ぶダンボ。50分待ち列。並んでいる間に「ワンマンズ・ドリームⅡ - ザ・マジック・リブズ・オン」の抽選をアプリでやってみたら当選。ついてる!

ソルトポップコーン(チャックワゴン横)

ポップコーンはソルトから。ポップコーンバケットはかさばるので今回はレギュラーボックス用のスーベニアポップコーンケースを買ってみました。これコンパクトで良いですね。ポップコーンの量もちょうど良い感じですし、これからはこれで行くことにします。

20分ほどの購入列を待っている間に、一昨年買ったミニーちゃんのミストファンに水を入れて涼をえました。

ウエスタンリバー鉄道

20分待ちとなっていましたが10分ちょっとで乗車できました。並ぶ際に調査カードを預かって乗り場でキャストに渡しました。行列の長さなどをチェックしているのでしょうか。

ウエスタンリバー鉄道の車窓からはパレード「うさたま大脱走!」を眺めることもできてなんだか得した気分。ウエスタンランドを満喫しました。

カフェ・オーリンズ

image-half-mixed:/nDiki/2017/05/27/2017-05-27-113907-nDiki-800x1200.jpg image-half-mixed:/nDiki/2017/05/27/2017-05-27-114309-nDiki-1200x800.jpg

途中ちょこちょこ買い食いするかなということでお昼は軽めに。カフェ・オーリンズのパラソルのあるテラス席で、チキンサラダクレープやケイジャンシュリンプクレープを食べました。

image:/nDiki/2017/05/27/2017-05-27-115326-nDiki-1200x800.jpg

12:51 白姫と七人のこびと

30分待ち列へ。「あれ? 途中で終わっちゃった?」という印象のアトラクションでした。

プーさんコーナー

image:/nDiki/2017/05/27/2017-05-27-134736-nDiki-1200x800.jpg

プーさんのハニーハント隣のショップ「プーさんコーナー」へ。ここで思わずプーさんんのぬいぐるみを買ってしまいました。ここからは家から連れてきたジェラトーニとともにプーさんとランド巡りです。

13:50 ハニーポップコーン(プーさんのハニーハント前)

ポップコーンを補充。今回はハニー。

13:56 グーフィーのペイント&プレイハウス

ステージショーまで時間があるのでトゥーンタウンへ。前回楽しかったグーフィーのペイント&プレイハウスをまたプレイしました。

15:00 ワンマンズ・ドリームⅡ - ザ・マジック・リブズ・オン

image:/nDiki/2017/05/27/2017-05-27-152817-nDiki-1200x800.jpg

一昨年の抽選では外れたステージショーですが今年はアプリでトライして見事当選しました。座席も結構前の方でラッキー。出演するいろいろなディズニーキャラクターをまとめて見ることができ満足でした。ゆっくり座って鑑賞できるので休憩にもなりました。

ミッキーが出てくるだけでわーっとなって涙が出てくるのなぜでしょうね。

16:00 スィートハート・カフェ

image:/nDiki/2017/05/27/2017-05-27-160704-nDiki-800x1200.jpg

東京ディズニーランドのこれぐらいの時間帯での少し日が傾いてきた感じがたまらないんですよね。小腹が空いたのでスィートハート・カフェでスイーツを買い、プラズマ・レイズ・ダイナー近くのベンチで頂きました。

プーさんのハニーハント

ショップなどをぶらぶらしてちょっと時間を潰したあとプーさんのハニーハントへ。プーさんの優しい世界観が表現されたのどかで良いアトラクションでした。人気なわけですね。

ロジャーラビットのカートゥーンスピン

もう1つぐらいアトラクションいっちゃおうかということで、再びトゥーンタウンへ行ってロジャーラビットのカートゥーンスピンに乗ってみました。

このアトラクションが一番長く並んだなという印象があったのは、暗い建物の中、先の見えない列だったからな気がします。

19:00 プラザパビリオン・レストラン

image:/nDiki/2017/05/27/2017-05-27-195616-nDiki-1200x800.jpg

夜ご飯はプラザパビリオン・レストラン。ちょっと肌寒く感じてきたので建物の中の席にしました。

19:30 からの東京ディズニーランド・エレクトリカルパレード・ドリームライツを遠目に見つつお腹を満たしました。

20:10 退園

20:00 過ぎぐらいに退園。良い一日でした。

駅からタクシー

地元駅まで戻ってきた頃にはお疲れだったので、駅から家まではタクシーを利用。今年の1月30日からタクシー初乗り料金が410円になったのですが、結局自宅までの料金は去年乗った時と同じでした。

持ち物

次回用にふりかえり

  • 今回新調したショルダーバッグ グレゴリー サッチェル M は取り回しが良く正解でした。バンナイズのミニストラップをつけておいたのも◯。
  • 折りたためるナップサックは今回も活躍しました。
  • 日焼け止めはしていったので十分でした。
  • ミネラルウォーターの 350ml ペットボトルは今回飲みきらなかったので次回は減量できそう。
  • 防水カメラ FinePix XP70 は出番なし。

ツール

  • 回りたいアトラクションのメモGoogle Keep に。アトラクションページ別にメモを作り公式アトラクションページへの URL を貼っておくとさっと見られて便利でした。
  • 当日のログは WriteNote Pro で。時刻記録はこれが一番手軽です。
[ 5月27日全て ]

2017年10月26日 (木)

今日のさえずり: 申し訳なくて一応「はい」 URL もタップした

2017年10月26日

  • 11:00 ISUCON7 予選 20位! 惜しかった! / “ISUCON 2017 参加記録 - いろいろかくよ” http://bit.ly/2z65umH
  • 13:39 氷川神社に会いにきた。 https://t.co/eCZNjTeFkt
  • 19:40 商品発送メールに「このメッセージは役に立ちましたか? はい いいえ」があってスクロールする時に「いいえ」 URL をタップしてしまった。申し訳なくて一応「はい」 URL もタップした。確認画面挟んで欲しい。
[ 10月26日全て ]

2018年1月13日 (土)

Web 日記を書いたら Zapier を使ってmixi でつぶやくようにする

Web 日記を書いたmixiボイスにつぶやいてシェアできるように Zapier を設定してみました。

mixi はフィード出力のある Blog を「外部ブログとして日記に設定」することで新着をシェアする機能がありますが、mixi 上で書くmixi日記とは同時に使えません。私はmixi日記も書いているので、つぶやきでシェアするようにしました。

Zap

作成した Zap は以下のような感じ。フリープランで作れます。

image:/nDiki/2018/01/13/Zap.png

TRIGGER

RSS by Zapier」の「New Item in Feed」で新しいフィードアイテム(Web 日記記事)があれば Zap が動くようにします。

SEARCH OR CREATE

フィードのままだと URL が短縮されないので「Bitly」の「Find or Create Bitlink」で URL を短縮させます。「Create Bitlink」だとエントリの URL が既に短縮済みだった場合にエラーになってしまうので「Find or Create Bitlink」にします。

ACTION

つぶやくところは「Gmail」の「Send Email」を使います。

To には mixiメール写真付きつぶやき」での送信先メールアドレスを、Body にはつぶやきたい内容を設定します。フィードのタイトル(Step 1 の)や、短縮 URL (Step 2 の)などを組み合わせてテンプレートを作ります。

ちなみにここで To に mixiメール日記を書く」のメールアドレスを指定し、Subject にタイトルを、Body に本文を書くことでmixi日記に投稿してシェアするようにもできます。

それ IFTTT

IFTTT でも「RSS Feed」サービスと「Gmail」サービスを組み合わせればだいたい同じ構成のアプレットが作れます。

ただ IFTTTGmail サービスは From の切り替えができません。なので IFTTTGmail サービス連携させている Gmail アカウントのメールアドレスと mixi の登録メールアドレスが同じ場合はいけるはずですが、異なる場合は駄目だったりします(つぶやき・日記メールでの投稿は mixi 登録メールアドレスからのみ可能)。

ZapierGmail で設定している送信用メールアドレスをアクションで選択できます。 Zapier と連携させる Gmail アカウントで mixi 登録メールアドレスを From として送信できるように設定しておけば Zapier でその From を指定できます。

Zapier の方が細かい設定ができるし何が起きるかもわかりやすいし IFTTT より便利ですね。ただフリープランだと1カ月に実行できるタスク制限が結構厳しく、かといって一番安い有料プランでも $13.75/月するというのが悩ましくあります。もう少し安いプランがあると嬉しいなと。

[ 1月13日全て ]

2018年2月11日 (日)

nDiki のトップページの上部と下部に記事を固定表示できるようにした

このサイト(www.naney.org)のトップページは Web 日記 nDiki の最新記事を新しい順に表示するようになっています。なので日によっては他人からみてどうでも良いような記事が一番上だったりします。

他のサイト上にあるプロフィール URL から飛んできてもらった人に、どうせなら自分の趣味・関心、あるいは最近の推しなものの話を見せたいなと思い立って、特定の記事を上部に固定表示できるようにさくっと変更してみました(ついでに下部にも固定表示できるようにしました)。 Twitter の固定表示みたいなものです。

[ 2月11日全て ]

2018年2月12日 (月)

今日のさえずり: Google アプリのフィード上のカードを共有すると専用の Google URL Shortener で短縮された URL が渡される

2018年02月12日

[ 2月12日全て ]

2018年2月18日 (日)

ようやく nDikiTwitterカードを実装した

書いた日記Twitter でシェアした際に Twitter 上でグレーの地味なリンクサムネイル付きSummaryカードが出るのちょっと嫌だなぁと思ったので、そのうちと思っていた Twitterカードを対応をようやくすることにしました。

記事中の最初の画像を自動的にTwitterカードの画像に指定する案も考えたのですが、過去記事にも自動的に画像がつけられるという利点はあるものの、小さい画像など適切でないものが設定されてしまうこともあるかなと思ってそれはやめにしました。

なので記事中に [[ogpimage:URL]]と書いてあればそれを

 <meta name="twitter:image" content="URL">

とするようにしました。あとは twitter:card と twitter:site と twitter:title もヘッダに合わせて埋め込むようにして完成。

ついでに設定した画像 URL は Open Graph protocol (OGP) の og:image にも指定して Facebook でも認識できるようにしました。

これで日記写真を載せるモチベーションもアップしそうです。

[ 2月18日全て ]

2018年2月28日 (水)

GitHub Flavored Markdown ファイルの Web ブラウザでのプレビューに Grip を使う

Markdown で書いているノートを Web ブラウザで見るのに MkDocs を使う」とつぶやいたら @bsdhack 氏が Grip を紹介してくれました。

さっそく試してみました。

 $pip2 install grip

インストールしたら Markdown ファイルを指定して Grip を起動します。

 grip index.md

Grip が http://localhost:6419/ で Web サーバとして立ち上がるので Web ブラウザでアクセスすると index.md の HTML 変換されたものを見ることができます。なお

 grip -b index.md

とすれば起動と同時に Web ブラウザで開いてくれます。URL でパスを指定すればそのまま同じ/サブディレクトリにある Markdown ファイルもプレビューできるので、ハイパーリンク付けをしておくことでドキュメント群をブラウジングすることもできます。なるほどお手軽で便利。 GitHub 上とほぼ同様の見慣れたデザインになるのがいいですね。

そもそも Grip は「GitHub Readme Instant Preview」で GitHub 上での表示確認のためのツールで、 GitHub の REST API を使ってレンダリング結果を生成しているので当然といえば当然だったりはします。

ただそのかわり GitHub の API を使うので

と場合によっては不便な部分があります。なお後者については GitHub Enterprise があるなら Grip でそちらを指定するとう手もあります。

GitHub に push する前にチェックしたい時はもちろん、それ以外でさっと Web ブラウザで見てみたい時にも便利なツールですね。

[ 2月28日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

※内容は個人的見解であり所属組織とは関係ありません。

follow us in feedly

月別インデックス
Process Time: 0.109713s / load averages: 0.47, 0.46, 0.49
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker