Sublime Text 2のショートカットキーで便利なやつ何個か（Windows版）
Sublime Text 2で個人的によく 使うショートカットキーをご 紹介します。別件でメールして た時に聞かれたので書いてみる 事にしました。Windows版のショ ートカットになります。 個人的に便利だと感じたSublime Text 2のショートカットキーを紹介してみます。僕はまだ使い始めて半年くらいしか経って無いですし、機能を十分に使いこなせる訳では無いので参考程度という事で・・ 一括置換文字列の一括置換です。便利なので、これがないエディタはもう使えません。 Ctrl+D（同じ文字を複数選択→一括編集） ↑ 任意のテキストの上にカーソルを合わせてからCtrl+Dで、その文字と同じ文字に標準をあわせられます。 Ctrlを押したまま、複数選択したいところにカーソルを再度持っていってDを押せばその場所も選択可能です。 ↑ 選択したテキストは一括編集できます。 ただし、同じ文字列「全て」
オープンソースで公開されているPinterestクローンのソフトウェア・Pinry
OSSで公開されている、Pinterestクローンソフトウェア・Pinryのご紹介です。すでに類似サイトも沢山あるので今更感あるかもですけど、アイデア次第で用途の幅も広がると思うのでメモ。 画像や動画、Webページをシェア出来るソフトウェア。PinterestライクなWebサイトを構築したいなら一考しても良さそうですね。Pythonで作られています。 昨年あたりから人気が出た画像共有サイト、PinterestのようなWebサービスを作成出来る、というOSSです。ライセンスはGPLみたい。 公式の動作サンプルです。 動作サンプル ↑ スクショです。見るからにクローンです。 ↑ 投稿用のブックマークレットや投稿画面もそのまま。 作ってみたいけど時間が足りない・・うぐぐ・・詳細は以下よりどうぞ。 Pinry
あなたの「プレゼントしたい」欲を支援する国産ソーシャルギフトサービス・Wishcruise
ご連絡を頂いたのでご紹介です。 最近多く見かけるソーシャルな ギフトサービスに新たに仲間入 りした、Wishcruise。手軽に 友人にプレゼントを贈ることが 出来そうですよ。 ソーシャルミーティング、ソーシャルランチなど、色々な形でのソーシャルサービスが増えていますが、こちらは、ギフト支援サービスです。まだベータ版なので宜しければフィードバックを送ってあげてください。 記念日などを登録して欲しいものも登録しておきます。それを見た友達はプレゼントを選ぶのに頭を悩ませることなく欲しいものを贈れる、という仕組み。 こんな感じで欲しいものが登録されます。ギフトをあげるにはFacebookで友達になっている必要があります。 使い方です。というかサイトに書いてあったので拝借します。 使い方 因みに友達の少ない僕でもリマインダー的に利用できます。 まだベータ版なのでこれからではありますが、せっかく記事
Sublime Text 2に登録できるCSSのスニペット集が配布されてます
テキストエディタはSublime Text 2 が最高に自分に馴染むので去年、正式 に乗り換えたんですが、Sublime Text 2に登録出来るスニペットのCSSのが 沢山配布されていたのでご紹介。 テキストエディタの個人の好みはOSと同じくらい布教活動が盛んな、宗教染みた部分が垣間見えるので、正直言って心底ウザい言葉にするだけで不快に感じる方もいるかもと思ってからTwitterで言ったり記事にしたりとかにはしないようにしてるんですけど・・・（宗教が悪いと言ってるわけじゃないですよ。押し付け感や比較対象を貶す行為が嫌なだけです。） 折角なのでスニペットの紹介ついでに簡単にご紹介します。あ、もちろんWindows版もMac版もあります。僕はWindowsユーザーなのでその目線で書いていきますね。 エディタは1に起動スピード、2に使いやすさ、カスタマイズ性もあると嬉しい、といった視点で選ぶの
Tumblrのオリジナルテーマ作成用フレームワーク・tumblr-framework
Tumblrでオリジナルのテーマを自作 するためのフレームワーク・tumblr -frameworkのご紹介です。日本でも 企業が公式ブログ等にTumblrを使い 始めていますのでこういったフレー ムワークも確保しておくと良さそう。 女優の水野美紀さんや楽天、NISSANのキャンペーンサイトなどなど企業や著名人でも徐々に利用し始められてきたTumblrですが、テンプレートは独自の記法を用いて作成する必要が有ります。 この独自記法が予め書かれているフレームワークがtumblr-frameworkです。 Tumblrのオリジナルテーマを作成するためのフレームワーク。 以下のような、よく使われるタグや条件分岐タグなどが一通り備わっています。 <h1 title="{Title}"><a href="/">{Title}</a></h1> {block:Description} <p class=
CSS専門のスニペット共有サイト・CSSPop
コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLとCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop
スマートフォン向けのHTML5製フレームワーク・Lungo.js
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
WordPressのカスタムフィールドに住所や地名を登録するだけでGoogleマップが表示されるようにカスタマイズする
少し前に小規模のローカル地域での 店舗検索サイトのお手伝いをさせて 頂いたんですが、その時に使った Tipsです。WordPressのカスタム フィールドに住所を入れるだけで、 地図が表示されるようにする。 カスタムフィールドに住所を入力すればGoogleマップが自動で表示されるようにする、っていう方法。 住所入力でGoogleマップを表示する APIを使います。これは少し前にjQueryでやる方法を知人に聞かれたので記事を書きました。 APIと少しのjQueryコードでGoogle Mapの地図の色を変更する なので細かい解説は割愛します。 コードではコードです。 API<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></sc
穴埋め問題を解くような形式でPHPを学べる勉強サイト・(un)classroom
プログラミングを学べる、みたいなサイト が凄く増えている印象ですが、また似たよ うなサイトを見かけましたのでご紹介です。 実践しながら学べるサイト・(un)classroom。 実践といっても、穴埋め問題っぽい感じで、 手を動かして学べるようになってるだけで すが。 こういうサイト、日本でも増えていく気もします。需要が高い事は明白ですし、このように前例が出来ればインスパイアされるものですのでいずれ増えてくるんじゃないでしょうかね・・ まだ出来たばかりでPHPの基礎とFacebookアプリの作り方しか教室が無いんですが、今後に期待という事で・・ 最初の授業です。「PHPは<?phpで始まって?>で終わらせます」とあります。基礎のキですね。で、右側のsubmitで実行してみましょう、といった流れで進んでいきます。 で、2ページ目でレッチチャレンジ、という感じで穴埋めし、先ほどと同じようにsub
CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
15秒でHTML5のテンプレを作成出来るWebツール・InitializrがTwitter Bootstrap 2にも対応した模様です
InitializrっていうHTML5のテンプレ を15秒で作成出来る(らしい)ツール があるんですが、このWebツールが、 話題のTwitter Bootstrap 2にも対応 したみたいです。人気のフレーム ワークなのでありがたいですねー。 土曜日ですし、軽い話題。15秒でHTML5のテンプレが作れる！と謳うWebサービス・・InitializrがBootstrapに対応してます。これは地味に嬉しいんじゃないですかねー。 右側になんか増えてた！Bootstrapやたら人気ですしね。こういうのは嬉しいんじゃないでしょうか？Initializrはその気になれば本当に15秒で作成出来るので使うといいですよ。性能とか特徴は使って実感してください。 作ってみた 試しに15秒で支度してみました。こんな楽でいいのかな・・・LESS版も選べるので設定項目は好みで設定してくださいませ。 因みに・・・ B
HTMLファイルをアップロードすると、使われているclassやidを取り出してcssの雛形にしてくれるWebサービス・Bear CSS
日曜日です。如何お過ごしでしょうか。 さて、今日も軽い話題・・HTMLファイル を送信するとそのページで利用している classやidを抽出、cssの雛形としてDL 出来るようにするWebサービスです。 用途が思い浮かばない・・と、思ったんですけど、良く考えたらリニューアル案件なんかで地味に便利かも。 HTMLファイルを送信したらその中で使われてるclass名とかが書かれたcssを吐き出すってだけのサービスです。 PHPとjQueryプラグインのUploadifyが使われています。アイルランドの学生さんが作ったそうですよ。 送信するとcssの雛形を作ってくれます。 まぁそんだけなんですけどデザインの訴求力があったのでなんとなくご紹介しました。・・でも、なんで熊なんだろ。 以下よりどぞ。 Bear CSS
無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy
結構便利そうだったのでご紹介。オンライン でWebサイトの簡単な設計図、いわゆる モックアップをドラッグ&ドロップ、直感で作成 出来て、PDFやJPGで保存出来るフリーの Webサービス、lumzyのご紹介。ユーザー 登録不要というのが良いですね。 日本語もある程度使えて（ボタンのテキストなどには使えないです）、PDFで保存しても文字化けせず、しかもユーザー登録も不要なので結構重宝しそうな気がします。 「モックアップはきれいに作りすぎてはいけない、という話」という記事でもありますが、手書きのような感覚でスピーディに作れるので件の記事内容に沿ったモックアップの作成が出来そう。 lumzy ユーザー登録不要と言うのが手軽でいいですね。それでいて結構高機能なので侮れません。以下に簡単に使い方を。 プロジェクトを作る まず、プロジェクト名を決めます。決めなくてもモックアップは作成出来ますが、決めな
WordPressテーマ開発者向けの、様々な機能を兼ね備えたフレームワーク・WordPress Bootstrap
少し気になってたテーマにようやく触れて みたのでついでにご紹介。WordPressテーマ デベロッパー向けに作られたフレームワーク WordPress Bootstrapです。様々な用途に 応用しやすいように作られていますよ。 ベースにBonesが使われています。 テーマ開発者と言ってもかなり幅が広いんですが、こちらはそれなりに触りなれてる方でないと使うのは少し難しいかもしれません。プログラマーさん向けかもですね。 例えばテーマ独自のオプションや、カスタム投稿タイプを応用したシステムなど、割と高性能なテーマのスタートラインとして作ったみたいです。HTML5製でレスポンシブWebデザインにも対応しています。 高性能なテーマ開発にも柔軟に対応できるフレームワークです。今までのWordPressフレームワークの大半は普通のテーマが目的でしたが、こちらは少しシステムよりなイメージです。 レスポンシ
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
2011年・個人的に参考になったWeb制作向けの国内記事リスト
来年の復習用の記事リストです。自分用。 年末ですし、だれかがまとめ記事を書く と思って待ってましたが、他力本願も あまり良くないので自分でリストを作る 事にしました。去年も作ったけどあまり 出来なかったんですよね。。 タイトル通り、個人的に参考になった記事で、来年の勉強用リストです。 去年の記事(2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ)と似たような感じだけど、必要な情報が偏ってきたのと、国内のRSS購読ブログ数が1/30になったのでリストも偏ってます。 リストの内容に関してこの手の記事はいろいろご意見頂き易いので、ご覧頂く方に不毛なストレスを与えないように、内容に関して先に記述しておきます。 リストの内容ですが、単なるリソースの羅列のようなまとめ記事は個人的に参考になったことがないので割愛しています、というかこの記事自体そんな感じです。また、結果のみで解説の
商用も無料でリンク不要の日本語フォント・こども丸ゴシックと、無料で手に入るフォント配布サイトの早見表
はんなり明朝の作者さんより新作の ご連絡がありましたのでご紹介です。 丸みのある可愛らしい丸ゴシックの 「こども丸ゴシック」。今回も商用 でも無料でリンクなども不要と、 太っ腹なご提供です。貢献者さんで すね・・・頭が下がります。 さて、またも商用利用OK・リンク不要の日本語フォントが登場です。いつもご連絡頂き有難う御座いますー！ 現在漢字は創意製作中で、先行してひらがな、カタカナ、アルファベットをご提供頂きました。 かわいい丸ゴシックのフォントです。漢字は製作中とのことです。Twitterでフォロー(@typingart)しておくと見逃さないかもしれません。 テスト的に使って見ました。今年の漢字は「絆」なのでそんなニュアンス。コピーは思い付きです。手書き風のような丸みのあるフォントは人の声などを表すのに適してますね。子供や女性がターゲットのサイトで活躍してくれるかもしれません。漢字が出来
2011年に配信したjQueryやWordPressなどのWeb制作向け情報・総まとめ
早いもので今年も残すところあとわずか となりました。今年は年をまたいで仕事 しないとならないので早めに総まとめ的 な記事を書いておきます。と言っても 完全に自分用のまとめですのでご覧に なっても役に立たないと思いますがｗ というわけで、後で復習するのに、探さなくていいようにしただけの自分用リンク集です。 jQueryとWordPressにやたら偏ってます。過去記事のまとめですので目新しいものは一切ありません。 ネタは省いてます。あと、種類で細かく分ける気力が残ってないので順不同です。 スマフォ向けが多いのでスマフォ関連は※印を振っておきました。復習用なのでリンクは全て当サイトの記事にしてます。他の方には二度手間ですがご了承下さいマウスを乗せるとキャプチャが表示されます。130個くらいです。普段から小ネタばっかりなのでそんな感じのまとめです。 【追記】（僕が）リンク見にくいので色を変えました
相関図やマインドマップを簡単に作成出来るシンプルなWebサービス・Foliage(フォリッジ)
制作者さんよりご連絡頂いたのでご紹介 します。相関図やマインドマップなどを 簡単に作成出来るWebサービス、Foliage です。KJ法なんかにも良さそうですね。 この手のサービスは沢山ありますが、 国内のサービスなのと使用感が良かった のでメモ的に。 よくある相関図や簡単なマインドマップを作成出来る国産Webサービスです。要ユーザー登録。 サイトマップを作ってみました。サクサクと作れます。国産なのと、直感で操作出来そうなので説明はいらないと思います。 軽量でサクサク動いてくれますよ。操作も簡単です。 大きな特徴は無いですが、個人的にはこういった目的がはっきり決まっているツールに多機能は逆に操作性を損なうと思っていますのでこれは軸がブレてなくて結構素敵だなぁと感じました。 ユーザーの利便性の為にシンプルに設計する事ほど難しいものはないですよね。ご利用は無料です。 Foliage(フォリッジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
