透過がサポートされたnode-webkit（NW.js）でガジェットを作ろう
こんにちは、古見澤（コミザワ）です。 今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5やJavascript、CSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。 ↓ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。 動画 node-webkitって何？という方は、前回の記事も合わせてお読みください。 HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる ※本エントリーはWindows環境（Win7 Professional x64）での話になります。 （透過機能はMacやLinuxでも使えます、後述するマニュアルを参照ください。） また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、 Aero機能
MEANスタックは破壊的か
最近、MEANがイイという話をチラホラと耳にする。先日も次の記事がはてブで話題になっていた。 MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由 - Mozilla Open Web Day in Tokyoを終えて - albatrosary's blog この記事の冒頭では、MEANはLAMPに変わる技術として紹介されているが、果たしてそれは正しいのだろうか。（この記事では、LAMPを例にとりつつJavaがどうのという記述があるので、恐らくはLAMPではなく既存のリレーショナルデータベースを用いたアーキテクチャ一般について述べたいのではないかと思う。）MEANについて少し思うところがあるので、今日はMEANの可能性について書き綴っておこうと思う。ただし、私自身MEANスタックと呼ばれるシロモノは使ったことがなく、構造を理解した上
Janko Jovanovic – Design Management + Coaching
For nearly 30 years, I’ve been navigating the many sides of design and product worlds: building products, leading teams, mentoring people, and shaping strategies. My work now blends Design & Product Leadership, Coaching, and Strategy & Futures to support others in making smart decisions and navigating increasing uncertainty and complexity. Coaching Strategic advising, mentoring, and coaching have
はてなブログ編集画面JSのページャ見どころ紹介 #pagernight - hitode909の日記
昨日，ページャNightという勉強会で，はてなブログのJSの見どころを紹介するLTをした．(昨日の日記)． 資料公開しようかと思ったのだけど，発表資料そのまま公開しても意味不明なので，エントリに書き直すことにした． たとえば，このLGTM画像は発表資料の1枚目で，もし発表資料をそのまま公開したら，こういう謎の画像を解説もないまま見ることになっていたはず． JSのページャいっぱいある はてなブログの編集画面には編集サイドバーというのがあって，写真とかAmazon検索とかTwitterとかinstagramとかあれこれ貼れるようになってる． Amazon検索しても画面遷移するわけじゃなくて，ウェブ2.0という感じで，XHRでJSONを取ってきて，HTMLを組み立てて表示，クリックすると選択，貼り付けを押すとエディタに挿入される，という仕組み． 編集サイドバーから貼れるサービスは10種類くらいあ
ウェブページをより深く理解するようになりました
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Tips - 静的リソースのURIに?をつけるべからず : 404 Blog Not Found
2014年03月14日20:00 カテゴリTipsCode Tips - 静的リソースのURIに?をつけるべからず Webを支える技術 HTTP、URI、HTML、そしてREST 山本陽平 であればなおのことこの実装はNG。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer BlogはてなブログではJavaScriptを配信する際には、上記のURLのように、?よりあとの部分にabc078624b2a746c618156847827166bのようなバージョンIDを付与しています。JavaScriptが変更
はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer Blog
こんにちは、id:hakobe932です。はてなブログではユーザ体験の改善のために、ページ表示速度を向上させるための様々な取り組みを行っています。このエントリーでは、はてなブログで行っている、ブラウザキャッシュの活用、JavaScriptのページ最下部での読み込み、JavaScriptの圧縮、という3つの取り組みについて解説します。 ブラウザキャッシュの活用 同じ内容のJavaScriptやCSSを、ページを表示するたびにダウンロードすると、余分なHTTPリクエストが発生しますし、読み込み時間がかかります。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 $ curl -I http://hat
ブログの右上に貼り付けるリボンが作れる『Website Ribbon』 | 100SHIKI
昨日に引き続き便利なジェネレータのご紹介。 Website Ribbonではサイトの右上に貼り付けられるリボンをつくることができる。 もちろんリボンの色やテキストのフォント、色も選ぶことができる。またリンクも設定することが可能だ。 出来上がったリボンはJavascriptを貼り付けるだけで自分のサイトなりブログに設置できる。実にお手軽だ。 サイトも長く運営しているとちょこちょこ手をいれたくなるものだ。こうした「ちょこっとだけリニューアル」的ツールは需要があるかもしれないですな。
ダイアリーのデザイン変更 / Meteor.js でスタイル変更作業 - naoyaのはてなダイアリー
この頃このダイアリーを時折更新していますが、改めて見てみるとデザインが野暮ったかったので、変更しました。Readability を通して読んだときのスタイルが非常に読みやすいので、そのスタイルをパ･･･参考にしました。 ちょっとまだ一部スタイルが当たってないところもありますが、基本はこの路線で。Chrome、Firefox、Safari では確認済み。Windows と Opera では見ていないのでどうなるかわかりません。 どうやって変更したか ダイアリーの管理画面にスタイルを入力してプレビューで･･･とちまちま変更していくのは流石に大変なので、やり方を少し工夫しました。先日触った Meteor.js を使って先に簡単なアプリを作って、そのアプリ上で変更してできあがった CSS を管理画面に貼り付ける、というもの。 以下、そのソース。 https://github.com/naoya/m
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
14兆、みんなで使えば怖くない - 新年のご挨拶に代えて : 404 Blog Not Found
2013年01月06日01:30 カテゴリEcosystem 14兆、みんなで使えば怖くない - 新年のご挨拶に代えて もう明けてから6日目に突入しているではありませんか。その間私はといえば、熱出すわ蕁麻疹出すわで寝正月もいいところ。リハビリを兼ねてentryというかreply。 明けましておめでとうございます（新春、マクロのお話） | isologue つまり、「なぜ、14兆円の消費を増やすことが難しいか」といえば、（国債の売却や貸しはがしが必要だからではなく）、消費というのは「欲しい」と思うものを消費するものであって、他人から強制されて買わせるということは難しいから、ということに尽きると思います。 磯崎さんの「年賀状」ですが、ここが引っかかったので。 たった14兆円使うの難しいですって? 私にくださいな。サクって使って差し上げますよ。 といっても全員にそのまま配っちゃうだけですが。さす
『今年中に読んでおきたい！2012年人気の記事10本！』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか？ スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！ 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上
僕が参考にしている Ruby, Rails の情報源まとめ(海外ブログ編) - おもしろwebサービス開発日記
昨日 @bekkou68 さんに「前島さんってどうやってRubyやRails関連の情報を収集しているんですか？」って聞かれたのでまとめてみます。とりあえず海外のブログ限定で。日本ブログ編は気が向いたらやります…。 RailsCasts 有名すぎて説明不要かもしれませんね。毎週2つ(うち1つは有料購読が必要)の Rails 関連動画をアップロードしてくれているサイトです。良質な情報を定期的に届けてくれるすばらしいサイトですね。1ヶ月9ドル払って有料購読する価値は間違いなくあると断言できます。動画中で紹介しているライブラリの情報もすばらしいですが、コード例もかなりRailsっぽく綺麗に書かれていて大変参考になります。 RubyFlow いろいろなRuby開発者のブログの更新情報をまとめたブログ。簡単な紹介文に各ブログのリンクがくっついているような形式です。日によってばらつきがありますが、だいた
中年コーダーが教える本当にクリーンなコードの作り方 - 「リーダブルコード」の書評に代えて : 404 Blog Not Found
2012年09月18日15:00 カテゴリ書評/画評/品評Art 中年コーダーが教える本当にクリーンなコードの作り方 - 「リーダブルコード」の書評に代えて リーダブルコード Dustin Boswell / Trevor Foucher 須藤功平・ 角征典 訳 [原著:The Art of Readable Code] 遅まきながら出版社より献本御礼。 基本的に、以下のスライドを一冊の本にすると本書になる。 クリアなコードの作り方 - How to make clear code なのに「リーダブルコード」を読了した時の気持ちと、共訳者による以上のスライドを見た時の気持ちは180度違った。前者ではとても嬉しくなったのに、後者ではとても悲しくなったのだ。 なぜそうなったかを書くことで、本書に何が書かれているのかを紹介することにする。 クリアって cat /dev/null > dirty.
JSX の進化速度が半端ない - ぐるぐる～
気に入らない所を直して pull request 投げたら、取り入れられたので、8 日前に書いたエントリが過去のものとなっちゃいました。 関数型 以前の JSX では、関数型は function(: int): string のように書く必要がありました。 これはこれでそのまま使えるのですが、新たに (int) -> string という形式にも対応しました。 ちなみに、複数引数はカンマ区切りで (int, boolean) -> string のようになります。 カリー化された関数は、 function(: int): function(: number): string の代わりに (int) -> (number) -> string と書けます。 引数を囲むカッコは、(今のところ) 省略不可能です。 これには 2 つの理由があります。 この機能を追加したとき、JSX のパーサの能力
強火で進め
この記事ではXCFrameworkを作成し、署名(コード署名)を行う手順を解説します。 解説前にまず、記事内に出てくる用語の解説を書いておきます。知らない用語が出てきたらここに戻ってきて確認して下さい。 用語解説 Archive 配布やストアに公開時に必要な実行可能ファイル、アセット、メタデータなどのリソースをBundle化したもの。 Bundle(バンドル) 標準化された階層構造を持つディレクトリにリソースをまとめたもの。通常は1つのファイルの様に扱われるが右クリックメニューから「パッケージの内容を表示」を選択するとディレクトリに含まれた内容が確認できる。 参考情報：Placing Content in a Bundle | Apple Developer Documentation Framework Dynamic shared library(動的共有ライブラリ)やStatic L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Proximity APIでWi-Fi Direct通信 - デバイスとITの架け橋 - Site Home - MSDN Blogs
Outbrain
Yahoo! JAPAN Tech Blog
skuare.net - JavaScript / Movable Type / etc.
