タグ

Web制作に関するhalohalolinのブックマーク (357)

  • 無料で商用可のちょっと手書きっぽい日本語フォント「やさしさゴシック」

    作成した印刷物やデジタル・コンテンツについて商用・非商用にかかわらず無料で使用できる「やさしさゴシック」は手書きっぽいかわいいデザインで、アルファベット、ひらがなのほか、漢字まで使うことができるため、デザインのお仕事をしたり個人でフリーペーパーを作成するときの表現の幅が広がります。 やさしさゴシックのフォントダウンロード | フォントな、情報。オープンソースの安心フリーフォントのダウンロード http://www.fontna.com/blog/379/ ◆ひらがな、漢字 ◆アルファベット(大文字) ◆アルファベット(小文字) ◆カタカナ(全角) ◆カタカナ(半角) また、やさしさゴシックフォントには、ちょっと太め(ボールド)のフォントもあります。 やさしさゴシックボールドのダウンロード | フォントな、情報。オープンソースの安心フリーフォントのダウンロード http://www.font

    無料で商用可のちょっと手書きっぽい日本語フォント「やさしさゴシック」
    halohalolin
    halohalolin 2012/06/01
    手書き風のゴシックフォント、商用利用可能、無料
  • wysihtml5 - A better approach to rich text editing

    <h1>WYSIHTML5 - A better approach to rich text editing</h1> <p>wysihtml5 is an <span class="wysiwyg-color-green"><a href="https://github.com/xing/wysihtml5">open source</a></span> rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inlin

    wysihtml5 - A better approach to rich text editing
    halohalolin
    halohalolin 2012/05/30
    HTML5ベースのWYSIWYGエディタ、「Chromeなら」音声入力可能、日本語にも対応
  • JavaScriptを高速化する6つのテクニック

    Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. Thomas Fuchs氏が6 easy things you can do to improve your JavaScript runtime performanceにおいてJavaScriptの実行パフォーマンスを改善するための6つのテクニックを紹介している。Thomas Fuchs氏はscript.aculo.usの開発者であるとともにPrototypeコアチームのメンバーも務めている。またRuby on Railsでコアチームで開発を担当していたこともある。 JavaScriptエンジン

    halohalolin
    halohalolin 2012/05/28
    2009年の話、関数呼び出しを避ける、newで配列やオブジェクト生成、ループは展開、グローバル変数よりローカルにキャッシュ、先にfalseが入る可能性が高いものを先に記述、必要がないなら使わない
  • イマドキのIDE事情(131) Adobe製のオープンソースHTMLエディタ「Brackets」を試してみよう

    Bracketsとは? Bracketsは、PhotoshopなどのグラフィックツールやDreamweaver、Flashといったオーサリングツールでお馴染みのAdobeがオープンソースで開発しているWeb開発用のエディタで、HTMLJavaScriptCSSで実装されている。 まだ開発が始まったばかりのプロダクトではあるが、今後の可能性を探るという意味も込めて、今回はこのBracketsを取り上げてみたい。 Bracketsをインストールしてみよう まず、Bracketsのダウンロードページから最新のアーカイブをダウンロードし、適当なディレクトリに展開しよう。binディレクトリ内にWindows用、Mac用の起動用バイナリが格納されており、Windowsの場合は「bin/win/Brackets.exe」をダブルクリックすることで、Bracketsが起動する。 Bracketsの画面

    イマドキのIDE事情(131) Adobe製のオープンソースHTMLエディタ「Brackets」を試してみよう
    halohalolin
    halohalolin 2012/05/25
    左右の2ペイン構成となっており、左側には現在開いているファイルの一覧やディレクトリツリーが、右側にはエディタが表示される、コード補完はないがチェック機能は搭載されている、インライン編集も興味深い
  • テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌

    テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ2種類とその他2種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ

    halohalolin
    halohalolin 2012/05/09
    $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。ソート機能はなさそう
  • Good night, Posterous

    Posterous Spaces is no longer available Thanks to all of my @posterous peeps. Y'all made this a crazy ride and it was an honor and pleasure working with all of y'all. Thanks to all of the users. Thanks to the academy. Nobody will read this.

    halohalolin
    halohalolin 2012/05/07
    ユーザの声は、集客と売上をアップさせる設定になっているか?/商品紹介ビデオは、売れる設定か?/Q&Aコンテンツは、検索エンジンを考慮しているか?/ソーシャル・ボタンの「配置場所」を、大きく勘違いしていな...
  • オープンソースの負荷テストツール (Jakarta JMeter)

    Jakartaプロジェクトに JMeter という負荷テスト用のツールがあります。 世の中、負荷テストのツールなんかはたいへん高価なことが多いので、オープンソースでこういうものがあると非常に助かりますね!! ちょっと使い方を見ていきましょう。 導入 導入はサイトからダウンロードして適当なディレクトリに解凍するだけです。 起動 解凍した先のディレクトリの bin サブディレクトリから jmeter と実行すると以下のような画面が出てきます。 ロケールの設定を見て日語が出ます。 テストの定義/設定 スレッドグループ 「テストプラン」を選択して、右クリックメニューで「追加」-「スレッドグループ」をクリックしてください。 この「スレッドグループ」で、アクセスするリクエスト = クライアントをシミュレートします。 「スレッド数」がクライアントの数ですね。 「Ramp-Up 期間」は、その指定し

    halohalolin
    halohalolin 2012/04/24
    Webサーバの負荷テストツール、オープンソース、Apache製、Assetion(アサーション・返り値)のチェックにも対応、Java上で動作
  • スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」:phpspot開発日誌

    natrixnatrix89/promptumenu @ GitHub スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 iPhoneのホーム画面でフリックによってメニューがスライドできるというようなものをブラウザ上で実現できます。 当然、PCだけでなく、スマホでもフリック可能で、動きがなめらかなのもいいです。スマホのメニューを作るなら使えそうです フリック可能 実装も超簡単です。ulにメニューを並べて初期化するだけ 自分で作ると大変そうなところをやってくれるのはありがたいですね。 関連エントリ デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」 時間の入力を楽にすることが出来るjQueryプラグイン アニメーションする

    halohalolin
    halohalolin 2012/03/21
    Androidアプリのなんちゃってデモに使えそう
  • WebSocketによるクライアント=サーバー通信(1/7):JavaScriptによるHTML5プログラミング入門 - libro

    HTML5では、クライアント=サーバー間の通信に関する技術も追加されています。それが「WebSocket」と呼ばれるものです。これにより、Webブラウザからサーバーに、JavaScriptで通信することが可能になります。 ……なんて説明すると、「えっ、今までもAjaxとかでできたはずじゃ?」と思うかも知れません。確かにAjaxを利用すれば、JavaScriptを利用してクライアント(Webブラウザ)からサーバーに通信をすることができます。しかし、Ajaxによる通信は、それほど高度なものではないのです。 Ajax通信は、単に「クライアントからサーバーにアクセスし、結果を受け取って終わり」ということしかできません。どういうことかというと、「通信を維持し続けることができない」ということなのです。中には、Cometと呼ばれる技術などのように、Ajaxを巧みに利用して通信し続けるようなものも登場して

    halohalolin
    halohalolin 2012/03/12
    WebSocketを使うとPULLは勿論、Ajax通信と異なりサーバへPUSHが可能、但しWebSocket通信用のサーバが必要
  • HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた - Publickey

    HTML5にはオフラインアプリケーション機能があり、オフラインに対応したWebサイトを作ることができます。Webブラウザでいちど表示させれば、あとはネットワークとの接続が切れてもそのままエラーを起こさずに利用し続けられるWebサイトです。 iPod TouchやiPhoneに搭載されているWebブラウザの「Safari」はHTML5のオフラインアプリケーション機能に対応しているそうなので、HTML5を使っていつでも参照できる超簡単なアプリを作れるのではないか、そう思ってお正月休みに試してみることにしました。 単に路線図を表示するだけのアプリ iPod Touchを僕は利用しているのですが、いつでも参照できる地下鉄の路線図があるといいなと思っていました。iPod TouchはWifi機能しかないため、外出中はずっとオフラインでの利用なのです。 そこで、起動すると路線図の画像を表示するだけの超

    HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた - Publickey
    halohalolin
    halohalolin 2012/03/12
    HTML5におけるオフラインアプリケーション機能を使ったサンプルプログラム、マニュフェストでキャッシュにファイルを保存する
  • Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade

    A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade Overview Features Examples Documentation Download @LeafletJS GitHub Repo Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API. It is built fro

    halohalolin
    halohalolin 2012/03/09
    OpenStreetMapをホームページなどに組み込めるJavaScriptライブラリの一つ、SlippyMapよりもズーム処理がアニメーションであったりデザインがよりモダン、iOSやAndroidも考慮しているらしい
  • 大手ブログが軒並み採用する鉄板の広告位置について考える - FutureInsight.info

    Geekなページの以下のエントリーにメルマガとブログの広告の位置についての言及がありました。 有料メルマガを廃刊しました:Geekなぺーじ メルマガ開始とともに広告収入が増えたのも大きな変化でした。 最大の要因は広告の配置を変更したことなのですが、それによって広告収入が倍近くになりました。 前々から広告を目立つ位置に変更すれば収入が増えるのはわかっていたのですが、「目立つ場所は人によっては邪魔な位置だ」と私が考えていたので、その変更を行うところまで数年間踏み切れませんでした。 しかし、メルマガを開始するような方向性を含めて、そろそろ何とか生活を成り立たせようと気で模索する必要があるという意味では、そういった個人的な美学が当に正しいのかということを含めて、位置変更をしてみようと思ってやってみました。 結果、広告配置に関しての苦情もいまのところはなく、広告収入は増えました。 (増えたといっ

    大手ブログが軒並み採用する鉄板の広告位置について考える - FutureInsight.info
    halohalolin
    halohalolin 2012/03/03
    ブログのタイトルの下にレクタングル(大)/タイトル横の上部にビッグバナー/サイドにレクタングル(中)
  • 月額980円のさくらVPSを個人用に使い倒す - ゆーすけべー日記

    Webサービスの運営用にVPSと呼ばれるバーチャル・プライベート・サーバを借りることは昨今よくあることだと思います。 VPSのサーバを借りればroot権限を持てることになるので、自由度が高いサーバ環境を構築することができます。 また、スペックによって価格が違っていて、低いスペックなものだと月額かなり低価格なものが存在します。 僕はその中でも月額980円のさくらVPSを借りていて、それを個人用に限って使っています。 これから紹介するような用途であれば980円でもかなりいけます。 ちなみに980円コースのスペックは2012年3月現在で以下のようなものです。 メモリ: 512MB HDD: 20GB CPU: 2Core(仮想) gitリモートレポジトリ 僕が現行で行っているWebサービスでもiPhoneアプリ開発でもバージョン管理は必要になってきて、 そのためのプライベートなレポジトリが欲しく

    月額980円のさくらVPSを個人用に使い倒す - ゆーすけべー日記
    halohalolin
    halohalolin 2012/03/02
    nginxとPlackを組み合わせると、512MBなLinux環境でもなんとかMovableTypeいけるらしい
  • 30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記

    Instagramは日のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」をべているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ

    30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記
    halohalolin
    halohalolin 2012/02/22
    「Instagramの今の写真を検索できるサービス」は30分でできる…ってできるよう素早く思いついて組み立てられるようになるには修練ですね。
  • 『【保存版】SEO対策のチェックをするときに必須のサイト7選』

    SEOチェキ! SEOに役立つさまざまな情報を、調査できるSEOツール。 title・meta description・meta keywords・h1タグ 発リンク数(内部リンク・外部リンク) 最終更新日時・ファイルサイズ・読込時間 Googleページランク・Alexaランキング GoogleYahoo!の被リンク数・インデックス数 Yahoo!カテゴリ等、各ディレクトリの登録状況 Twitterのツイート数 Facebookの「いいね!」の数 ソーシャルブックマーク登録数 などの総合的な情報を1クリックでチェックできます。 http://seocheki.net/ ◆検索数予測チェックツール 検索順位ごとのアクセス数を予測するツール。 検索数予測チェックツールは、検索順位別に検索数を調べることができる、キーワード検索数調査・予測ツールです。キーワードを入力してクリックするだけで、Y

    『【保存版】SEO対策のチェックをするときに必須のサイト7選』
    halohalolin
    halohalolin 2012/02/09
    SEOチェキ!/aramakijake.jp(検索数予想)/アクセス比較.jp/SEOアクセス解析/初心者SEO対策ツール/HTML構文チェック
  • Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net

    結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ

    Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
    halohalolin
    halohalolin 2012/01/23
    HTML/CSSフレームワーク99limeの紹介、素早くデザインの整ったサイトが構築できる/リスト・メニュー・ボタン・画像・イメージスライダ-・パンくず・グリッドレイアウト・フォーム
  • https://jp.techcrunch.com/2012/01/11/20120110google-fuses-google-into-search-and-there-are-bigger-changes-afoot/

    https://jp.techcrunch.com/2012/01/11/20120110google-fuses-google-into-search-and-there-are-bigger-changes-afoot/
    halohalolin
    halohalolin 2012/01/11
    Google+などのSNS登録内容がソーシャル検索に追加されるようになった。すなわちSEO対策にはSNS対策が含まれるようになっていくということか?
  • 高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ

    こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド> Smart Resize > Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的

    高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
    halohalolin
    halohalolin 2012/01/11
    Smart Resize / Fill With Background / Placeholder / Fix Rounded Rect Corners
  • [JS]jQueryのプラグイン100選 -2011年総集編

    2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連

    halohalolin
    halohalolin 2011/12/13
    ...画像配置・キャプション関連/コンテンツスライダー・カルーセル関連/タブ関連/ナビゲーション関連/レイアウト関連/パネル・ボックス関連/ツールチップ・ティッカー関連/アニメーション関連/エフェクト関連...
  • めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成

    お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた!そろそろ手がが疲れてきていませんか? そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります! Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います! DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)

    めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
    halohalolin
    halohalolin 2011/12/09
    HTMLタグを挿入する列を追加し、エディタへコピペ、タブを除去した上でソースに組み込み