HTMLで直接記述できない文字実体参照をオシャレに教えてくれるサイト、HTML Symbol Codes and Entities — HTML Arrowsがめっちゃ便利だったのでご紹介。 文字参照とは、半角の不等号記号（<や>）などのhtmlでは直接記述できない記号などを表示するために記述するコードのことです。 その文字参照を一覧から探せるサイトな訳です（検索も出来ます）。 目的の記号を見つけてクリックすればこんな感じ。 ﾜｰｵ、例までついてて分かり易いじゃないの。 カテゴリ分けもされてて非常に見やすい！ 文字参照は特段しょっちゅう使うものでもないのですが、こうやって見やすいサイトがあると非常に便利です:) お試しあれ。 HTML Symbol Codes and Entities — HTML Arrows

その書き方、古くなぁ～い？なくなくなくなくなくなくなぁ〜い？ そんなわけで、先日発売になりました書籍現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4一冊ご恵贈頂きました。 最新のコーディング事情を知りたい、またはHTML + CSSコーディングの上級者を目指すのであれば絶対におさえておくべき一冊です！ 書籍の紹介 近年のWebコーディングはスマートフォンをはじめとする対応デバイスが劇的に増えたことから、非常に手間のかかる工程になりました。検証や最適化まで含めたすべてを手作業でこなすのは無理が生じてきており、さまざまな制作支援ツールやフレームワークを活用しながら進めるなど、従来のワークフローから大きく変化を遂げています。 本書ではこのような“モダン”なHTML＋CSSコーディングのあり方と、作業の効率化＆適正化を図る手法・技術・ツールを網羅的

メモ書きやらブログの下書きにMarkdownを使い始めたわけなんですが、まぁこれが快適でして。さっくり下書きできて後で簡単にhtmlに起こせると言うのが嬉しいです。学習コストも大した事ないし。 Markdown使うためにMac、iPhone、iPadに導入したエディタアプリ で、↑の記事ではMacでMarkdownを書く時にMouを利用し、ときたまSublime Textを使っていると書いたのですがメインエディタをやっぱりST2にしました。 キャレットが増やせなかったり、やっぱりビジュアルが我慢できなかったり、Mouを使ってると「もう〜」ってなる瞬間が多かったので。Mouだけに。Mouと感嘆詞の「もう〜」がかかってます。すごい。 そんなわけで今回はSublime TextでMarkdownを快適に書くために導入したプラグインと設定を書いておこうかと思います。（なお、私の環境はMac + S

Cinemagram – create fun, short videos. アプリを開くと簡単なチュートリアルが。 仕組みとしては、まず短い動画を撮影→アニメーションにする部分を選択→書き出し、と言う感じ。って言うかそれだけ。 渋谷のスクランブル交差点で実際にやってみました。まずは2秒ほどの動画を撮影します。手ブレしないように注意。 すると、自動でアプリが動いている部分を判断して勝手にシネマグラフを作ってくれます。エフェクトを加えれば取りあえず完成しちゃいます。 これでも十分凄いのですが、動いている部分を調整したい時は「EDIT」をタップしましょう。 こちらがマスクの編集画面。適宜、画像の動かしたい部分にマスクをかけてあげましょう。マスク部分は黒く半透明で表示されます。 一番右「loop」をオンにすると、逆再生の動画を付け加えたgif画像が作成されます:) PLAYボタンで画像のできを確

コードのスニペット管理にSnippiを利用していたのですが、何故かTwitterアカウント連携ができなくなってしまい、こつこつ貯めていたコードが見られなくなってしまいました。 バックアップでNotefileに取ってあったため事なきは得たのですが、コードスニペット管理の方法としてはいかんせん使いにくい。 なんかいい方法あんめえかと思って探したところ、GitHubアカウントがあれば無料で使用できるスニペット管理ツールGistBoxが良さげだったので試してみたところ非常に快適でしたのでシェア。 参考：GistをメーラーのようなUIで管理する「GistBox」がいい感じ | REFLECTDESIGN メーラーのようなUI 使用はGistBoxでログインするか、Chromeアプリから。UIは一緒です。 私はChromeアプリを使用することにしました。 GistBox – Chrome ウェブストア

なんのかんのでメインブラウザをChromeにして久しいのですが、増えすぎて整理が追いつかず悩みの種だったブックマークをめちゃくちゃ使いやすくしてくれる拡張機能DEWEYを導入してみました。タグ付けめっちゃ捗るんですけど！！ これはオススメだ！ DLはこちら：Dewey. Better bookmarks for Google Chrome™ Chromeのブックマークに「タグ付け」 この拡張機能は@Jacminik さんのツイートで知りました。ｱｻﾞﾏｽ！！ﾊﾖｻﾞｲﾏｽ！！！ 今までずっと求めていたブックマークをタグで管理／検索出来る機能拡張がついに出た！ [Link] Dewey. Better bookmarks for Google Chrome™ : http://t.co/XXtHz3H7Ag — masahiro k. (+Beans) (@Jacminik) 2014, 2

なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が

このアプリを制作した株式会社ナナメウエさんは、以前ご紹介した撮影した写真にケンタウロスが写り込むiPhoneアプリ「Kenstagram」をリリースされております。 今回SlideStoryリリースのお知らせを頂き、 「あぁ、あのちょっとぶっ飛んじゃってる開発元か」との第一感を抱いたのですが、実際ダウンロードしてみたらすごく良いアプリでした。 使い方 まずは起動画面。右上のボタンをタップして動画を作成します。 するとアプリのチュートリアルがでてきますので確認しておきましょう。 とは言え使い方は非常に簡単。カメラロールより写真をタップしてボード上に追加→フィルターを選択→音楽を選択→エンディング画面を選択→動画が作成される、という流れとなっております。 追加する写真はカメラロールだけではなく、FacebookやInstagram、Flickrからの画像も選択可能。 ものは試しと、先日初めてど

モーションアクティビティを利用 こちらが起動画面。プロビーアクティブ。 まずはじめに、アプリを起動して30ステップ踏むことによりログが開始されます。このスクショを撮った際は松屋にいたところだったので無我夢中で振りました。我を忘れて振りました。 準備完了！歩数などの目標値を設定することもできるようです。 Facebookと連携すると名前などが自動で入力されます:) さぁそれでは内容を見ていきましょう！ …！これは…！ 画面を切り替えると、自動で取り込まれていく過去一週間分のログ。iPhone 5sの新機能、モーションアクティビティによって過去のステップ数が記録されているのです。嗚呼素晴らしき哉モーションアクティビティ。 それにしてもこのデザイン好きです。iPhoneの傾きに連動したお水。芸が細かい。 ARGUSでは上記の種類のログを記録する事ができます。睡眠記録はアプリ「Sleep Time

これまで画像ファイルを一括で圧縮する際にはPhotoshopのアクションを使用していたのですが、業務で画像ファイルを100枚ほどリサイズしなければならない状況に。 そんなことのためにPhotoshop起動するのもあれだなと思い調べたところ、Macで画像をリサイズするならこれが最強！無料で機能豊富なTh-MakerXがありがたすぎる！ | iPhone持って珍スポいてくると言う記事を発見。 サンキュー斉藤！ Th-MakerX こちらが起動画面。と言っても難しい操作は一切ございません。 圧縮するサイズを指定して、フォルダをウィンドウ内にドラッグアンドドロップするだけ。 試しにこんなフォルダを… ご覧の設定でリサイズしてみました。 なにこれﾁｮｰ簡単！あっさりとリサイズ完了。 有り難いな、と思ったのは横長の写真は横幅を設定した長さに、縦長の写真は縦幅を設定した数値に変換してくれるところ。他にも

TwitterやFacebook、RSSなど数多のWebサービスを連携させる「レシピ」を作ることで、様々な操作を自動化するWebサービス「IFTTT」。 そのiPhoneアプリが登場し各所で話題になっております。例に漏れず私もDLしたわけなんですが、iPhone系ブロガーなら導入しておくべきすんばらしいレシピを発見しましたのでご紹介。 撮ったスクリーンショットをDropboxへ そのレシピとは、iPhoneで撮影したスクリーンショットのみをDropboxへと送信してくれるというもの。 IFTTTの素晴らしいところは他人が作ったレシピを自分も使えると言うところですよねー。今回のものもどなたかが作ったものを拝借しております。 Recipesの左上にあるメガネのアイコンをタップすると他の人が作成した様々なレシピを閲覧できます。ここをタップ。 その中にあります「Add my iPhone scre