タグ

関連タグで絞り込む (146)

タグの絞り込みを解除

Web制作に関するmatuixのブックマーク (196)

  • モバイル開発に欠かせないテストツール14選

    Adobe Device Central CS5 Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox など他のブラウザをインストールしてテストすることができます。 iOS SDK XCode も含め諸々ダウンロードしなければいけませんし

    モバイル開発に欠かせないテストツール14選
  • マイクロソフト、無償のWeb開発環境「WebMatrix」を公開。HTML/CSS/JavaScriptエディタ機能、PHP対応、FTP機能など手軽で便利な統合ツール

    マイクロソフトは先週、無償のWeb開発環境「WebMatrix」の提供を開始しました。WebMatrixには以下のコンポーネントが含まれており、Windowsで簡単にWebサイトの構築を行うことができます。 Web開発ツール HTML/CSS/JavaScript/PHPなどに対応したテキストエディタを含む開発ツール。FTPによりファイルをホストへボタン1つで転送できる HTTPサーバ IIS Express 7.5により、Webブラウザですぐにブレビューできる。しかも(追加インストールにより)PHPにも対応する。当然ASP.NETにも対応 データベースサーバ SQL Server Compact Edition 4により、データベースを利用するWebアプリケーションもローカルで開発可能。MySQLも追加インストール可能 調べた限りではIIS ExpressはWebMatrixの画面から簡

    マイクロソフト、無償のWeb開発環境「WebMatrix」を公開。HTML/CSS/JavaScriptエディタ機能、PHP対応、FTP機能など手軽で便利な統合ツール
  • フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

    みなさん、こんにちは お元気ですか?僕は元気です。 さて 最近よく、「いいね!」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP (Open Graph Protocol)と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー??とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す

    フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
    matuix
    matuix 2011/01/18
    facebookのいいねボタンを押したときに、facebook内に表示されるテキストや画像、動画などを設定できる記述。
  • 新年のコピーライト年度更新、おすすめの方法 - web > SEO

    あけましておめでとうございます。 このブログを読んで下さっている方々、年はこれまで以上に更新をしていこうと思いますので、どうぞよろしくお願い致します。 さて、年が明けて最初の仕事はフッターのコピーライト年号変更という方も少なくないのではないでしょうか。 私は、コピーライト年号は「(開設年)-(現在年)」という形で、現在年部分を自動更新にするのがベストでは、と思っています。 このコピーライト表記を勧める理由と簡単な設置方法をご紹介します。 コピーライト表記の来の目的 そもそも、このフッターのコピーライト表記は何のために入っているか、どうして入れないといけないかご存知でしょうか。 実は今、コピーライト表記を入れる意味は、ほとんどありません。 来、コピーライトを入れる目的はとても複雑でした。そもそもの目的から考えてみましょう。 コピーライト表記で守られるべき「著作権」が発生するための方式と

    新年のコピーライト年度更新、おすすめの方法 - web > SEO
    matuix
    matuix 2011/01/06
    「著作権者」「著作権マーク」「著作権発生年」が揃う必要があります。
  • Webデザイナーな私の勉強方法まとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-

    私の勉強方法まとめてみました。 といっても 「いい情報をとりこんで、実践して、その結果をアウトプット」 をひたすらしているだけなのですが、実際にどのようなサイトやを見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。 インプット 情報が美しくまとまっているサイトのフィードをチェック 国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。 そういうブログのフィードをチェックしています。 デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。 全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。 そうしておくことで、いざ●●しないといけな

    Webデザイナーな私の勉強方法まとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • アジャイルと受託開発の溝はきっと埋まる - GoTheDistance

    以前、僕はアジャイルって受託開発との相性が最悪な気がする - GoTheDistanceというエントリを書きました。 工程が分断されてしまう開発方式を採用している場合は、よりリアルにシステムのビジネス上の価値を表現して伝えることができるアジャイルのメリットが活かせそうに無いというのが骨子。今でもその思いは変わりませんが、逆に言えば工程分断を脱却して企画から実装まで回せる体制になれば可能性はある、とも思っていました。 そんな中、永和システムマネジメント社様が口火を切られまして、アジャイルのメリットを全面的に押し出したビジネスモデルを発表されました。あくまでトライアルという位置づけですが、この話題は定期的に取り上げたい。 骨子としては、この3つ。 初期費用0円(リリースまでの費用は開発側が負う) 月々15万〜150万の定額制 解約は自由だが成果物は全部引き取り。データだけ提供。 うん、どう考え

    アジャイルと受託開発の溝はきっと埋まる - GoTheDistance
  • 2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net

    少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン 読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考える ウェブデザインでこれは気をつけたいの35のポイント デザインQRコードの作り方 非デザイナーのための

    2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net
  • リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ15:phpspot開発日誌

    15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ15。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新

  • MOONGIFT : Mac OSX用サイトリンクチェッカー&サイトマップジェネレータ「Integrity」 オープンソース・ソフトウェア/フリーウェアを毎日紹介

    Integrityは指定URL以下全体のリンクチェックおよびXMLベースのサイトマップを生成する。 [/s2If] IntegrityMac OSX用のフリーウェア。Webサイトをクローラーに効率的に循環してもらうのに必要なのがXMLベースのサイトマップだ。手動で作っても良いが、まずそのような人はいないだろう。CMSの中には生成ツールを提供するものもあるが、最も簡単なのは実際に自分でクローリングして生成することだ。 実行中 実際のサイトをクローリングすれば、404などのリンク切れもチェックできて便利だ。エラーチェックも兼ねつつ、XMLのサイトマップを生成してみたいと考える方はIntegrityを使ってみると良さそうだ。 IntegrityはURLを指定して実行すると、自動的にクローリングを開始し、URLごとにタイトルを取得していくツールだ。サイズも取得しているので、実行速度はサイト規模に

  • 2010年11月第1週号 1位は、Webサイトのワイヤーフレーム制作完全ガイド、気になるネタは、朝日新聞社、電子書籍を紹介する特設ページ「ASAHI eBOOK AVENUE」開設 | gihyo.jp

    週刊Webテク通信 2010年11月第1週号1位は、Webサイトのワイヤーフレーム制作完全ガイド、気になるネタは、朝日新聞社、電子書籍を紹介する特設ページ「ASAHI eBOOK AVENUE」開設 ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年11月1日~11月7日の間に見つけた記事のベスト5です。 1. Ultimate Guide to Website Wireframinghttp://sixrevisions.com/user-interface/website-wireframing/ Webサイトの制作時にワイヤーフレームを作るべき理由や、その方法などを解説した「ワイヤーフレームのススメ」的な内容です。 ワイヤーフレームとモックアップ、プロトタイプは混同されることが

    2010年11月第1週号 1位は、Webサイトのワイヤーフレーム制作完全ガイド、気になるネタは、朝日新聞社、電子書籍を紹介する特設ページ「ASAHI eBOOK AVENUE」開設 | gihyo.jp
  • 画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10:phpspot開発日誌

    10 Powerful AJAX jQuery File Uploaders | CreativeFan 画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10。 アップローダ実装にまよったらとりあえず、このエントリを参考に比較検討できそうです。 Valums AJAX Uploader Plupload Uploadify AJAX Multiple File Upload Form using jQuery jQuery Multiple File Upload Plugin これだけあれば、自分にあったものが見つかりそうですね。

  • [CSS]パンくずの実装はどのようにするのがよいかの考察

    パンくずは何要素で実装していますか? ul要素? ol要素? p要素? パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul

  • Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス

    2017年6月29日 Webサイト制作, Webデザイン 最近会社でFacebookページを作成する事があり、楽しくてすっかりハマってしまったManaです。そのノリでここWebクリエイターボックスのFacebookページも作ってみました。そこで、Facebookページ作成中に役にたったコードやプラグイン・サイトを紹介します。 ↑私が10年以上利用している会計ソフト! ※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。 Facebookページのカスタマイズ概要 Facebookページの基的な作成手順についてはかちびと.netさんが詳しく解説しています。なので、ここではFacebookページをHTMLCSSでカスタマイズできるFBMLというアプリケーションやその他のプラグインを使った、もう少し踏み込んだFacebookペー

    Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス
  • [CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ

    幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i

  • ★はじめに  |  Search  |  Google Developers

    フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイルサイトとモバイルファースト インデックスに関するおすすめの方法 Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。 モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。このページで説明するおすすめの方法は、モバイルサイト全般にあてはまり、当然のことながら、モバイルファースト インデックスにもあてはまります。 ユーザーに最適なエクスペリエンスを提供できるよう、このガイドで紹介されているおすすめの方法を実践してください。 モバイル フレンドリーなサイトを

    ★はじめに  |  Search  |  Google Developers
    matuix
    matuix 2010/10/19
    マークアップ規格やエミュレーター情報など掲載。
  • ごちゃごちゃしたCSSを見やすく自動整形してくれるサイト「ProCSSor」*二十歳街道まっしぐら(FC2ブログ時代)

    「ProCSSor」はごちゃごちゃしたCSSを自動整形してくれるサイトです。 自分の書いたCSSをみて、「あーごちゃごちゃしてて見にくいなぁ」て感じてる方には朗報! CSSを貼りつけて、変換すると綺麗に整形されたCSSをはきだしてくれます。 無駄な改行やらも省いてくれるという気が利くサイトです。 以下に使ってみた様子を載せておきます。 まず「ProCSSor」にアクセスしましょう。 「ENTER OR COPY-PASTE YOUR CSS HERE」に整形したいCSSを貼りつけます。 「options」より、整形のルールを決めることができます。 「process」をクリックして、変換開始! するとこのように整形されたCSSがはきだされます。 「download」からダウンロードできますよ。 この色付け、けっこう見やすいので、CSSを整形+色付けしたいときにも使えそう。 やっぱり綺麗にコー

  • 『indexhibit』、クリエイターのための「魅せる」web作成ツール | ライフハッカー・ジャパン

    デスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール

    『indexhibit』、クリエイターのための「魅せる」web作成ツール | ライフハッカー・ジャパン
  • DreamweaverからCodaに変えました

    2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか?きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。当におすすめです! ↑私が10年以上利用している会計ソフト! Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて!ちなみに私はCoda英語版をインストールして

    DreamweaverからCodaに変えました
    matuix
    matuix 2010/09/02
    Dreamweaverよりかなりよさそうだ
  • 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】

    iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした! 待ってる間に、iPhone4も対象としたWEBアプリ(ネイティブアプリのweb view を含む) のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね! という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ? はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね! 拡大しなくても小さな文字が読めるなんてサイコー! ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・?! こういうイメージです。 そう、