サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ニコニコ動画
blog.verygoodtown.com
簡単にあなたの好きなアニメーションを設定することができるのがポイントです。 すごく可愛い動きをするので、是非デモをご覧ください。 WOW.js スクロールとアニメーションを組み合わせで面白いWEBサイトが出来そうですね。 興味のある方は下のリンクからダウンロードしてください。
フラットデザインのボタンを押すと、3Dのアニメーション効果をするCSSをご紹介。フォームの送信ボタンとして使えそうです。 ↑通常時のボタン ↑クリック時。ローディングバーが表示されます。 ↑完了するとチェックが表示されます。 Safariでサポートされていない擬似要素使用しているため使用には注意が必要ですが、こういった読み込み中の表示をする事で2重送信の防止に使えそうですね。 以上、フラットデザインのボタンを押すと3Dのアニメーション効果をするCSSでした。
2013年にはてなで話題になった記事やWEBサービスを 1位から50位までブクマ数順にランキングを付けてみました。 2013年はてなブックマーク数ランキング50 日本の全エンジニアに捧ぐ!現在公開されているAPI一覧【2013年版】 | Find Job ! Startup 僕がユーザーとして本当に感動したWebサービスまとめ(2013年版) – nanapi社長日記 @kensuu めっちゃ安い航空券の取り方 | Into The World 【保存版】素敵なインテリアが探せるオススメWebサイト25選 クックパッドでリアルガチで簡単にできるレシピだけ集めた【まとめ】 – はてブのまとめ mixiの新人研修トレーニングが非常にわかりやすくて実践的すぎる – Android Javascript iOS これがもうとにかく便利すぎる「トマト缶」を使った極上のレシピ – M3Q – 女性のた
ページをスクロールして行ってもずっと画面についてきて 画面に表示されるナビゲーションを作るjQueryプラグイン「stickUp」をご紹介。 ↑最初は画面の中央あたりに配置してあります。 ↑しかし、メニューよりも下にスクロールしていくと、ついてくるナビゲーションに変化 地味に使うプラグインでは無いでしょうか。 興味のある方は下のリンクからどうぞ http://lirancohen.github.io/stickUp/
本日はフラットデザインに対応したドロップダウンメニューが作れるjQueryプラグイン「EasyDropDown」をご紹介。 ↑このようなドロップダウンメニューがjsを読み込むだけで使えるようになります。
WordPressを使用したサイト構築はスピードが違いますよね。 導入するテーマもレスポンシブ対応であれば PC・スマホ対応が簡単に出来るのも特徴の一つです。 そんなWordPressを使用したサイトを作る際に使える 無料のレスポンシブ対応テーマを集めてみたのでご紹介します。
↑このようなモーダルウインドウを様々なエフェクトで表示させる事が出来ます。 デモはこちら ※デモの中にある画像の「more」を押すとモーダルウインドウが表示してください。 スマホ対応もされているとのこと。興味のある方はデモをご覧ください。
本日はCSS3だけで作るアイコン付きボタンのチュートリアル「How To Customize Your CSS Buttons With Pictogram Icons」をご紹介。 CSS3のfont-faceを使って上手にボタンを作っています。 ↑このようなボタンがCSSだけで作れるようになります。 デモはこちら 最近まで、このようなボタンは全て画像で作成してましたが CSSでも簡単に出来るものなんですね。
Google画像検索では、画像のサムネイルをクリックすると大きい画像がプレビュー表示されますよね。 CSSとjQueryを使って同じようなUIの作り方をチュートリアルでまとめた方がいましたので、興味のある方は下のリンクをクリックしてみたください!
フォームに何か文字を入力すると、指定の文字位置まで自動でスクロールしてくれるjQueryプラグイン「Mini Help System」をご紹介。 ヘルプテキストやWebアプリケーションのユーザガイドなどに使えそう。 リアルタイムに検索が出来るため、必要な情報に簡単にアクセスが可能になります。 検索した用語はハイライト表示されるためユーザビリティにも優れています。 興味のある方は下のリンクからどうぞ!
こちらもあわせてどうぞ Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs691953/verygoodtown.com/public_html/blog.verygoodtown.com/wordpress/wp-content/plugins/post-plugin-library/common_functions.php on line 174 None Found
地味に便利そうだったのでご紹介。 Social Media Image Makerを使うと、facebookやtwitterなどのアイコン画像画像を自動生成してくれます。 自分で画像を作る際のサイズ確認にも使えて非常に便利! 対応しているソーシャルメディア facebook twitter Youtube Google + Flickr Vimeo Pinterest Skype Tumblr LinkedIn Slideshare Foursquare About.me 実際に使ってみた 画像の切り抜きだけでなく、回転やフィルタをかける事でインスタグラムのような素敵な写真にすることが出来ますよ。 興味のある方は下のリンクからどうぞ! Social Media Image Maker
Amazonのドロップダウンメニューを実装できるjQueryプラグインが良さそうでしたのでご紹介。 アマゾンのメニューの特徴は高速な動きと、マウスが離れてもメニューが出たままになるのが特徴で、タブレット端末でも使いやすいように実装されています。 何故アマゾンのドロップダウンメニューは使いやすいのか? アマゾンのドロップダウンメニューが何故使いやすいのかという記事も非常に参考になります。 BREAKING DOWN AMAZON’S MEGA DROPDOWN サイトは英語ですが、まとめると ・ドロップダウンが超高速である ・ドロップダウンメニューから離れてもメニューが出ている ・ドロップダウンメニューを閉じるのをマウスカーソルの位置を見て遅延させている なるほど〜と言う感じです。GIFアニメでの解説もあるので一度見てみる事をオススメします。 このプラグインのサンプルはサイトからダウンロード
Intro.jsを使うと、サイトの紹介したい機能をハイライトで見せる事が出来るため 始めてサイトを訪れたユーザーに分かりやすく伝える事が出来るようになる。 マウスで次へ次へと移動できるしキーボードでも操作可能だ。 他のライブラリにも依存しないので、既存のサイトに簡単に組み込み可能なのも特徴。 ダウンロード、デモは下のリンクからどうぞ! Intro.js
ライトボックスは良く使われるプラグインですが、 スマホやタブレットでも同じような動きが出来るようにプラグインがありましたのでご紹介。 「Swipebox」はタッチイベントをサポートしたjQUeryプラグインです。 ギャラリーをスワイプしたりキーボードを押す事で次の写真を見る事が出来るようになります。 キャプションを表示させる事もオプションで出来ます。 興味のある方は下のリンクからどうぞ! Swipebox.
起業するに当たって、得する情報やどのような姿勢で望むべきか 、この数年自分なりに必要な情報をまとめてみましたので情報をシェア。 起業する事が目的ではなく、自分の夢や目的を達成するための起業だと思います。 得する事が出来る情報は出来るだけ有効に活用してください!
みなさんはコーディング規約を利用していますか。 個人で開発している時はオレオレルールで良かったのですが、 複数人で開発するようになると共通のルールがあった方がストレス無く開発が出来るようになります。 WEB系の言語のコーディング規約について、調べ物が必要だったので、 まとめたものをブログでもシェアします。 HTML・CSS Google HTML/CSS Style Guide の推奨ガイドラインまとめ HTML5 コーディングガイドライン(HTML5)ver1.0 JavaScript JavaScriptのいろいろなコーディングルールをまとめてみた PHP PHPのコーディング規約 PSR-0、PSR-1、PSR-2、PSR-3とは WordPress コーディング基準 Pear Manual :: 標準コーディング規約 Zend Framework PHP 標準コーディング規約 Ca
良いWEBサイトを作るために必要なものは何でしょう? それは、クライアントと制作会社の良質なコミュニケーションだと考えています。 作って終わりでは無く、結果を出す(問い合わせをもらう、社名を知ってもらう)というゴールに向かって進むためには、発注する側にも適切な対応が求められてきます。 制作会社が望むクライアント像ってどんなものだろう?という疑問を解消するために こんなクライアントは嫌だ!という人をまとめまてみました。ぜひ制作会社と良い関係を築いてください 良く居る困ったクライアント 今後はあまり関わりたくないと感じるクライアント。こんな風にはならないようにしましょう。 目的、ゴールが明確では無いため、何度も方針を変える 方針が変わるたびに、残業時間が増えています… 要望が曖昧なのに提案書を出させる 提案回数が増えたり、何度も提案させられたりする可能性があります。 ゴールが明確で無いのに、見
昨日、改めてWEBシステム開発の見積の出し方について考えてみたのですが、システム開発の際に工数単価はどうやって決めるのかと質問がありましたので ブログでもシェアします。 工数単価とは、開発スタッフが作業を1日(もしくは1時間)行ったときに発生する金額のことです。 WEBの開発においては単価を決める明確なルールが無いので それぞれの制作会社が独自の金額を設定しています。 働く人に対する報酬としての給料、外注費、経費、利益などを考慮して決める事になるのですが、いくつか決め方があるように思います。 職種ごとに単価を決める方法 作業する担当の経験やスキルではなく、職種で単価を決める方法。 例えば、WEBデザインは3万円/1日などとします。 経験者が担当しても新人が担当しても料金が変わらないのが特徴です。 実績から単価を決める方法 経験年数や扱った案件数、スキルなどにより担当者毎に単価を決める方法。
お仕事をする上で、見積もりってすごーく大事ですよね。 WEB業界はフリーランスの方も多いので、概要から見積を作成する時は人によってバラバラになりやすいです。 大規模開発をされている方であれば工数の算出方法にルールがある場合もありますが、今回は割りと小・中規模案件でWEBシステムを開発している場合を考えてみました。 出来るだけ納得できる見積を出せるように、算出の仕方について改めて考えてみます 見積もりの種類 WEB制作で見積もりを作成する場合、大きく分けると3種類あります。 超概算見積書 予算を検討する段階で、費用を把握するために依頼される見積です。 ざっくりとした金額を見積書で提出するか、口頭で金額を回答することが多いのが特徴。 プロジェクトの趣旨がはっきりしないと、見積もり額は実際の200%程度になる可能性もあります。 この段階の見積の考え方はこちらの記事が非常に良くまとめられています。
先日GMOクラウドで障害が発生しましたね。原因は台湾データセンターで火災が起きたためだそうです。 会社名にクラウドってついているのに全然クラウドじゃないよね。 と思ったのですが、 今回自分が気になったのは、CMSの画像やMySQLデータなど、 サーバ上でしか管理していないデータのバックアップの必要性です。 それも手動じゃなくて、自動で。 レンタルサーバによってはバックアップサービスを提供している場合もありますが、 sixcoreなんかは有料だったりするので、今は自分でバックアップを取っています。 ただし、バックアップが必須だからといっても、かけられる時間や手間には限りがあるので、手間と費用を抑制しつつ、自分がバックアップしている方法をシェアしたいと思います ※きちんと運用ルールができている所はすでに対応しているかと思いますが、 バックアップされていない方の参考になれば幸いです。 ファイルの
個人情報の漏えいは企業に取ってリスクの一つですが、 2011年では約628万4000人の漏えい事故が発生しています。 1日あたりに換算すると1.7万人の個人情報が流出しています。 その中にはバグやセキュリティホールから、不正アクセスによるものまで数多くありますが、 自分で作成したアプリケーションで出来る限りリスクを減らすために、どのようなチェックをすれば良いか知っている必要があると思います。 最近はWordPressやCakePHPなどのオープンソースのものを使うのが主流になっていますが、セキュリティ実装、チェックの仕方が分かっていないと 脆弱性のあるアプリケーションを作る事になってしまいます。 そこでオススメなのが、どんな攻撃をされるのかを知ること。 そのためにはWEB上の細切れの情報を読むのではなく、体型的にまとめられたものを見るのが オススメです。 PHPで開発している方は、以下の書
レスポンシブに対応したクールなカレンダーライブリーを見つけたのでご紹介。 jQueryプラグインなので、簡単に組み込む事が出来ますよ。 ↑画面のようなカレンダーを表示します。 jQeury UIのようにフォームをクリックした際に表示したりする他に、 常に表示させて置くことも簡単に出来ました。 これはかなり使えそうです。 使い方も簡単でjQueryとPickadate.jsを読み込んだ後に、以下の処理を追加するだけでした。 $('.datepicker').pickadate(); オプションがすごく豊富 オプション設定が非常に豊富で、細かな気遣いが感じられます。 ↑年と月をプルダウンで選択する事も $( '.datepicker' ).pickadate({ monthSelector: true, yearSelector: true }) ↑指定した範囲のみ選択する事も可能です。 $(
2012年に公開されたMovable Typeで使えるレスポンシブなテーマまとめです。 どなたかの参考になれば幸いです。 Rainier Media Queries (CSS) を利用したマルチデバイス対応のテーマ。 PC、スマートフォン、タブレットなどのサイズを検知して、最適なデザイン表示が可能。 また、テーマのロゴやヘッダーバナー画像、ナビゲーションの内容を簡単にカスタマイズできる機能を実装しています。 MT5.2.2からは標準搭載。 小粋空間 Movable Type(MT)テンプレート シンプルなテンプレート。ブログ用とウェブサイト用のテーマがあります。テーマはMT5.13以降に対応。 MT underHat テーマ 005 – 新着情報 新規ブログ作成時のカスタマイズ用テンプレート。 企業サイト等で、新着情報やお知らせ掲載など、ブログまでは行かない簡単な構造のベース用テーマです。
JSONデータを確認する際に皆さんどうしてますか? 今まではCocoa JSON Editorというアプリを使っていましたが、ブラウザのコンソールで見れるんですね。 コンソールでの見方 ChromeやFireBugのコンソールを表示します。 ↑ その中に()で囲んでJSONの値をいれてEnterを押します。 ↑ すると、オブジェクトが配列され見やすくなります。 便利ですね! 以上、JSONのデータをJSONエディタを使わずにコンソールで見る方法でした
WordPressでプラグインの更新情報を非表示にする方法を教えてもらったのでやり方をメモ クライアントに納品する場合に使えそうですね。 以下のコードをfunction.phpに追加するだけでOKです。 remove_action( 'load-update-core.php', 'wp_update_plugins' ); add_filter( 'pre_site_transient_update_plugins', create_function( '$a', "return null;" ) ); これだけでプラグインのアップデートが表示されなくなりました。 WPSのサイトにて知りました!感謝!
お正月の間だけコンテンツを切り替えたいという相談があったので、JavaScriptで簡単にやる方法をメモしておきます。 企業サイトで年始に”謹賀新年”という表示をしたいという相談を受けたのですが、一般的にはお休みなので更新作業は出来ないですよね。 そんな時に使えるJavaScriptをご紹介します。 更新したいコンテンツの箇所にJavaScriptを挿入すればOKです。 日付と表示するコンテンツは適時変更してください。 /*****************************************************/ //指定期間にコンテンツを切り替えるJavascript /**設定項目 ******************************************/ //----開始日 YYYY/M/D 形式 半角数字で開始日指定 myStartDate="2013/
WordPressで画像挿入時にwidthとheightを削除する必要があったのでやり方をメモ。 function.phpにコードを追加するだけで簡単に出来ました。 add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 ); add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 ); function remove_width_attribute( $html ) { $html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); return $html; } 出力されるHTML 今まではwidthとheightがあったので以下のようなHTMLが挿入されていました。 <img c
Google AnalyticsをFlashで使う方法を教える必要があったのですが、知らない人がいるかもしれないのでブログにもエントリー。 2012/12/19追記 Flash内のイベントを計測するときは、gaforflashはバージョンが古く、使わない方が良いそうです。 ExternalInterface.callを使う方法が良いとの事。 詳しくはMEANINGFREE.NETさんのブログに情報がまとまっています。 情報ありがとうございます! gaforflashというライブラリを使う事で簡単に設定が可能になります。 ライブラリをダウンロード Google Codeに公開されているライブラリをダウンロードします。 ダウンロード ↑最新バージョンは1.0.1です。 コンポーネントに追加 ダウンロードしたzipファイルを解凍後、libフォルダ内にあるanalytics.swc、analyti
次のページ
このページを最初にブックマークしてみませんか?
『Web活メモ帳 - オープンソースを使用した開発メモや、フリーウェアなどをご紹介 -』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く