タグ

2012年11月18日のブックマーク (14件)

  • 「WordPressの守りを固める」のまとめの章の訳 – わーどぷれすっ!!

    以下は、Locking Down WordPress(CC BY-NC-SA 3.0, 2012)のまとめの章、”TL;DR: Our Collaborators’ Advice in Short Shots -要約: 協力してくれた方々のアドバイスの簡潔なまとめ”をPHP祭り2012のハッカソン中に訳したものです。その訳はAzure上に作ったWordPressに置いていたのですが、お試し用に貸していただいていた場所なのでこちらに移しました。 この「まとめ」以外の中身の訳と、これを(生涯初の)LTで発表してスライドごと大失敗に終わってしまった顛末はまたの機会にw。 あらためて、Azureを紹介してくださった廣瀬 一海(デプロイ王子)さんとPHP祭り青年団のみなさんお礼申し上げまする。 PHP祭り2012、レガシーズのみなさん 要約: 協力してくれた方々のアドバイスの簡潔なまとめ あなたの仕

    「WordPressの守りを固める」のまとめの章の訳 – わーどぷれすっ!!
  • 長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation

    長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なのでは。 CSStext-overflow:ellipsis;で制御できない時に試してみてはいかがでしょう。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.smarttruncat

    長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation
    mimosafa
    mimosafa 2012/11/18
  • 第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。

    どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き!ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン

    第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。
    mimosafa
    mimosafa 2012/11/18
  • オンライン上で使えるシンプルなMarkDownエディタ・Socrates.io

    プレビューをリアルタイムで 確認出来るシンプルなMarkDown エディタ・Socrates.ioのご紹介。 オンラインで使用できます。 同じタイプのアプリは数多に あると思うのでお好みで利用 されてはいかがでしょう。 MarkDown記法で書くと即座に反映される、というシンプルなエディタです。 左に書くと右に反映されます。ユーザー登録は不要。 書いてみた。MarkDown記法はほんと書くの楽ですね。 保存や集中モードも用意されています。保存はlocalStorageっぽいです。 MarkDown記法の練習にもなるかも。ご利用は以下より。 Socrates.io

    オンライン上で使えるシンプルなMarkDownエディタ・Socrates.io
    mimosafa
    mimosafa 2012/11/18
  • Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」:phpspot開発日誌

    cssPanelMenu CodePen Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」。 ページが左にスライドするあのメニューをCSSで実装したデモです。 JavaScriptレスでメニューが左にアニメーションしつつ現れるデモで、CSS自体もそこまで長くなくて分かりやすいです ナビゲーション部分のHTMLも次のような感じで分かりやすく記述可能。 CSSのみでやったというところがいいですね。 関連エントリ Facebookアプリみたいな最近流行りのUIでWEBアプリ実装が出来るフレームワーク「Sidetap」

    mimosafa
    mimosafa 2012/11/18
  • [CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル

    CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。

    mimosafa
    mimosafa 2012/11/18
  • 商用利用も再配布も限界無しのフリー!全250種類2500個、世界各国の国旗のアイコン素材 - 2500 Flag Icon Set

    個人でも商用でも無料で利用でき、バックリンクも不要、コピーも修正も配付もOKな2012年版の世界各国の国旗のアイコン素材を紹介します。 国旗アイコンはこれさえあれば、もう困らないって感じですね。 2500 Flag Icon Set 国旗は全部で250種類あり、デザインはフラット・シャイニーの2種類が揃っています。a 国連加盟国数は2012年現在193ですが、例えばイギリスだとイングランドやユニオンフラッグが揃っています。 国旗は各国、デザイン2種類、サイズ5種類 ダウンロードできる素材のフォーマットはPNGで、サイズは16×16, 24×24, 32×32, 48×48, 64×64の5種類です。 素材は個人でも商用でも無料で利用でき、ライセンスはMIT Licenseでバックリンクは不要、とのことです。 詳しくはダウンロードファイルの「LICENSE.txt」をご覧ください。

    mimosafa
    mimosafa 2012/11/18
  • Amazon S3から自動的に安価なAmazon Glacierへアーカイブする新機能が登場

    Amazon S3に保存しているデータを、自動的に1GBあたり月額約1円というきわめて低価格な「Amazon Glacier」へアーカイブしてくれる。Amazonクラウドが発表したAmazon S3とAmazon Glacierが連係する新機能は、データアーカイブを非常に簡単に低コスト化できるソリューションとして使えるものです。 【AWS発表】Amazon S3がさらに便利に! データをAmazon Glacierに自動アーカイブできるオプションが追加! - Amazon Web Services ブログ Amazon Glacierの最大の魅力は、数百ギガバイトや数テラバイトにおよぶ大規模なデータをサポートするアーカイブサービスを、きわめて低価格で提供してくれている点です。ただしその利用には、Amazon S3とは別に用意されたAmazon Glacier用の操作をしなければならず、また

    Amazon S3から自動的に安価なAmazon Glacierへアーカイブする新機能が登場
    mimosafa
    mimosafa 2012/11/18
  • 1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個! | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

    HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営WebサービスHTML5エンジニアをやっているものです。 よろしくお願いします! 「HTMLファイ部」創立1周年! 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ!・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます! ツール系のサイト

    mimosafa
    mimosafa 2012/11/18
  • Google の Chrome Developer Tools で WEB ページのリクエスト数を確認してみた

    WEB サイト(ブログ)の表示速度が遅いひとつの大きな要因である、WEB サーバーへのリクエストの多さですが、そもそも自分のブログは WEB サーバーにどれほどのリクエストを送っているのでしょうか? このブログはブログ名にもあるように WordPress で動いている訳ですが、なんだか最近動きがもっさりしていた。テンプレートファイルをいじくったり プラグインをインストールしたりしている間にもっさりもっさり。 これはイカンということで色々と手をいれてみました。 手を入れる前は、記事ページが表示されるまでにおおよそ 5秒前後かかってました。それまでモッサリと思ってたけど、数値として視覚化されちゃうと、モッサリというより普通に遅かった。 関連記事:GoogleChrome Developer Tools で サイトの表示速度を計ってみた っで、WEB ページの表示が遅い原因は様々だけど、W

    Google の Chrome Developer Tools で WEB ページのリクエスト数を確認してみた
    mimosafa
    mimosafa 2012/11/18
  • ブログのTwitter Cardsが有効になりました - F.Ko-Jiの「一秒後は未来」

    Twitter CardsはTwitter独自の仕様で、ツイートにURLが含まれているとそのURLのタイトルや概要、サムネイル、そのサイトのTwitterアカウントなどの情報がTwitterのWebサイトや公式クライアントアプリに表示されます。Facebookなどで利用されるいわゆるOGPみたいなものです。 この機能を有効にするにはまずサイトのほうにTwitter Cards用のmetaタグを記述する必要があります。さらにTwitter Cardsを有効にするために申請が必要です。申請が通ったらメールが送られてきます。 うちのブログはMTなので<head>タグ内に以下のような記述をしました。参考までに。 <!-- Twitter Cardsの種類。ブログ記事ならsummaryで。 --> <meta name="twitter:card" content="summary"> <!-- パ

    ブログのTwitter Cardsが有効になりました - F.Ko-Jiの「一秒後は未来」
    mimosafa
    mimosafa 2012/11/18
  • WordPress カスタムフィールドスニペット

    Custom Field Snippet プラグインをリリースしました。カスタムフィールドのデータを出力するコードを生成するプラグインです。 カスタムフィールドは、テンプレートに get_post_meta(投稿ID、フィールド名、単一かどうか) 等を記述して表示します。標準状態では、カスタムフィールド名を調べて記述する必要があるので、結構面倒です。このプラグインは、カスタムフィールドに入力されているデータから、フィールド名を取得し、get_post_meta を生成します。 使い方は簡単です。メタボックス内に、カスタムフィールド出力コードが表示されます。これをテーマのテンプレートファイルにコピーしてください。カスタムフィールドのキーも埋め込み済みなので、スペルミス等が生じません。 Advanced Custom Fields プラグインを利用している場合は、get_field(), th

    mimosafa
    mimosafa 2012/11/18
  • メインループのポスト抽出はどこで? | WordPress 編

    メインループで表示するポストは、どこで抽出しているのだろうか? テンプレートには、通常 query_posts() は出てきません。どこでポストを抽出しているのだろうか?その疑問に対する答えは、Codex のクエリ概要に書いてあります。 メインループのポスト抽出 「クエリ概要」は、主にプラグイン開発者向けに書かれているので、読んでもよく分からないかもしれません。そこでポイントとなる手順だけを抜き出してみます。 WP->parse_request() を使って URLをパースしクエリを特定する。 特定したクエリを MySQL のデータベースクエリに変換する。 WP_Query->get_posts() 関数によって投稿のリストを取得するデータベースクエリを発行する。 WordPress ループ内で使用される $wp_query オブジェクトの中に保存する。 WordPress ループのための

  • フリーランス10年目に入ってどうしても書き留めておきたかったこと - TokyoHeadTerminal

    フリーランスになって10年目に入りました。数ヶ月が過ぎてしまったけれど、どうしても書き留めておきたかったこと。個人ブログとはいってもパブリックな場なので、少しは内容を整理して残したつもり。もしも誰かのエネルギーになればこれ幸いなのです。 フリーランスになるきっかけのひとつとして「父の死」があった。これは心の芯に刺さっているし、思い出せばいまでも涙がでてくる。 この、挫折を経験した社会のクズがいかにして這い上がってきたかというところ、突き詰めれば「無」につきる。言葉を持てば持つほど、それ自体が自分を締めつける。美学とはまた別の話ね。 「無」とは矛盾するけれど、自分の経験から導き出した言葉。思い出しては救われてきた言葉を50個ばかり書いていきたいと思います。 まずはメンタル面、これが弱ければ何も成し遂げられない。 何かひとつ変われば、その周辺がどんどん変わっていく。良い連鎖の始まりとなるのは、

    フリーランス10年目に入ってどうしても書き留めておきたかったこと - TokyoHeadTerminal
    mimosafa
    mimosafa 2012/11/18