タグ

Webに関するnoazohのブックマーク (58)

  • yohei-y:weblog: REST 入門

    語の REST のリソース集を以前作ったのだが、 日語では一般人向けの解説がない。 sheepman 氏の REST のページはすばらしいんだけど、多少わかっている人向けだ。 市山氏のプレゼン資料は RoyF の論文を詳しく解説していてよいのだけれど、いかんせんアカデミックすぎる。 技術的な要素も抑えつつ、入門者にもわかりやすい解説はないものかと探していたのだが、みつからない。 英語の文書を訳すことも考えたんだけど、あまりよいものが見つからない。 で、結局自分で書くことにした。 最初はひとつのポストで済ませるつもりだったんだけど、書き始めたら長くなってしまったので、複数のポストに分けることにした。 えらそうなことを書いたが、内容は「ないよりマシ」といったレベルだろう。 前書きが長くなったけど(ここから始まりです。ですます調なのは入門記事だから)、 この記事(から始まる一連のポスト)は

    noazoh
    noazoh 2014/09/02
  • 拡張子とMIMEタイプ - とほほのWWW入門

    ファイル名の最後のドット(.)から後ろの部分を『拡張子』と呼びます。index.html の拡張子は .html で、title.gif の拡張子は .gif です。拡張子はそのファイルが何であるかを示します。例えば、.htmlHTML文書、.txt はテキスト文書、.gif は GIF画像、.jpg は JPEG画像のファイルであることを示しています。 Windows では、標準の設定では拡張子は表示されません。[スタート]-[(すべての)プログラム]-[アクセサリ]-[エクスプローラ] を起動し、[ツール]メニューの [フォルダオプション]-[表示] で、[登録されている拡張子は表示しない] のチェックをオフにしてください。 また、Windows では、ファイルをダブルクリックした時の動作はこの拡張子によって決まります。例えば .txt のファイルをダブルクリックすると [メモ帳]

  • 虹色のカラーチャート

    虹色の順番カラーチャート。明るさの違う4つのトーンの虹色チャートです。それぞれのトーンでの虹色7色のカラーコードを掲載しています。 赤〜橙〜黄〜緑〜青〜藍〜紫と虹の色は変化しています。

    虹色のカラーチャート
  • GoogleMap API V3でマーカーの地点データを動的に読み込む - Let's make something

    今回は、HTML内に持っていた地点データをJSONファイルに分離して、AJAXを使用してJSONファイルを読み込んでマーカーを設定します。 今回のサンプルでは、jQueryを使います。 処理イメージとしては、以下の感じです。 HTML読み込み 地図生成 地点データ読み込み(JSONファイル) マーカーの設定 用意したJSONファイルは、以下のとおり { "points":[ { "title": "ローソン", "content":"ローソン 神戸中央西町", "lat":"34.687574", "lng":"135.189857" }, { "title": "南京町広場", "content":"南京町広場", "lat":"34.6882", "lng":"135.188087" }, { "title": "ライオンマンション", "content":"ライオンマンション神戸

    GoogleMap API V3でマーカーの地点データを動的に読み込む - Let's make something
  • 地図のコントロール|Google Maps JavaScript API v3|Ajax|PHP & JavaScript Room

    コントロールの種類と表示設定 コントロールの無効化 ナビゲーションコントロール〔※廃止〕 地図タイプコントロール〔MapTypeControlOptions / MapTypeControlStyle〕 外観地図コントロール〔OverviewMapControlOptions〕 移動コントロール〔PanControlOptions〕 回転コントロール〔RotateControlOptions〕 スケールコントロール〔ScaleControlOptions / ScaleControlStyle〕 ストリートビューコントロール〔StreetViewControlOptions〕 ズームコントロール〔ZoomControlOptions / ZoomControlStyle〕 コントロールの表示位置〔ControlPosition〕 カスタムコントロールの指定〔描画、イベント処理〕 コントロー

    地図のコントロール|Google Maps JavaScript API v3|Ajax|PHP & JavaScript Room
  • 隠居のパソコン備忘録: Google Maps API JS V3 で、番号付きマーカーを表示する - Atelier

    喜寿を過ぎた隠居の気儘な生活の記録。言わば、「游行期」の雑記帳です。「林住期・游行期」の過ごし方に少しでも参考になればと願っています。 従来、右フレームの【晩秋の宍道湖私的観光地図】は、Google Maps API のV2版で作成したものを置いていた。V2 でかいた地図はまだ動くが、2010年5月に廃止されており、V3 へ移行することが奬められている。 この地図では、必要性はあまりないが、マーカーに番号を表示させていた。新しく V3 で作りなおすときにも、学習も兼ねて番号を表示させたかった。 ところが、番号入りマーカーを表示するサンプルコードが見つからない。V2 で作成したコードを V3 に置き換えることも試みたが、悲しいかな十分な知識がないし、一から勉強する意欲もないので、うまく行きそうにない。 今までに成功した V3 のコードを眺めていると【Google Maps API JS V3

  • GoogleMap API V3で番号付きマーカーを動的に生成 - Let's make something

    今回は、GoogleMap API V3で番号つきマーカーを動的に生成して表示するサンプルです。 マーカーのピンの生成は、Google Chart APIを使います。 作成方法は簡単で、Google Chart APIは、番号つきのピンと影を生成できて、Google Map APIはマーカーのピンと影をそれぞれURL指定できるので、そこにGoogle Chart APIのURLを指定するだけです。 Google Chart APIでは、影つきピンも生成できますが、下のようにピンと影が少し離れているので、ピンと影をそれぞれ指定しました。 ピンの生成は、http://chart.apis.google.com/chartのパラメータとして以下の値を設定します。 chst=d_map_pin_letter&chld=<character>|<fill_color>|<text_color> 例え

    GoogleMap API V3で番号付きマーカーを動的に生成 - Let's make something
    noazoh
    noazoh 2014/06/24
    google chart API を利用すると、マーカー内に文字が埋め込まれたマーカー画像を動的に生成することができる。(色も動的に指定可能)
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

    dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
  • 新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン

    Digital Inspiration:新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ

    新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
  • API キーの取得 - スタート ガイド - Google Maps JavaScript API v3 — Google Developers

    フィードバックを送信 概要 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Maps JavaScript API を使用すると、独自のコンテンツと画像を使って地図をカスタマイズして、ウェブページおよびモバイル デバイスに表示できます。Maps JavaScript API で提供されている 4 つの基地図タイプ(道路地図、衛星、ハイブリッド、地形)に、レイヤとスタイル、コントロールとイベント、さまざまなサービスとライブラリを使用して変更を加えることができます。 対象読者 このドキュメントは、JavaScript のプログラミングとオブジェクト指向プログラミングの概念を理解しているデベロッパーを対象にしています。また、ユーザーの視点で マップを使い慣れていることも必要です。ウェブ上に多数ある JavaScript チュートリアルも参考にしてください。 こ

    API キーの取得 - スタート ガイド - Google Maps JavaScript API v3 — Google Developers
  • Google Maps APIのおさらい。

    Webサイトで地図を表示するのに便利なGoogle マップ。Googleが提供しているGoogle Maps APIを使って、地図を設置する方法から、マーカーを置いたり、道のりを表示したり、地図の色を変えたりするためのコードをまとめました。※Google Maps APIの中でも、ここではGoogle Maps JavaScript API v3を使ったサンプルを掲載します。 以下は目次です。クリックするとその項目へ移動します。 Google マップを設置する。 いちばん簡単なGoogle マップ ジオコーディングなGoogle マップ Google マップの読み込み方 場所を示す。 マーカーを置く アイコンを置く 吹き出しを出す 道のりを表示する。 ポリラインで描画する Directions Serviceを利用する 見た目をカスタマイズする。 コントロールのカスタマイズ デザインのカス

    Google Maps APIのおさらい。
  • 使い道色々。jQueryを使ってSparklineグラフを描く·Peity MOONGIFT

    PeityはjQueryでSparklineグラフ(円、棒、折れ線)を描くJavaScriptライブラリ。 PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。 折れ線グラフ タグの中に埋め込まれた文字を使ってグラフにして

  • Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

    バイト先で「新ゆとり世代」と言われました。れこです。 HTMLCSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が

    Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • 【決定版】僕の考えた最強のfont-family指定

    記事は200弱ツイート、500弱のはてブと16000PVを2日で稼ぎ出した(稼いだからってどうもないけど) [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ! | DevAchieveの反省会会場となります。 未読の方は先に読んでおくと話がわかりやすいかと思います。指定だけ見たい人はこちら。 [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ!の狙いタイトルではてブや検索流入を狙う当は教えたくないSEO!アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Lifeで 解説されている通り、はてブは全角32文字までに入れないとトランケートされてしまうので短めに。 はてブユーザーが大好きな最強とか入れておいて、読んでブクマしてもらえるようにしておきます。 「font-family 指定 オススメ」というキーワードを埋め込んで

  • [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ!

    俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ! 指定方法は下にあるぞ! 新規でサイトを制作するのに基フォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ!Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い!何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin

  • 【CSS】font-familyを指定するな。ユーザー選択に任せよ。

    参照:[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ! 上記記事にも直接コメントしましたが、これ以上他人様のブログで自説を展開するのもよろしくありませんので、ここに書きます。 まず前提として、ぼくは 「日語文章に欧文フォントを指定すべきではない」 と考えています。 理由は上記記事のコメントにも書きましたが、 高さ・ウェイト・字幅・ベースライン等が揃わず 非常に不格好になる。 ためです。 具体例を出しましょう。 「Windows7 + IE9」 「デフォルトフォントにMS Pゴシック指定 + ClearType有効」 環境において、どのように表示が不格好になるのか確認します。 font-family: Arial, sans-serif; とした際のサンプルが以下になります。 これを見て、どうでしょう? 気にならない方もいらっしゃるのでしょうが、 僕に言わせれば「

    【CSS】font-familyを指定するな。ユーザー選択に任せよ。
    noazoh
    noazoh 2014/05/29
  • re-dzine.net situs togel online toto 2023 -

    By penulis • January 10, 2023 • comments off Sebelum langsung ke poin utama yaitu mengenai trik rahasia main togel online yang beneran udah terbukti gacor buat hasilkan kemenangan, kalian yang mungkin masih berstatus pemula di game…

    re-dzine.net situs togel online toto 2023 -
  • html/css 参考サイト総まとめ

    作成:2013/10/15 更新:2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOUIにも深く関係しているのもあり、ここらへんでCSSHTML5を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ 1.勉強になるテクニック/サンプルまとめ 基知識 2.セレクタ 3.メディア クエリ 4.コーディング規約 5.フォント 6.CSSスプライト 7.アニメーション 8.正確なHTML使用方法 9.CSSハック 10.書き方/読み方 定番まとめ

    html/css 参考サイト総まとめ
  • マークアップ効率化 - zen-codingでコーディングを倍速に

    HTMLの記法について 基的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ

    マークアップ効率化 - zen-codingでコーディングを倍速に