いまだにgitがよくわかってない。 git push すると $ git push To git@github.com:snaka/snaka-code-pocket.git ! [rejected] master -> master (non-fast forward) error: failed to push some refs to 'git@github.com:snaka/snaka-code-pocket.git' To prevent you from losing history, non-fast-forward updates were rejected Merge the remote changes before pushing again. See the 'non-fast forward' section of 'git push --help' for d

Armed with a 96-box of Crayola’s and some imagination, I gave the app a try. Unbelievably Simple Did you know they have colored metallic crayons? I sure didn’t. Out of the crayon game for a while now, picking the colors for the plane picture I colored for our test was an exceptionally difficult proposition, also the hardest part of using the colAR app. You need colAR's special coloring pages, whic

FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

想像をはるかに超えていた…中国でサラダバーが廃止になった理由がよくわかる写真いろいろ サラダをビュッフェスタイル（バイキング形式）で提供するサラダバー。 中国のピザハットでは、サラダバーを食べ放題にすると限界まで大量のサラダを食べられてしまうことから1回限りの制限を設けていましたが、それすらも赤字だとして数年前に廃止されたそうです。 それだけ聞くと、「なぜ1回限りの盛り付けなのに赤字になるの？」という疑問が浮かぶのではないでしょうか。 その理由が一目瞭然の写真をご覧ください。 1. うぇっ!? 2. なにこれ…、知ってるサラダバーと違う……。 3. どうも中国の市民は、「1皿に1回までしか盛り付けられないルールなら、限界まで積み上げればお徳じゃないか」という考えに至ったようです。 4. もはやお皿が見えてないし……。 5. このサラダタワーが流行ったことから、赤字回避のため2009年にサラ

Googleは、「Google Glass」ユーザーに大きな問題を与える恐れのあったセキュリティ脆弱性をパッチによって修正していた。 Lookout Securityは5月、Google Glassの脆弱性を発見した。ハッカーがこれを利用することにより、Google Glassで一度スキャンすると、Google Glassに搭載されたコンピュータを介したすべての接続が参照できる恐れのあるQRコードを作成できる可能性があった。さらにハッカーがインターネットを介してペイロードを配信し、Google Glassに大きな被害を与え、情報を盗むことができる恐れもあった。 Google Glassに接続するという目的のため、QRコードはハッカーがGoogle Glassを遠隔制御できるアクセスポイントへとユーザーを誘導する恐れがあった。 Lookout Securityは、米国時間7月17日にYouT

Baseliner Looking for an easy way to overlay a baseline grid on any webpage? Baseliner is a JavaScript tool that can do just that. How do I use it? The easiest way to use baseliner is the Baseliner bookmarklet, which always loads the latest code. If you prefer a custom baseline grid can be created directly: <script src="http://files.keyes.ie/things/baseliner/baseliner-latest.min.js"> </script> <sc

特定のときだけ、テンプレートを切り替えたい。そんなことを考えていたある日 コードをよんでたら、フックがみつかったのでメモ。 今回は、jqueryの$.ajaxで呼ばれたときは、ajax-xxx.phpが呼ばれるようにしてみました。 add_filter("template_include", "test_template"); // $templateには読み込むテンプレートのパスが来ます function test_template($template){ // jqueryからのXMLHttpRequestでない場合なんもしない if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') { return $template; } if(st

こんにちは。子煩悩ライターのイワタテです。 娘、と書くより、愛娘、と書いた方がしっくり来るんです。 きっと、愛しているからでしょうね。 ところで、ライターという職種に限らず、仕事で文章を書くすべてのみなさん。 原稿、自信をもって出していますか？ 僕は、自信をもって出しています。 その秘密は、原稿提出直前に必ず使う、15項目のセルフチェックシートです。 このチェックシートを活用するようになってからというもの、クライアントの機嫌は良くなるし、読者からのレスポンスが見違えたし、みるみる仕事が増えていくし……父ちゃんやったぜ愛娘！ 原稿送信のボタンを押すときはいつも不安になるという方。 よろしければこのチェックシート、印刷して机のどこかに貼って、使ってみてください。 □ 原稿の結論がタイトルに明記されているか。 何が書いてある原稿か直感的に理解できなければ、そもそも読者はページを開かない。 □ 想

いいですよね。テレサ・テン。 こんばんは。小林です。 さて、突然ですが、みなさん。フォーム作ってますか？ このブログを見てくださってるということは、今まで作ったフォームの数を覚えていないくらい作ったことがおありかと思います。 そうでない皆様にご説明致しますと、お問い合わせ的なあれです。 そう、インターネッツでよく見かけるあれです。 ガンプラ作りながらネットサーフィンしてるとよく見かけると思うんです。 こんな感じのやつです。 どれか一つ選びましょうってやつですね。 で、これ、選択する際は文字の部分を押下しますよね？ 押しやすいですもんね。 ところが、 iPad、というかiOSのバージョン5（恐らくバージョン5以前）だと、文字の部分をタップしても選択できないのです。 丸い部分をタップすればいいんですが、あんな小さい丸なんてタップできませんよね。 困りました…。 半ば諦めかけていたところ、デザイ

display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ

こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。 輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀) 気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。 Compassを使って書き出したスプライト画像を自動でRetina対応にさせる スプライト画像の生成 $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); まずはスプライト画像を生成します。 単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。 sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。 Mixinを記述する @mixin sprite-

こんにちわ。 子供の出産予定日を過ぎているので、毎日お腹に応援歌を歌ってるADの野田です。 前回書かせていただきましたデザイナー募集の記事では、 一切笑いのない記事となり大変申し訳ございませんでした。 してやったりだったので、ドSな僕としてはちょっと快感でした。 今回、cssを使っていて私自身が「へぇー」となったものを記憶をたどってご紹介させていただきます。 常に、新しい技術等をチェックしているつもりですが、 日々の業務との葛藤で、つい情報を見逃してしまうこともございます。 そんな方は、今回の記事を見て「へぇー」っと、なっていただけると嬉しいです。 知らなくても恥ではないので、これを期に使ってみましょう。 なお、今回は単純に「こんなの出来るんだ」ということを知ってほしいだけなので、 対応のブラウザやバージョンは記載していません。 ご了承ください。 文字は透過せず、背景のみを透過する これは

Compassでスプライト画象を高速に書き出す方法 CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。 以下のままですとすごく時間がかかるのですが、 $sprites: sprite-map("sprites/*.png"); @mixin sprite-background($name) { background-image: sprite-url($sprites); background-repeat: no-repeat; display: block; height: image-height(sprite-file($sprites, $name)) / 2; width: image-width(sprite-file($sprites, $name)) / 2; $ypos: round(nth(sprite-position($spri

こんにちは、先日の3連休ほとんど引きこもってDVDで映画を見漁っていた小林です。 唯一出かけたといえば、アミューズメント施設であるウェアハウス川崎店（公式サイトはこちら）に行ってきました。 実はここ、100年もの間香港に存在した魔窟といわれた九龍城砦をモチーフに建てられていて、ネットでも反響呼んでいる巨大アミューズメント施設なのです。 何がすごいかというとその圧倒的なクオリティです!!!! 行ったのが夜だった上、店内は撮影禁止ということで写真は撮っていないのですが、建設を手がけた会社のサイトや取材したサイトがあるので是非ご覧下さい。 ↑こちらは本物の九龍城砦の外観です。ここに約33,000人が住んでいたといいます。 店内どうですか？スゴくないですか？？一体どんだけ手間をかけているのやら… 好きな映画No.1が香港ノワール「男たちの挽歌」の僕は感動もひとしおでした…。 トイレとか本当にすごか

こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、

おはようございます。お久しぶりです。GWもあっという間に終わり…いつもの忙しい日常が帰ってきましたね…。これから梅雨という少し憂鬱な季節がやって参りますが、適度にゆるーく乗り切りましょう！ 今日は行間についての記事です。Webでは、行間のとり方ひとつで読みやすさが全く変わります。ですので、文章を配置する際は、それぞれのフォントサイズに適正な行間を与えてあげることが重要となってきます。 一般的な行間のとり方 一般的には、文字が小さいほど行間を広くとるのが読みやすく、逆に大きな文字は行間が狭くても読みやすいと言われています。それには、下記のような理由が挙げられます。 小さい文字の時に行間が狭いと、一度に複数の行が視界に入ってきてしまうため、とても読みづらくなります。 大きい文字の場合は、文字そのものが大きいので視界に入る行は比較的少なくなります。 そのため、多少行間が狭くても読みやすさに問題は

Users A powerful, free design tool Whether you are an illustrator, designer, web designer or just someone who needs to create some vector imagery, Inkscape is for you! Flexible drawing tools Broad file format compatibility Powerful text tool Bezier and spiro curves Want to find out more about how Inkscape can help you? Look at the full set of features or try it! Contributors Join our thriving comm

ちょっと便利そうだったので備忘録。テキストが長いコンテンツをコンパクト化するスクリプトです。方法はいろいろありますけど、こちらは高さ指定という点がシンプルで良かったです。 「続きを読む」リンクを挿入できる、というもの。先発スクリプトは文字数の指定が殆どですが、こちらはボックスの高さを指定するタイプになります。 動作サンプル 続きを読む、のリンクが加わっていますが、特に要素を追加する必要が無いので既存コンテンツに導入しやすそう。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="readmore.min.js"></script>本体とプラグインを読み込みます。 $('article').readmore({ maxHeight: 110 })

「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか？ SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。 SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが（そういうのが不要と言っているわけではないですよ）、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。 後編はこちら 免責事項的な SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、

画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。 オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。 いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。 見た方が早いですかね。公式デモです。 Demo デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。 IEでも動く。 iPhoneでも動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jq

ちょっと適切なタイトルが思い浮かばな かったのですが、指定した要素を沢山 配置してアニメーションでランダムで 移動させる、というjQueryプラグイン。 デモでは、よく見かけるパーティクルで 作成したホタルっぽいエフェクトを用意 しています。 タイトルじゃ良く分からないと思いますのでデモをご覧下さい。 itsfireflyで使われているエフェクトのオマージュみたいですね。ホタルっぽいエフェクトです。 Canvasとかじゃなくて、画像を直に指定してランダム表示させてアニメーションで動かすプラグイン、みたいな感じ。cssのpositonとz-indexで背景化しています。画像を変えれば違った表現も出来ますねー。プラグインも軽量です。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquer

T-y-p-o-g-r-a-p-h-y タイポグラフィを語るちょっとしたニメーション｢From Paper to Screen｣は、グラフィックデザイナーのThibault de Fournasさんの作品。紙のタイポグラフィからフィルムでのタイポグラフィ。 紙では物語を語り、フィルムでは初めと終わりを飾る、それがタイポグラフィ。 ［Thibault de Fournas via Design TAXI］ そうこ（CASEY CHAN 米版）

もうウェブの知識なんて特に必要ないみたい。サクッとかっこいいウェブサイトがつくれる「Squarespace」。”Build a website”っていう超シンプルなタグラインもいい。TIMEで、50 Best Websites 2012にも選ばれてる。 Squarespaceのローンチは2004年とだいぶ前。ウェブの知識がなくてもテンプレートを選んだり、ドラッグ＆ドロップするだけで自分の理想のウェブサイトがつくれちゃう。ビジュアルのうつくしさは文句なしかな。これまでに180万以上のウェブサイトをホストしてる。8ドル〜の月額費用がかかるけれど、これだけ多くの個人や法人がSquarespaceを活用してることになる。 ブログやSNS連携はもちろんのこと、コマース機能も完備。もちろんスマホやタブレット表示にも対応。14日間のフリートライアルがあるから、気になる人はお試しあれ。 TechDollも

本日、Google の Gmail チームから Gmail の受信トレイが新しくなりました！　というメールが届きました。 何が新しくなったのかな？　とメール内容を確認してみると、受信トレイのタブが新しくなったようです。 届いたメールが自動で 5 個のオプションのタブにカテゴリ分けされ、同じ種類のメールをまとめて読むことが出来るようになりました。 Gmail 新しい受信トレイ のタブ機能 Meet Gmail’s New Inbox – YouTube Google 公式のGmail に追加された機能の紹介動画です。届いたメールが自動でタグ分けされる様子がわかります。 新しい受信トレイによって、届いたメールは5 個のオプションのタブ（メイン、ソーシャル、プロモーション、新着、フォーラム）に自動で分けられます。タブを選択することでそれぞれのカテゴリに分けられたメールを読むことができます。 私の

普段は主にWebフロントエンドを担当しているライターの内藤です。 下記の記事にインスピレーションを頂きましたので、美しいだけではない”優れている”と思われるWebデザインについて、要点を簡単にまとめてみようと思います。 僕は普段実装をやっていて、カンプが届いて「これをコーディングしてください！」っていうお仕事がほとんどなのですが、カンプによってはコーディングしやすいものからデザイナーさんに殺意を覚えるものまで色々あります。 デザイナーからコーダーへ直接デザインが回ることもあれば、間にディレクターが入ることもあると思います。 美しい・きれいなデザインであればあるほど、フロントエンド組も、よし、やってやろうじゃないか！と気合いが入るのは事実です。 けれども、美しいだけでなく”優れた”デザインであれば、以下の様なメリットがあります。 コーディングが楽になるのでフロントエンド組に優しい 下流工程の

ちなみにナマズはこんな方法があるみたいだよ。なぜ木に張り付けてるのか、魚イーターじゃないパルモにはちょっとよくわからないんだけども、説明できるおともだちはいるかな？