[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET
[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 こんにちは、@yoheiMuneです。 フロントエンドとしてHTML,CSS,JSを中心と開発を行うことを仕事にして早くも半年が経ちました。 最近はだいぶ効率的にコーディングが出来てきたとやっと実感してきたので、ブログにも自分のコーディングスピードアップのコツを書きたいと思います！ 「こんなのよりももっと良いのあるよ」などたくさんの感じる点があるかと思います。ぜひTwitterなどで教えて頂けると助かります。 コーディングをスピードアップする６つ＋αのポイント 自分が思うにコーディングをスピードアップする最も大切なポイントは以下ではないかと思います。 めんどくさいと感じること、そして改善に動くこと 幸い自分はかなりのめんどくさがり屋で、コーディング中も「これ手動！？」「マウ
![[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d5148c26b0ae2a3585b08c6cf755d68966d223de/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F225.jpg)
WordPress サイトを静的 HTML に変換するプラグイン StaticPress - dogmap.jp
実は WordPress サイトを静的 HTML に変換するプラグイン StaticPress をリリースしていました。 ダウンロードは、WordPress 公式プラグインディレクトリからお願いします。 WordPress › StaticPress « WordPress Plugins このプラグインを使用することで WordPress で作成されたサイトを丸ごと静的ファイルに変換することができます。 また、変換時にサイトのパーマリンク構造を変換することができるため、http://wp.example.com/ というオリジナルサイトを http://www.example.com/static/ というサイトとして公開するための html を作成することも可能です。 完全に静的ファイルを作成するため、コメントやサイト内検索・コンタクトフォームの設置などはできません。 それらについては
ロイヤルティフリーな素材を色で検索できるサービス「i2clipart」 : 二十歳街道まっしぐら
i2clipartはロイヤリティーフリーのベクター画像を手に入れられるサイトです。 商用利用OKで改変なども自由です。 アイコンやイラストなどがたくさん検索できますよ。 色で検索できる機能はなかなか便利。 また、ウェブ上でサイズを調整したり加工もできたりします。 加工した画像はSVG形式、PNG形式で出力されます。 以下に使ってみた様子を載せておきます。 まず「i2clipart」にアクセスしましょう。 トップページからキーワードをいれて検索できます。 色で検索できたりします。これは便利～。 こちらがダウンロードできる画像です。 SVG形式、PNG形式でサイズを指定することも可能。 「Edit」からその画像をもとにして新たな画像を作ることもできます。 その場で改変してダウンロードできるという斬新な機能ですね。 ロイヤルティフリーの素材を探している方はぜひご活用ください。
TechCrunch | Startup and Technology News
When Alex Ewing was a kid growing up in Purcell, Oklahoma, he knew how close he was to home based on which billboards he could see out the car window.…
グラデーション生成ウィジェット実装jQueryプラグイン「GRADX」:phpspot開発日誌
GRADX | CODOLOGIC グラデーション生成ウィジェット実装jQueryプラグイン「GRADX」。 次のような若干Photoshopライクなグラデーション生成ウィジェットが実装できます ページのデザインをブラウザ上で作るような時に使えるのかもしれません 「show the code」でCSSコードをその場で出力できるのでツールとしても活用できそうです 関連エントリ 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」 文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」 jQuery用のよく使うUIコンポーネントセット「ZinoUI」
HTML5機能を色々使ったスマホ向けWebアプリを作ってみた話：前編 - webとかmacとかやってみようか R
昨日、ドコモがやっているWebアプリコンテストのノミネート作品が一般公開されました。 私も、デザイナさんと協同して作品を一つ出しました！面白かったら下記ページの いいねをお願いします！ かきまる スマートフォンを使いながらも、アナログな感触をもっと楽しんで欲しい。そういう想いで考えられた、デジタルとアナログを繋ぐお絵かきWebアプリです。 . 子供達が家の中でスマホだけをいじって遊ぶのでは無く、実際のリアルな紙と色鉛筆で本物の感触で遊んで欲しい。そのきっかけをスマホアプリで与えられないか？というモチベーションで作られました。そのあたりのコンセプトはデザイナさんのアイディア。私は主にその実装担当です。 そういう狙いはあるのですが、簡単に言ってしまえば紙芝居形式で動物の絵を表示して、それをお手本に絵を描く、という至ってシンプルなアプリです。 何も考えずに作れば、複数のWebページを遷移する単な
[HTML5 入門]本文における画像の設置の簡単なガイドライン
img要素の解説は長い 仕様書におけるimg要素の解説は長いです。それはもう、読もうとする人を寄せ付けないレベルです。それでは一向に理解が進まないので、私なりに実際に画像を文書内に配置する場合の解説を書いてみました。あとHTML5で追加されたfigureタグの用法もわからないという人が多いですよね。今回は本文中で用いられる画像に限って解説します。 文章の代わりになる画像の設置 例えばBBQに行ったとして、その時の作文としてこういう一文を書いたとします。 BBQに行ってきました！場所は多摩川河川敷。この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。この日は早起きして色々準備してきました！ こうした文章の中に本文の内容として空がフレームインした画像を挿入したい場合、空の写真は本文の一部と置き換えることができます。 <p>BBQに行ってきました！場所は多摩川河川敷。<br> <img
![[HTML5 入門]本文における画像の設置の簡単なガイドライン](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
スマホアプリの忘れちゃいけない5つのテスト観点 | DevelopersIO
こんにちは！おおはしりきたけです。今日はスマホアプリの忘れちゃいけないテスト観点について書いてみたいと思います。 はじめに 前提条件として、機能要件のテストは、やっている前提です。ここでは、テストの観点で忘れがちなポイントを備忘の為にも書いておきます。もっと深いとこ掘れば色々と細かいテスト観点というのは出てきますが、まずは、以下の5点を抑えておく必要があるかなと思います。 1.オフライン スマホはオンライン/オフラインの切り替わりが頻繁に起きます。たまにオフラインだとローディングのままずっと返ってこないアプリありますよね？そういったアプリはオフラインの場合を想定していない為、タイムアウトにもならなかったりします。オフライン時のリクエストでどのような動きになるのかをしっかりと確認する必要があります。オフラインで動くところ、サーバーにリクエストを投げるのでオンラインじゃないと動かないところなど
ネーミングについて / Maka-Veli .com
アプリの名前とか、たまに逸品なモノを見かけます。（社名なんかも） 基本的にやはり覚えやすいモノは良いなと思います。 気になったのでちょっと調べてみたので書いていきます。 とにかく覚えやすく 単語と単語の組み合わせによる造語が基本的に多いと思うのですが この場合、使われる単語の意味がわかりやすいモノが良いかと思います。 また、使われる単語は２つがやはりわかりやすいかな、と。 6文字〜8文字くらいで メディアに出てくる際、ワードが長すぎると覚えにくいと思います。 というのも、長いと読まないから。 英語得意な人は覚えられるかもしれないですが、僕のように英語が致命的すぎる人間にとって10文字以上の英字は「めんどくせ」と、スルー対象になってしまいます（笑） 逆に、短すぎると見逃してしまう事も。 造語の場合、どうしても文字数は長くなりますが、なるべく皆が知っているワードを使って、短
Photoshopをより手軽に利用できるカスタムシェイプセットまとめ「25 Useful Free Photoshop Custom Shape Sets」
TOP > Photoshop > Photoshopをより手軽に利用できるカスタムシェイプセットまとめ「25 Useful Free Photoshop Custom Shape Sets」 デザイン制作にPhotoshopを利用している方も多いと思いますが、アイコンやさまざまなアイテムを制作する際には、Illustratorなどのペイントツールと組み合せて制作することも多いと思います。忙しい業務の中できるだけ制作時間は短縮していきたいもの。そんな中今回紹介するのが、Photoshopをより手軽に利用できるカスタムシェイプセットをまとめた「25 Useful Free Photoshop Custom Shape Sets」です。 Banner + Scrolls Custom Shapes by ~redheadstock on deviantART 手書き風のイラストからアイ
Twitter Bootstrapを使って短時間でWordPressテーマを作る。
Twitter Bootstrapを使って短時間でWordPressテーマを作る。 2012.11.15 | この方法お勧めです！ どうもどうも、こんにちは。WP-Limeです。 Limeって黄緑色らしいです。色決めの時に、Facebookを見ていなかったら、空いている色が無くなっていて黄緑色になってしまったということで、いやぁ、何事もタイミングですなぁと思っている派です。 さて、持ち回りで月に１回書いている、このブログですが、 １回目の記事は、 案件の価格決めをどうしているのよ？ ２回目の記事は、 IT勉強会を自分で主催するメリット・デメリットと、それらを有料or無料で開く判断。 ３回目の記事は、 支払サイト＆入金サイトについて考える。 でした。 今までは、他の執筆者とのタイミングの関係で、Web制作以外のことを書きましたが、今回初めて制作寄りのお話です。 さて、「いやぁ、今日は打ち合わ
TechCrunch | Startup and Technology News
When Alex Ewing was a kid growing up in Purcell, Oklahoma, he knew how close he was to home based on which billboards he could see out the car window.…
[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy
Google Maps Pop Easyの使い方 使い方は非常にシンプルです。 Step 1: 外部ファイル スクリプトを</body>の上あたりに、外部ファイルとして記述します。 <script type='text/javascript' src='js/jquery.modal.js'></script> <script type='text/javascript' src='js/site.js'></script> Step 2: HTML 最低限必要なHTMLの構造は、こんな感じです。 L.1がトリガー、L.2がオーバーレイ用の空div、L3-6がモーダル内のコンテンツです。 <a class="modalLink" href="#">Click Me</a> <div class="overlay"></div> <div class="modal"> <a href="#"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Loading...