今すぐ知っておくべき！モダンな10のWeb技術
エンジニアやデザイナー、Web担当者が今すぐ知っておくべきモダンな10のWeb技術を紹介しています。Webデザインの世界が根本的に変化し、Webサイトの構築ははるかに簡単に高い技術でできるようになりました。ぜひ覚えておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのJake Rocheleau氏によって投稿されました。
jQueryでカウント付オリジナルsnsボタンに変更するカスタマイズ
ちょこちょこ変更していたら、ある日突然SNSボタンを変更したくなったので、 カスタマイズTIPS。 何故か、カスタマイズTIPS沢山あるんですが、どれも動かない、激重になったりと、 かなり苦戦しましたので、今後の為にメモ。 オリジナルのボタンに変更するのは、割と簡単にカスタマイズ出来る様で、多くの記事を見かけました。 したい事は、 オリジナルボタンに変えて、カウンター数も出す！ ずばりこれです。 方法としては、 ：javascript ：jQuery ：PHP のどれかでAPIを取って来て、表示させる様です。 javascript&jQueryは重いし、チキンな私は、PHPを使いたかったんですが、 1度PHPで試すと、めーーーちゃくちゃ重たくなったので、中止しました。orz…。 ちょっと嫌ですが、jQueryで、やっと、動くのタイプの物を発見！と思い、コードを丸っとコピー！ とか思ってコピ
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
Web APIの基本とAndroidアプリ開発の準備
はじめに 第1回目の本稿は、Web APIの説明と、開発を行うための準備として、開発環境のインストールについて解説します。 対象読者 Androidアプリケーションの開発を始めたい方で、JavaとEclipseの基本的な知識がある方を対象とします。 Web APIとは 本連載であつかう「Web API」とはどういうものかを、まず始めに説明しましょう。 Web APIとは、ひとことで言えば、インターネット（Web）を経由して、何らかの処理を行うための、手段や決めごと（API）のことです。APIとは、Application Program Interfaceの略で、直訳すると、あるプログラムを、他のアプリケーションから利用するためのインターフェース、という意味になります。 一般的なプログラムでは、関数やサブルーチンと呼ばれるひとかたまりの処理を作成し、それをプログラム内のほかの場所から呼び出す
YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方
サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。 この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。 これを使うと自分が作ったボタンで再生や停止が出来るようになります。（他にもいろいろ出来ると思います） SWFObjectを使って動画を読み込む 動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、 APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、 このAPIがFlash Player8からしか対応してないので、この「SWFObject
Googleマップをイラストマップみたいにしたい。
サイト制作において、アクセスマップなどの地図の表示はどうしてますか？「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました（2015.7.20追記）。 まずはしっかり抑えておきたい「Google Maps APIの基本」から。 基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基本 Google マップはGoogle API キーを発
jQueryのソースコードを読むための参考サイト２０選 · DQNEO日記
古いバージョンも参考になる 最新バージョンはコードが1万行くらいあってなかなか大変です。 読み疲れたら、古いバージョンを見て気分転換しましょう。 古いバージョンは実装がシンプルなので、全体像を把握するにはよいかもしれません。 バージョン1.0 (わずか1800行。ver1.7の５分の１です) http://code.jquery.com/jquery-1.0.js バージョン1.1 (2100行) http://code.jquery.com/jquery-1.1.js バージョン1.2 (2900行) http://code.jquery.com/jquery-1.2.js バージョン1.3 (4200行) http://code.jquery.com/jquery-1.3.js バージョン1.4 (6000行。セレクタエンジンがSizzleになりました。) http://code.jq
jQuery 1.7の on() off()について調べてみた | バシャログ。
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
ウェブエンジニアのためのオンラインツールまとめ
The Web engineer's online toolboxというまとめ記事が便利そうだったので、実際に試しつつ抄訳してみました。(一部のコメントと体裁は変えています。) 目次 一覧 RequestBin httpリクエストを保存するエンドポイントを作ってくれる。 Create a RequestBin のボタンをクリックするとURLが表示されるので、そこをHTTPクライアントからたたくとRequestBin側にリクエスト内容が記録される。 ソースも公開されてるのでローカルで立ちあげることもできる。 githubのwebhookのhelpも参考にどうぞ。 Hurl httpリクエストを実行してくれる。パーマリンクも作ってくれるので、POSTリクエストもコピペで他の人と共有できる。 類似サービス: REST test test , Apigee console httpbin HTTP
[JavaScript]twitpic APIで投稿写真のサムネイルを取得する
blogaomu2.1はこの度、http://blogaomu.comに引っ越しました。最新の更新はblogaomu.comにて行なっておりますので、ブックマーク・RSS等の設定をお願い致します。 何気なくツイッターのタイムラインを見てたらtwitpic APIのversion 2 がうんたらかんたら、という話が出てきていたので、急にAPIを使って自分が投稿した画像を表示できないかなと思い試してみました。 twitpicはtwitterと連携した画像投稿サービスです。twitterのアカウントでログインし、twitpicに投稿すると画像入りのツイートとしてtwitterにも流れてきます。 http://twitpic.com twitpicのAPIドキュメントです。 http://dev.twitpic.com/docs/ 今回は自分の投稿した画像を取得したいので、users/showとい
Twitpic 等の画像投稿サービスのサムネイル画像の URL - もしかして: blog.iron's.jp
ページ URL を書き換えるだけでサムネイル画像が表示できるもの Twitpic （ドキュメント） ページ: http://twitpic.com/<image-id> サムネイル画像: http://twitpic.com/show/<size>/<image-id> <size>: “mini” or “thumb” 携帯百景 ページ: http://twitpic.com/<image-id> サムネイル画像: http://image.movapic.com/pic/<size>_<image-id>.jpeg <size>: “s” or “t” はてなフォトライフ ページ: http://f.hatena.ne.jp/<user-id>/YYYYMMDD<image-id> サムネイル画像:http://img.f.hatena.ne.jp/images/fotolife/<u
2011-02-14 - 人工無脳が作りたかった
Twitter上で画像を共有する際に、国内外問わず広く使われているtwitpicですが、公開されているAPIドキュメント上にはフルサイズ（元画像のサイズ）での画像取得用のAPIが公開されていません。これがサーバーの負荷を抑える為か、それとも元画像に近いサイズで見たいならtwitpicのサイトに来て見てね!!!というメッセージなのかは私にはわかりませんが、仕事でどうしてもフルサイズの画像が必要になったのでちょっと調べてみたところ、以下のような方法でフルサイズの画像を取得する事が出来ました。 まず、これがTwitterに良くポストされているtwitpicにアップされた画像のURL。 http://twitpic.com/3xoeo9 これがサムネイル画像取得用のAPI http://twitpic.com/show/thumb/3xoeo9 これがミニサイズの画像取得用API http://t
Twitterの色んな値をJSONで取得する方法 — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
今後必要になるだろうと思いTwitterの値の取得方法を調べてみました。 使用するのは、TwitterAPIとjQueryです。 TwitterAPIの値をみる まず、TwitterAPIの中身を覗いてみよう。 下記URLの「アカウント」に自分のIDを入れて開くと。。。 http://api.twitter.com/1/statuses/user_timeline/アカウント.json ずらっと表示さた文字がTwitterAPIの中身です。 値は全て配列になっている 文字列の嵐だがよくみてみると、配列になっている。 例えば。。。 “source”:”web”,”created_at”:”Fri Jun 18 07:28:41 +0000 2010″ はwebでツイートしてその時間が表されています。 ですので、中身は簡単に理解できると思います。 $.getJSONでTwitterAPIの値を
iOSアプリ開発を捗らせるツールのまとめ
iOSアプリ開発で自分がよく使うツールとサービスについてまとめてみました。 BaaS: Parse.com ソーシャルな機能は持たせたいけどサーバ作るのだるい、そんなアプリ開発者の味方がBaaS(Backend as a Service)です。最近熱いですね。Kinvey, StackMobなども試してみましたが、機能的にも料金的にも一番おすすめなのがParse.comです。100万APIまで無料、100万〜1500万APIまで$199という価格設定です。サーバは書くのが嫌というよりデプロイがめんどいくさいんですよね。BaaSなら一瞬でアクティブになりますので捗ります。 リファレンス: Dash 高速にリファレンスを検索したい時、Dashが使えます。 iOS以外にもjQuery,Android,Rails等ひと通り揃っています。 リポジトリ: github リポジトリは何でも言いっちゃ何で
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
jsonpでtwitterAPI利用メモ【jQuery】 : 目指せ1級！30代サラリーマンボルダリング日記
続いてソースとサンプル。 function search(word) { $.ajax({ type: "GET", url: "http://search.twitter.com/search.json", data: { "q": word, "rpp": 10, }, dataType: "jsonp", success: function(data) { $("#result").empty(); $.each(data.results, function(i, item) { $("#result").append($("<li />") .append($("<img />").attr("src", item.profile_image_url)) .append($("<span />").append(item.from_user+':'+item.text)) ); }
ロゴ入りのクールなQRコードが作れる「Unitag」:phpspot開発日誌
Unitag QR Generator- Create fancy QR Codes for free - Check out Premium access - Unitag - Connect to the world ロゴ入りのクールなQRコードが作れる「Unitag」。 WEBブラウザ上でサイトのロゴが入ったQRコードなどを簡単に作れるツールです サンプル例。なんかかっこいい。 ロゴ入り。こんなのでも読めるんですね ちょっとデザインされた感じのもの デザイナーの方はこういうところもデザインしたいということで、１つのツールとして試してみてもよさそう 関連エントリ Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」
ImageShack - Best place for all of your image hosting and image sharing needs