この発想はなかった笑。 Vimは便利だが、カーソルキーに慣れすぎているとhjkl的な操作になかなか移行できない。 ただhjkl的な操作が出来ると作業効率が改善されることは間違いない。 そこで登場したのがVim Snakeだ。 このサイトでは上下左右のコントロールをVimのそれで行うことができる。 ゲームを楽しみながらいつのまにか操作を覚えている、という仕組みですな。なるほど。いいかもしれないですね。
![Vimの操作が練習できるスネークゲーム『VimSnake』 | 100SHIKI](https://cdn-ak-scissors.b.st-hatena.com/image/square/ba7c4dff03f1e751ec630e3908bd3cef3c9fce9b/height=288;version=1;width=512/http%3A%2F%2Fwww.100shiki.com%2Fdocs%2F201308%2F18_logo.gif)
HTMLとCSSのファイルは「page.zip」として一つのファイルで、自動ダウンロードされます。 ファイルの中身は、下記のようになりました。 HTML HTMLのスケルトンです。 必要最小限のもののみの構成です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="generator" content="Responsive Web Css (www.responsivewebcss.com)" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="Stylesheet" href="index.html.css" /> </head> <bod
通常のハッシュリンクと違い、#のすぐ後に「.」があります。これは、そのclassをもった最初の要素にリンクしています。 また、右端の「#.hello|5000」はスクロールの速度を設定しています。 リンクのパターンはさまざまなものがあり、各所に利用されています。 Arbitrary anchorsの使い方 実装は簡単で、classのリンクやスピード調整だけでなく、通常のハッシュリンクでもアニメーションでスクロールさせることができます。 Step 1: 外部ファイル head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。 Google、ウェブページの読み込み速度をアルゴリズムに取り入れたことを発表 | 海外SEO情報ブログ Googleがついに順位決定に表示速度を使い始めた(公式発表) | Web担当者Forum Google、検索順位にページ読込速度の考慮を開始 [詳
携帯端末向けページのレンダリングを高速化するためのガイドラインができたことを紹介する内容です。ガイドラインは英語ですがなかなか勉強になります。 日本語版は準備中だそうです。 最初に見える部分は1秒以内に表示する ここでは1秒以内にページ(スクロールなしで表示される部分)を見ることができる状態にすることが重要だといわれています。1秒を超えると我慢できなくなり離脱する人が増えるようです。1秒で諦めるのもちょっと短気な気もしますが、読込みは早いに越したことはないですね。 まず、3G環境では一般的にDNSルックアップ、TCP接続、HTTPリクエストにそれぞれ0.2秒かかるそうです。この辺のことはあまり詳しくないですが、とにかくこれらにかかる計0.6秒はこちらでどうしようもありません。 ですので1秒で表示しようと思うと残り0.4秒しかありません。ということで、サーバーのレスポンスとユーザー側のレンダ
エンジニアならウェブサーバーのひとつでも自腹で立てて運用すべき理由と、サーバー環境の選び方 2013-08-26 なんかスイッチが入ったので書いてみる。 目次 技術的なレイヤーは掘り下げるべきなので、ソフトウェア・エンジニアだってサーバー運用は経験すべき ウェブ系のソフトウェアエンジニアを職業としているのであれば、ウェブサーバーのひとつやふたつは自腹で立てて、実際に運用したほうがいい。 なぜかというと、技術的な仕事にはなんでもあてはまることなんだけど、技術的なレイヤーを掘り下げることには大きな意味がある。他にもやったほうがいいことは多々あるにせよ、レイヤーの掘り下げは特に重要だ。 ウェブ系ソフトウェアエンジニアであれば、仕事で使っているサーバーや言語を支えているOSレイヤーやミドルウェアのレイヤーが、どうセットアップされて、どう管理されているのか、知っているのと知っていないのでは、ソフトウ
TOP > Design > ビジネスシーンのデザイン表現に利用したいフリーベクター素材「25 Free Business and Finance Vectors」 硬めで堅実なイメージを表現することが多いビジネス系のデザインですが、内容を分かりやすく伝えるために、イラスト等のビジュアル素材を使うこともあるのではないでしょうか?今回はそんな時に参考にしたいフリーベクター素材「25 Free Business and Finance Vectors」を紹介したいと思います。 (Businessmen Graphics) 仕事をするシーンをイメージさせる素材から、金融関連の素材など、ビジネスシーンで目にすることが多いビジュアルのベクター素材がまとめられています。 詳しくは以下 ■Business Presentation – Vecteezy! – Download Free Vect
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
TOP > Design > アナログ感・レトロ感漂う スタンプデザインのブラシセット「Collection Of Free Stamp Brushes For Photoshop」 Photoshopのブラシツールを利用することによって簡単にデザインにアクセントをつけることができますが、数多くのフリーブラシから優れたブラシセットを集めるのはなかなか大変なもの。そんな中今回紹介するのは、さまざまなデザインのスタンプが表現できるPhotoshopブラシをまとめた「Collection Of Free Stamp Brushes For Photoshop」です。 (Collection Of Free Stamp Brushes For Photoshop – Designbeep) アナログ感・レトロ感漂うデザインのブラシが紹介されています。中でも気になったものをピックアップしまし
Webサイト・モバイルのUIに便利なデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」 Webサイトやモバイルサービスの開発において、UIは品質と統一感を求められる重要なもの。0から作ることもできるけれど高品質なデザインセットがあれば、迅速かつ効率的に開発を進めることができるのではないでしょうか。今回はそんなシーンに是非オススメのUIデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」を紹介したいと思います。 (45 Fresh Web And Mobile UI Kits With PSD Files For Designer | Free and Useful Online Resources for
OAuth daemonはnode/JavaScript製のオープンソース・ソフトウェア(GNU Affero General Public License)です。 OAuth.ioはフロントエンドエンジニアにとっては便利なサービスと言えますが、セキュリティ的にはOAuthの概念を覆してしまう問題があります。そこでOAuth.ioのコア部分を取り出してオープンソース化したOAuth daemonを使ってみましょう。 管理画面です。まず最初に管理者アカウントを設定します。 次にアプリケーションを作成します。複数作成が可能です。 ドメインも複数指定できます。 そしてプロバイダごとにキーの設定を行います。 例えばこんな感じです。 Tumblrなどになるとどこに設定を行うべきかのヘルプもあります。分かりやすいです。 クライアントID、シークレットを設定します。 その場で試すことができます。認証ダイ
よく、製品開発には、ユーザの意見を聞くのがとても大切だ!ユーザの意見を聞け!とよく言われる。 でも、実際にやると、いろいろな事情が入り組んできて、とても奥が深く、難しくて、訓練が必要だと思う。そこで、ああでもないこうでもないと普段考えている事を書いてみたい。 ちなみに、僕のアプリのユーザはこの記事を読むとフィードバックのパンチ力が弱まって遠慮しちゃう可能性もあるので、読まないで欲しい。もしくは、これ読んでも遠慮しないで欲しい。 NOと言うのが精神的につらい この前見た動画で、アップルのアイブさんがこんな事を言っていた。 「僕たちは素晴らしいアイデアに数えきれないほどNOと言ってきて、その却下したアイデアの数こそを誇りに思っている。」 これはアプリ開発では大切な事だと思っていて、そもそも、提案される機能やアイデアの一つ一つは合理的で納得のいくものばかり。 ただ、すべての素晴らしいアイデアを採
プラグインを極力避ける事で、WordPressの高速化を できる限り実現していたのですが、如何せんブログでネックなのが 重たい画像! とにかく、ENJILOGは画像を多用するので出来るだけ 「JPAEGmini」とかリサイズで対応しなければいけないのですが 現実問題として 面倒くさい! ついついもうメディアサイズでサイズを指定するだけになってしまう・・・ そんな僕に朗報が!(ていうか検索してただけだけど・・・) WordPressで画像をアップロードする際に自動的にリサイズする方法 これを実装したら予想以上の結果に・・・ 先に言うと、どんなに重い画像をそのままUPしても 自動で、リサイズ&圧縮(※要プラグイン)して、 これ以上ない最適な状態で表示します! photo credit: peasap via photopin cc 画像を適切に処理すれば WordPressが驚くほど高速に!!
っていうタイトルにすると炎上すると聞いたので・・・(震え声) 最近、アプリのパクリについていろいろ起きているようです。 スマホアプリ市場でパクリが横行していて凄いことになっています 「違法パクリアプリ」製造元を追う 似たような問題は前にもあったのですが(アプリ名を失念)、アプリをパクったとき「悪いパクリ方」と「良いパクリ方」があり(権利侵害と、真っ当な模倣)、その区別はちゃんとしなければならない気がします。 アイデアは著作権法では保護されない まず、大前提として、アイデアは著作権法では保護されません。 著作権法では、著作物を 思想又は感情を創作的に**表現したもの**であって、文芸、学術、美術又は音楽の範囲に属するもの とあります(著作権法 - Wikipedia)。したがって、アイデアのような思想や感情そのものは保護されません。 「釣りゲーム訴訟、グリー敗訴が確定 最高裁が上告退ける」と
はじめに JavaScript Weekly や 私がやってるJSer.infoなど、 週刊などでJavaScript等の情報について紹介するサイトがここ数年でかなり多くなりました。 詳しくはオフライン勉強会でJSer.info一周年について発表してきた | JSer.infoでも乱立するまとめサイトとして触れています。 それらのサイト、メールマガジン、ポッドキャスト等をまとめたMeta Weeklyというサイトをつくったという話です。 Meta Weeklyって何? Meta Weekly は 単純にそれらのサイトをまとめたリンク集のようなものです。 基本的にまとめているサイトは、フロントエンド、JavaScriptに関連するような生きているサイトをリストアップしています。 機能らしい機能はDaily, Weeklyなどでフィルターするぐらいしかありませんが、RSSがあるサイトなどはそれ
iPhoneからWebでHTMLのフォームから写真をアップロードしてもらったときなど、画像が回転して表示されてしまう場合があるようです。原因はExifのOrientationの値が「1」以外になっていること。 画像の向きの情報がExifに埋め込まれているけれど、ファイル自体は回転していない(=撮影した向きになっていない)ために表示がおかしくなるのです。 ブラウザーの仕様によりますが、ExifのOrientationの値を無視して、ファイルを表示しようとすると撮影した向きとは合わない表示になってしまうことになります。 解決するには、アップロードされたときにExifのOrientationを見て、サーバー側で画像を回転させてしまうのがオススメ。回転して、ExifのOrientationの値を正しい向きに補正します。 以下、PHPのimagick拡張を使った場合の例。 <?php $imagic
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く