エンジニアのための職務経歴書の書き方の参考に。 Webな人の転職支援サービス【mixi agent】https://mixi-agent.jp/guide/resume/01.html SE(システムエンジニア)の職務経 […]
地味に便利そうだったのでご紹介。 Social Media Image Makerを使うと、facebookやtwitterなどのアイコン画像画像を自動生成してくれます。 自分で画像を作る際のサイズ確認にも使えて非常に便利! 対応しているソーシャルメディア facebook twitter Youtube Google + Flickr Vimeo Pinterest Skype Tumblr LinkedIn Slideshare Foursquare About.me 実際に使ってみた 画像の切り抜きだけでなく、回転やフィルタをかける事でインスタグラムのような素敵な写真にすることが出来ますよ。 興味のある方は下のリンクからどうぞ! Social Media Image Maker
みなさんはコーディング規約を利用していますか。 個人で開発している時はオレオレルールで良かったのですが、 複数人で開発するようになると共通のルールがあった方がストレス無く開発が出来るようになります。 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
スクロールによるパララックス効果を実装できるjQueryプラグイン「scrolldeck」 スクロールすると、画像やテキスト、その他色々な要素がアニメーションするWebデザインを最近良く見かけます。 パララックス(視差効果)や細かなアニメーションするものまで、様々なものがあると思いますが、 本日紹介する「scrolldeck」を使用するとパララックス効果を簡単に実装できるようになります。 パララックスがどんなものか分からない方のために先にプラグインのデモリンクを貼っておきます。 デモ1 デモ2 デモ3 スクロールで画像がずれて行く感じがたまらないですね。 使い方 プラグインを初期化します。 $(document).ready(function() { var deck = new $.scrolldeck(); }); オプション設定をする場合 $(document).ready(func
「Noty」はダイアログの表示が出来るjQueryプラグインです。 通知は、上下、中央、左上または右上に配置することができます。 テキスト、アニメーション、速度、ボタンをカスタマイズするためのAPIが数多く用意されており、詳細なオプション指定が可能です。 使い方 jQueryと必要なライブラリを読込ます。 <script type="text/javascript" src="query.min.js"></script> <script type="text/javascript" src="js/jquery.noty.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.noty.css"/> ↓以下のようにする事でアラートの表示が出来るようになります。 $('.ex1.alert').click(
最近はスマートフォン用のサイト作成をする事が多くなってきていますが、HTMLの確認を複数の実機でやるのは大変ですよね。 そんな方のために、HTMLのプレビューがiPhone/Androiで同時に確認できるMobilizerが便利そうなのでご紹介します。 実機で動作確認はできるだけやりたくない、、、。そんな時に使えそうですよ。 詳しくは以下 Mobilizerは、Adobe AIR製のアプリで、複数のモバイルデバイスを立ち上げて URLやローカルファイル(HTML、画像やFlash)のプレビューを表示できます。 ↑デバイスはiPhone 4、Palm Pre、HTC Evo、Blackberry Stormの4機種となっています。 また、プレビューした画面は右クリックから簡単にPNGにエクスポートする事も。 JavaScriptなどはどこまでエミュレートできてるのかちょっと不明な所もあります
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
いまやFirebugはWeb開発には必須の拡張機能ですが、Flashでも使いたいという方のために「FlashFirebug」という物がありました。 AS3で作れらたFlashのデバッグが、HTMLやJSをデバッグするように簡単に作業できるようになりそうです。 アドオンをインストールすると、FirebugにFlashパネルが追加され、閲覧ページ内のFlashをデバッグできるようになります。 Firebugのようなデバッグ ↑SWFにマウスオーバーした際に、HTMLのように要素を表示してくれます。 ↑YouTubeのサイトで、パラメータを操作している様子。 ↑エラーやトレースの出力ももちろん可能に。 これは開発が楽になりそうですね。 利用にはFlash Debug Playerバージョン10以上が必要との事。 ダウンロードは下のリンクからどうぞ。
「PaRSS」はRSSフィードを取得して動的に表示してくれるプラグインです。 Webサイトとは別にブログを持っている方に良さそうですね。 使い方 HTML JavaScript $("#feed").PaRSS( "http://www.your-blog.com/feed", // feed url 5, // 取得するアイテムの数 (optional) "M jS g:i a", // 日付のフォーマット (optional) true // descriptions (optional) ); 日付のフォーマットはPHPで使える形式であればほぼ使用できるようです。 見た目の変更方法 RSSは<li>タグで出力されるようですが、項目毎にclassが割り振られているようで、CSSをカスタマイズするだけで見た目の変更が可能です。 出力されるHTML ・タイトルが囲まれるタグ ・日付が囲まれ
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
操作説明など複数手順が必要な説明って言葉だけだと難しいですよね。 このプラグインを使用する事で 操作させる順番の数字アイコンを表示させたり、どこにマウスを持っていけばよいか、を簡単に伝えられるようになります。 以下は実際に使ってみた様子です。 ↑1番のアイコンが表示されるのでマウスオーバーすると説明が表示されます。 ↑2番目のアイコンにマウスオーバーした所です。 実際の動きはデモページから確認する事ができます。 サイトの左側にあるHow to…と赤字になっているメニューをクリックしてみてください。 ユーザーを誘導するマウスのアニメーション表示など便利そうです。
デザインは青、赤、緑の3種類用意されていました。 表示させたい内容で使い分けられそうですね。 本文にはHTMLも使用可能との事なので使い勝手はとても良さそうです。 使い方 コードは以下のような内容で設置可能でした。 プラグインのオプションで 表示時間、位置、アニメーションの有無、不透明度などが設定可能です。 $(document).ready(function(){ $("a.exemple").click(function(e){ e.preventDefault(); jNotify( 'Here the message !! You can write HTML code bold, italic, underline', { autoHide : true, // added in v2.0 clickOverlay : false, // added in v2.0 MinWid
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。 デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。 OSが変わっても同じ見せ方をしたい場合などに良さそうですね。 詳しくは以下 デモ 多彩なオプション機能 以下のようなオプションが設定可能です。 スクロールの方法(縦か横) スクロール量 イージング量(スクロールを停止した後の慣性の量) スクロールバーの幅と高さ マウスホイールのサポート 使い方 jQueryやjQUery.uiなどのライブラリをheadタグで読み込みます。 <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://aj
JavaScriptやActionScriptで外部のXMLを読み込む場合などにクロスドメインの制約で読み込めない場合があります。 Flashの場合は外部サイトにcrossdomain.xmlを設置してもらったりする、JavaScriptの場合はJSONPを使用するなど対応方法はありますが、全ての案件に対応可能なわけではないと思います。 そんな外部との連携でどうしようもできない時に使用したいのが今回ご紹介するSimple PHP Proxyです。 これは外部サイトのデータをPHPで取得する事によって、自ドメイン内でデータを表示する事ができるproxyシステムです。 外部サイトにアクセスする際には以下のオプションを指定できるようです。 クッキーを送信 Userエージェントを送信 GETかポストか ヘッダーを送信 使い方 使い方は簡単です。 設置したPHPファイルに「url」というクエリーを追
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。 詳しくは以下 1.右クリックを無効にする方法 右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.フォームの初期値を消す方法 検索フィールドなどに。 $(document).ready(function() { $("input.text1").val("Enter your
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く