atsushi1972のブックマーク - はてなブックマーク

コーディングを超加速するBrackets便利エクステンションまとめ

最近色んなところでBrackets使ってますの声を聞けて嬉しい感じなんですが、Bracketsのアドベントカレンダーも余裕で挫折しているのでまた仕切り直して、せっせと紹介記事書いていきますね。今回は新しく知った拡張機能のなかでコーディング関連のものを紹介します。これまでの紹介したものはいくつかありますので見てみてくださいー。 Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて – WEBCRE8.jp PSDデザインカンプからのコーディングに超便利！Extract for Brackets – WEBCRE8.jp SVGをBracketsで使用・作成・編集するのに便利な拡張機能 – WEBCRE8.jp Brackets CSS Class Code hint 便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているcla

atsushi1972 2015/03/06

コーディングを超加速するBrackets便利エクステンションまとめ Bracketsの拡張機能はどんどん色んなのが増えてて把握しきれてないですけど、最近知ったのを中心にコーディングを早くしてくれるすごいエクステンションをい

リンク

耳から得られるインプット Web・アプリ制作者向けのポッドキャスト集

まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる情報まとめのカテゴリです。私はどちらかというと作業中に内容のある音を聞くと気が散ってしまうほうで、音楽でも日本語の歌詞を聞くと歌詞が気になったり歌っちゃったりで集中力が乱れる方だったんですよね。なので音で情報を入れる類いのものを楽しむことができなかったんですが、先日なんとなくコーディング中にポッドキャストを聞いてみると意外と聞ける、ということに気付きました。よく考えたら話しを聞くという行為はインプットなわけですけど、コーディングはアウトプットなのであんまり邪魔にならないんです。どうやら以前はブログを書いているときにYoutubeかなにかを音だけ聞いてて、これは合わないと感じていたようなのですよね。ブログもアウトプットには間違いないけど、けっこう何かを調べたり、インプットも並行して行うので結局集中できないわけです。

atsushi1972 2015/01/08

耳から得られるインプット Web・アプリ制作者向けのポッドキャスト集最近作業中でも耳から情報が入るポッドキャストって結構面白いなとはたと気付いて、前から気になっていたポッドキャストを聞いたりしてます。移動

リンク

Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの

コマンドラインツールターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca

atsushi1972 2015/01/08

Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの Web制作のどんどん便利になっていますが、色んな細かい作業が便利になるとともにやることも増えていきます。当たり前ですよね、技術が

リンク

NHNのCafficeが新宿の作業できるカフェ難民としてはいい感じでした

2014年10月23日に新宿に新しくオープンしたカフェスペース「Caffice」に行ってきました。NHNが運営しているということでどんな感じなのかなーと楽しみにしていきました！新宿でノマドできるところに飢えてますなんかもしかしたら私の情報収集能力が低いだけなのかもしれないんですが、新宿でちょっと作業しようと思ったとき毎回困ります。私も最近外で仕事やちょっとした作業を行うことが多くなってきたので、よく立ち寄る駅に利用しやすい場所があるといいんですよねー。ちなみに私はこれまでは新宿でそうなった場合、ちょっと違う駅に移動してしまうかルノアールを使ってました。ルノアール、いいんですけど電源のある席は多くないので使えるかどうかがわからないし、ウームという感じでした。せっかくだしここにきたらここ、みたいな店がほしいなーというのもあり。 CafficeはNHN Play Artの新事業みたい Tw

atsushi1972 2014/10/31

NHNのCafficeが新宿の作業できるカフェ難民としてはいい感じでした 2014年10月23日に新宿に新しくオープンしたカフェスペース「Caffice」に行ってきました。NHNが運営しているということでどんな感じなのかなーと楽しみにして

リンク

HTML5がW3Cの勧告となりました

昨晩深夜2時頃にTwitterを見ていると、@W3Cの公式アカウントがHTML5が勧告に達したことを伝えていました。 #HTML5 is a W3C Recommendation http://t.co/El1jgeO5Ue — W3C (@w3c) 2014, 10月 28 最新の仕様はHTML5のページにあります。2014年の後半には勧告に達するとしていた予定通りとなります。これはつまり、Web制作者がHTML5という仕様に準拠したWebサイトを制作するのである限り、今後そのマークアップのルールは変わることがないということになるわけです。もちろん、既に次バージョンであるHTML5.1は既に開発は進められていますし、もうWebサイトを作るマークアップ言語に変化がないということではありませんが、これは一つの区切りになると思います。勧告を伝えているページをいくつか紹介します。 HTML5

atsushi1972 2014/10/31

HTML5がW3Cの勧告となりました最新の仕様はHTML5のページにあります。2014年の後半には勧告に達するとしていた予定通りとなります。 [] via Pocket October 31, 2014 at 08:03AM

リンク

WebフォントのCSS指定2014年度版とこれまでの歩み

比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」において最良だと思われるものを考察していくカテゴリです。最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ

atsushi1972 2014/05/25

WebフォントのCSS指定2014年度版とこれまでの歩みぼちぼち使われ始めているWebフォントですが調べてみると、構文がけっこう昔のままで用いられていることが多いようなので、ちょっとこれをアップデートできないかと思っ

リンク

広大なWeb技術における地図のような本 — 現場のプロが教えるWeb制作の最新常識

この本は他にもいくつもの書籍やイベントの監修等も行っている株式会社まぼろしのみなさんに監修を行ってもらってますんで、お墨付きを頂いているという感じですね！私はこの執筆陣の4人のうちの一人として参加していますが、やはり他のメンバーの書いてくれたページもすばらしいもので、なんなら自分の担当ページも他の人が書いているバージョンを見てみたいとさえ思ったりもするくらいです。そのくらい、気になるトピックばかりで構成されている本です。で、この本については発売されて半月経っているわけで、既に読んでレビュー等書いてくれている方もいます。なのでこの記事では執筆陣側の一人としてどのような人に読んでほしいか、どのように読んでほしいかを解説したいと思います。この本の主な内容この本の内容は、デザイン・レイアウトマルチデバイス対応 HTML・CSS・JavaScript サイト構築・管理・運用という風に分

atsushi1972 2014/02/20

広大なWeb技術における地図のような本 — 現場のプロが教えるWeb制作の最新常識先日、共著で「現場のプロが教えるWeb制作の最新常識」という本を書きました！どんな人にお勧めするか、この本の立ち位置的なことを解説さ

リンク

[レビュー]HTML5マークアップ現場で使える最短攻略ガイド — 仕様を解説する先生のような本

はましゅんさんはについては私が以前からWebでのASCIIの連載をよく読んでいて、縁があって話をさせてもらうことが出来たんですが…その後私もレビュアーの一人としてこの本の制作に関わらせて頂くことになったわけです。レビュアーにはこちらも以前からWebサイトを見ていてお世話になってきていたピクセルグリッドのよもつさん(@yomotsu)さん、HTML5jマークアップ部の活動でもお世話になっているやくらさん(@myakura)さんといったメンバーと一緒のこの作業をするわけで…私としてはすっごいテンションの上がる仕事でしたねー。今回は出版元のアスキー・メディアワークス様からこの本を頂きました。担当の小橋川さんに心よりお礼申し上げます。では、制作に関わったため熟読している私からこの本の特徴をレビューさせて頂きます★ 内容この本の内容は以下のようになっています。 [導入編]これだけは押さえたい

atsushi1972 2013/12/26

HTML5マークアップ現場で使える最短攻略ガイド — 仕様を解説する先生のような本「HTML5マークアップ現場で使える最短攻略ガイド」が発売されました。HTML5KARUTAの配布版が付録についている、ぜひ手に取ってほしい本です

レビュー

リンク

都会的なインテリ紳士フォント「Bank Gothic」 #LOVEFONT

知らない人のために！ #LOVEFONTとは？ 2013年のアドベントカレンダーの主戦場と主なテーマまとめ(参加しようぜ！)で解説したアドベントカレンダーですが、この記事はそのうち#LOVEFONT Advent Calendar 2013というものの1記事目になります。まあちょっと、書く時間がなくて日付をまたいでしまったんですが…。この記事以降の記事についても、ここから見ることができます★ Bank Gothicというフォントさて、私が今回紹介するのはBank Gothicです。このフォントも前回紹介したCopperplate Gothicと同じように頻繁に街で目にすることができるフォントで、わりとメジャーなんじゃないかなーと思います。似たフォントもいくつかあるんですけど、それらとの違いは後述しますね。なんだっけあれ、このフォント、知ってる。小さいほうはBank Gothic。大

atsushi1972 2013/12/06

都会的なインテリ紳士フォント「Bank Gothic」 #LOVEFONT 2013年のアドベントカレンダーの主戦場と主なテーマまとめ(参加しようぜ！) – WEBCRE8. [] via Pocket December 06, 2013 at 05:23PM

リンク

[webサービス]今月のwebコンテンツまとめ(2013年10月)

細かい性質などは気にせず、webで完結する、遊びやコミュニケーション、便利なサービス、ツールなどを集めています。必ずしも私自身が使える、と思ったものとは限りませんが、まずはこうして存在を知ってもらうこと、私自身の学習のためまとめています。基本的に日本語で利用できるもの限定です。iPhoneアプリ等のモバイル端末専用サービスは今のところチェックから外しています。 2013年10月のwebサービス総括えー飛び飛びになってしまってるサービス紹介ですが、ちょっと調査不足で申し訳ないところ。でも過去3ヶ月分も一応調べるだけは調べてあるので、そのうち思い出したように記事化しますね。さて今月のWebサービスに関する大きなトピックといえば、Yahooの展開するショッピング＆オークションサービスであるヤフオクとヤフーショッピングの出店無料化です。これまでは出品、そして5000円以上の入札には有料のプレ

atsushi1972 2013/10/28

今月のwebコンテンツまとめ(2013年10月) この記事は約15分ぐらいで読めます 2013年10月28日まとめる 2013年10月 Webサービス Web全般まとめ細かい分類にはこだわらず、2013年10月にリリース、または新機能や宣伝などによって話題

webサービス

リンク

[Web全般]昨晩ソーシャルツール「Buffer」がハッキングされてた

たまたま現象を目の当たりにしてなんかすごい驚いたので一応書いてみました。 Hi all. So sorry, it looks like we've been compromised. Temporarily pausing all posts as we investigate. We'll update ASAP. — Buffer (@buffer) October 26, 2013 昨晩深夜(これを書いてる時点ではついさっきなんですけど)、私のFacebookのタイムラインにフルーツがどうとか、ダイエットが何だという投稿がブワーッと流れてきました。お、みんなフェイスブックでなんか踏んじゃったのかとか思いましたけど、なんかあんまりそういうミスしなさそうな人ばっかりだったのでおかしいな～と思ったんですよね。よく見ると全部Bufferという連携サービスから投稿されているようなので、こ

atsushi1972 2013/10/27

昨晩ソーシャルツール「Buffer」がハッキングされてた Hi all. So sorry, it looks like we've been compromised. Temporarily pausing all posts as we investigate. We'll update ASAP. [] via Pocket October 27, 2013 at 04:29PM

Web全般

リンク

[Webサービス]Amazonの欲しいものリストで送ってもらえるもの

小ネタです。Amazonには自分の買いたい物を管理しておく欲しいものリストという機能があるのですが、それを使ってWeb上でプレゼントもらったりできるんですねー。先日私誕生日だったんですけど、前から「誕生日のときに欲しいものリストを公開してプレゼントを送ってもらう」っていうのをやってみたくて、ちょうどいいのでやってみました。 Amazon.co.jp – ほしい物リスト本来は自分のそのうち買いたいものを登録しておいて「後で買う」的に使うものなんでしょうけど、それを利用して、住所を知らない相手ともWeb上で贈り物を送り合うことができたりします。それでなくても例えば誕生日プレゼントって、あげたいけど何をあげたいか困るっていうときもありますよね。そういうときの参考として見るって使い方は便利だと思います。SNSのプロフィールページに貼っておけば非常に便利そう。なんかください！って言ってたらい

atsushi1972 2013/08/30

Amazonの欲しいものリストで送ってもらえるもの先日私誕生日だったんですけど、前から「誕生日のときに欲しいものリストを公開してプレゼントを送ってもらう」っていうのをやってみたくて、ちょうどいいのでやってみ

Webサービス

リンク

[ブログ]約物は言語のマークアップ。約物や記号のルールを決める

考える。 WEBCRE8.jpによるweb制作やデザインについての考察を書き綴っていくカテゴリです。この記事はほぼ自分の為の記事です。後でルールについて戸惑ったときに読み返すように書きました。常々思うんですよね、文章を書いていて。鍵括弧は発言を表し、二重鍵括弧は発言中の発言を表します。括弧は補足を表します…あれ？これ何かに似てない？そうだ HTML だ！！「文書を正しくマークアップするのならそれ以前に文法が整っていなければならない」というわけで、今回は正しい HTML を書くための下準備に、という視点で文章を書く時の正しい約物の使い方ってのを考えてみました。ただ、マークアップと同じで文章の書き方もニュアンスによって正しさに違いが生まれることがあると思います。なのでこれは押しつけるわけではなくて、単にルールを文章内で統一しようという程度の話です。自分とやり方が違う、解釈が間違って

atsushi1972 2013/06/25

約物は言語のマークアップ。約物や記号のルールを決める文章を書くとき、適当に書いていると後で「これはどういう意味で書いてるの？」となったり HTML でマークアップするときに戸惑ったりします。はっきりとルール

ブログ

リンク

[web制作]humans.txt ― webサイトに基本情報を設置しよう

robots.txtとは robots.txtは、検索エンジン向けの情報を記述したテキストファイルで、書式に従って書くことで検索エンジンのクローラーにクロールして欲しくないページを知らせたりします。というか、まあ基本的に出来ることはそれのみですね。例えば、 User-Agent: * Disallow: / こうrobots.txtに書くとルート以下全てのファイルへのクロールを禁止します。決められた書式があって、それに沿った形で書かれていればクローラーはある程度いう事を聞きます。 humans.txtとは robots.txtがロボットの為の説明であるなら、humans.txtは人間の為の説明です。人間がサイトについて受け取りたい情報としては誰が書いたのか、何を使って書かれたのか、というようなことでしょうか。そしてこのhumans.txtを設置する事を推奨するサイトもあり、面白いなーと

atsushi1972 2013/05/28

humans.txt ― webサイトに基本情報を設置しよう検索エンジンのクローラー向けの情報としてrobots.txtというものを設置することがありますが、それに対抗して？人間向けの情報を書くhumans.txtというものがあります。 robots.txtと

web制作

リンク

[web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した

最初に定義をしておくと、可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。これらにおいて可能な限り優れたものを作ることが、コンテンツと、それを届けようとする各セクションに関わる人が考えるべきことだという事になります。可読性とコンテンツまず、何はなくともコンテンツです。文章が読み易いものであることを可読性が高いという言い方をするのは聞いたことがあるかと思います。そのうち、コンテンツ自体が読み易い内容であるかどうかをリーダビリティー(readability)と言います。リーダビリティーに関わってくるのは文章量図版率内容表現、言葉遣いといったものです。コンテンツを作る人は、自分の書いている文章の長さ、文字と図の割合、内容、表現の複雑さ等を届ける相手に適したバランスにしなければいけません。可読性の低いコンテンツ