外部JavaScriptを非同期（async / defer）で読み込みレンダリングを高速化する | web helog - HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。
Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要：スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。 レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。 （CSSについては別途考えます） そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。 概要 HTMLのソースは上から順に解析されます。 ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。 少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。 読
Webエンジニアだったら当然知っておきたい「 クリックジャッキング対策 」とは？ | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。 Backlogカードとは Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます（※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました！」をご参照ください）。 Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<if
SVGで始めるマイクロインタラクション入門 - ICS MEDIA
ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、はじめてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。 マイクロインタラクションとは 「マイクロインタラクション」とは、ある目的を果たすために1つの作業を行うインタラクションのことで、Dan Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。 マイクロインタラクションの構造 マイクロインタラクションは、次の4つの構造に分解できま
グラフィックデザインがメインの会社で社内でたったひとりのWebデザイナー..
グラフィックデザインがメインの会社で社内でたったひとりのWebデザイナーなんだけど、今やってるWeb制作の案件がちょうどこんな感じ。 ホームページビルダーで更新できるように、レスポンシブで、記事なんかを色々と書きたいということで静的サイト50ページほどを作成。 明らかにWordpressなり使ったほうがお互いラクだと思うんだけど、それは断固拒否された。ホームページ・ビルダーでできないからだそうだ。 サイトマップ、リンクの導線も全部ド素人のクライアントから完全指定。迷路みたいなサイトで、作っている自分でもどこにどのページがあるのか未だに覚えられない。 そして今9割ほど出来てるんだけど、とにかく修正が多い。修正というより変更。 Tableタグ内で、このセルのみ左揃えにして欲しい。やっぱり右。やっぱりフォント少しだけ小さく。だとか あっ ここのサイトっぽくしてください。ここのサイトとここのサイト
三度の飯よりアドレスバーが好きなデザイナーが選ぶ美しい URL 3 選 - Pepabo Tech Portal
こんにちは〜！鹿です。わたしは minne を担当しているデザイナーです。 インターネットが好きで、とくにウェブブラウザのアドレスバーが大好きです。好きすぎるあまりに、ミーティング中にボーッとアドレスバーを見ていて怒られることも…。きょうは、そんな三度の飯よりアドレスバーが好きなわたしが選ぶ、美しい URL を紹介したいと思います。 まずは、みなさんおなじみの GitHub。たとえば React のリポジトリの URL を見てみると… はぁ…（うっとりした目で）。 なんて美しい URL なんでしょうか。なぜなら、「facebook」という名前の組織（organization）が作っている「react」という名前のプロダクトを「github.com」がホスティングしている、という事実が URL で表現されているからです。そのおかげで、わたしたちはこの URL にアクセスする前から、いったいど
iPad Pro 10.5とSurface Proを比較 人気プロ絵師によるお絵描きレビュー
みなさんこんにちは、イラストレーターのrefeiaです。以前、PC USERでワコムのCintiq Proをレビューさせていただきました。その余勢を駆って、編集Gさんに「今度出る〇〇社の××がよさげなので気になるんですけど。レビューの流れがあったらアサイン検討してもらえますか？」的なメールを送ったんですよね。 それで、ついでの世間話的に「そういえばSurface Proもペンが新しくなって楽しそうですね」と書いたら、「じゃあSurface Pro送ります」と即答されまして。そしてそのあとすぐ「 iPad Proも送ります！」と……なんかお気軽に興味ある製品を触りたかっただけなのに、なし崩し的に旬の製品2つをレビューすることになってしまいました。「〇〇社の××」は完全スルーです……担当さんのこの有能感よ……。 というわけで、新しいSurface Proと、iPad Pro 10.5インチ版を
WordPress Bogo をカスタム投稿タイプでも使う - Qiita
Bogo とは WordPressで多言語サイト運用するならこのプラグインが便利。 カスタム投稿タイプでも使うにはちょっとしたカスタマイズが必要 コード プラグインで bogo_localizable_post_types というフィルターフックが用意されてるのでそれを使えばOK。 $localizable に投稿タイプ名が配列で入るので、加える。 <?php /** * Support custom post type with bogo. * * @param array $localizable Supported post types. * @return array */ function my_localizable_post_types( $localizable ) { $localizable[] = 'custom_post_type_name'; return $lo
Expired - domain expired
Domain Suspension This domain has expired and is now suspended. If you would like to restore it please contact the registrar used to register your domain. You can check the registrar used for your domain at whois.CO. Este dominio ha expirado y está ahora suspendido. Si usted es el titular del dominio y quisera recuperarlo, por favor contacte el registrador que fue usado para registrar el dominio.
アニメ映画『GODZILLA -怪獣惑星-』の特報が解禁、ついにゴジラの姿が出現！ - ファミ通.com
ラストカットには“ゴジラ”とおぼしき巨大生物の姿が 2017年11月17日全国公開予定のアニメーション映画『GODZILLA -怪獣惑星-』。同作の特報が7月8日から順次劇場上映されることに先立ち、Web先行で解禁された。 以下、リリースより。 世界最速！特報、解禁‼ ゴジラ”の姿が、ついに出現！ あの咆哮が、二万年後の地球に鳴り響く!! 2016年公開の邦画実写映画で堂々の興行収入No.1（82.5億円）を記録した『シン・ゴジラ』（庵野秀明総監督）。徹底的なリアリティをもって描かれた様々な描写が観客の心をつかみ、第40回日本アカデミー賞では、最優秀作品賞など最多7冠を獲得しました。 次のステージへ歩みを進める“ゴジラ”が本年11月に解き放つのが、映画『GODZILLA 怪獣惑星』です。日本でアニメーション映画が初めて公開されてから100周年という節目の年に、ゴジラ映画史上初のアニメゴジラ
アニメ好きの尾崎裕哉、映画「エウレカセブン」主題歌担当に「凄く光栄」
「交響詩篇エウレカセブン」は2005年から2006年にかけてテレビ放送された人気アニメ。このたび「交響詩篇エウレカセブン ハイエボリューション」として今年9月より3部作で劇場公開されることが決定した。3部作の第1弾「交響詩篇エウレカセブン ハイエボリューション1」では英雄アドロックを父に持つ主人公・レントンが、葛藤しつつも父が歩んだ戦いの世界へと身を投じていく姿が描かれる。 尾崎は、レントン同様伝説の父を持ち「父の成し遂げられなかったことを果たしたい」という思いで父親と同じ道を歩んでいることから、今回主題歌を担当することに。映画を彩る新曲「Glory Days」は、いしわたり淳治、蔦谷好位置が参加したアップテンポなナンバーに仕上がっている。尾崎は主題歌を担当することについて「初めて映画の主題歌を担当させて頂けるという事と、特に自分はアニメが好きで、その中でも『エウレカセブン』のような素晴ら
「ジャンプお色気騒動」に思う - 紙屋研究所
これな。 ジャンプお色気♡騒動。【法律家版】 - Togetterまとめ ぼくもエロマンガを読み、そして「楽しんで」いるし、（エロマンガとはとても分類できないが）今回槍玉にあげられた『ゆらぎ荘の幽奈さん』は、小４の娘も愛読している。 「そのまま真似る」ということはない まず、「子どもが性暴力マンガを読んで、性暴力をそのまま真似る」かどうかという問題（「そのまま」がミソ）。ここにはそう難しい問題はない。 感覚的には、小学校に入ってからは、だいたい虚構と現実の区別はつくだろう、ある程度わかってないやつがいたとしても、小３〜小４くらいには大丈夫だろ、という感じ。 わかっていなくて、『ゆらぎ荘の幽奈さん』読んで、おっぱい揉むのはキモチよさそうなので、やってしまいそうな男の子とかいるかもしれん。 そういうコは、「有害マンガ」をとりあげるんじゃなくて、性暴力はいけないということを実際に教えたほうがよい
ワタミの求人広告を検証してみたが、やっぱりワタミはダメなのでは - 弁護士三浦義隆のブログ
ワタミの求人広告が話題を呼んでいるようだ。 headlines.yahoo.co.jp 月給20万2100円の中に、127時間分の「深夜みなし手当」3万円と、「営業手当」1万円を含むという内容。 これが「127時間も時間外労働させるつもりか」と受け取られて炎上したようだ。 この求人広告についてワタミ側は、概要以下のとおり釈明している。 夕方に出勤する日があるから所定時間内でも深夜労働が生じるため、その分の手当を給与に組み込んだもの 127時間は理論上の最大値として表示しただけ そこで、ワタミの言い分と求人広告を突き合わせて検証してみよう。 1．深夜勤務が予定されている場合に固定深夜手当を定めること自体はおかしくない 2．月127時間分の固定深夜手当もただちに長時間労働を意味するとはいえない 3．「127時間は理論上の最大値」の実際上の意味 4．ワタミの給料は時給換算でいくら? 4-1．基本
ウサミンネット※わーにんぐ！※
ｴﾏｰｼﾞｪﾝｼｰ! ｴﾏｰｼﾞｪﾝｼｰ! 侵入者の電波をｷｬｯﾁしたｳｻ！ あなたは……そうですか。来て、しまったんですね？ あんなに「来てはいけない」って言ったのに……ふふ、しょうがない人ですね。 ……いいですか？ ここから先はｳｻﾐﾝ星。強力なｳｻﾐﾝ電波が飛び交うある意味でｷｹﾝなｾｶｲ ｳｻﾐﾝ星人でもないものが普通に入口から入ろうものなら、大変なことになるでしょう。 進むには相応の覚悟が要りますよ？ それでもあなたは……なんて、聞くのも野暮ですね。 ――わかりました。だったら、ﾅﾅはもう何も言いません。あなたが思うようにしてください。 なので、これはﾅﾅの独り言です。 ここから先はｳｻﾐﾝ星、ｳｻﾐﾝ星人の合言葉を知らない者はその姿を見ることもできません。 さぁ、それではあなたに問いましょう。
読者「電子書籍なのになんで安くないんだ！」→出版社「いや電子の方が原価が高いし……」 - 週末5分間 英語クラブ byコツログ
読者「電子書籍なのになんで紙と同じ値段なんだ！安くしろ！」 出版社「すいません。社内で検討します（いや電子の方が原価が高いし……）」 出版社で電子書籍の制作や販売に携わっていたら、誰もが上記のようなやり取りを経験したことがあるはずだ。 anond.hatelabo.jp 上記エントリーに対して「もっと安くできるだろう」という意見もあがっている。 私はこれまで出版社の編集者として、紙の書籍も電子書籍にも携わってきたが、正直なところ電子の方が原価がかかり、原価を回収するのも困難だ。 紙の書籍の場合、1000円の本を初刷り1000冊で販売する際の内訳は以下になる。 ①～④の合計は1000円だ。 ここでおかしなことに気づく。 あれ、利益が出ていない……？ そう、①～④はすべてコストである。 初刷りと言われる最初に印刷所で刷る分の1000冊を販売するだけでは利益は出ないのだ。 出版社の利益は、100
ハッカー向けではない高機能エディタが欲しい
どうもエディタというと、古くはVimだったり、新しいのではVSCodeだったり。 それらは凄くいいんだけど、ハッカー向けの拡張前提で作ってあるので、事務関係が多い仕事場ではメリットが薄いと感じる。 要求定義が全く定まっていないので申し訳ないが、リテラシー低くてネット接続も色々問題ある職場でも使える高機能エディタってのは需要あると思うんだ。 【追記】 1日放置してたら反響すごかった。こんなふわっとした投稿を読んでくれるとは。 秀丸という意見が凄く多くて個人的には使ってみたい。 ただ、色々考えてほしいのはエディタ本体ではなく環境そのものなんだと改めて思った。 ぶっちゃけ省庁管轄なので自由に入れられるものなんてないんだが、せめてエディタ周りだけでもマシにできないかと思っているんだ。
客のせいでブラックなんだけど
客といっても接客業でクレーム来るとかいう話じゃない。 職はIT系でプログラム書いてる。 会社だけで見るとホワイトな方（web系やベンチャー系とかと比べたら普通なのかも）。 数日前に twitter でホワイトバイトとか言って話題になってた、youtubeききながら作業したり、お菓子食べてもいいとかはもちろんだし、 上下関係も特にないし、出社が数分送れたくらいで何も言われないし、隣のビルのスーパーに飲み物買いに行ったっていい。 ここまでだとすごくホワイトに見える。 というか、会社単体で見れば残業と給与以外はホワイトなんだと思う。 ただ残業は忙しいときは毎日、日が変わるまで会社にいることもある。 逆に暇な時は社内ニート状態で好きにツール作ってみたりOSSいじったりもできるほどに極端。 で、一見楽そうに見えるが最近はやる気が全く起きないし仕事行くのにストレスがたまる。 これが本題なんだけど、客が
Twitterの検索API & Twitterでの検索術
gistfile1.md twitterの検索術 (search/tweets と search/universal) 注 search/tweets では一週間以上前のツイートは検索できないので注意 search/universal は公式のConsumerKey/ConsumerSecretでないと使用できない 当方では一切の責任を負いません 使いそうなクエリ群 "島風 かわいい" - 島風 かわいいが含まれるツイートの検索 島風 OR 天津風 - 島風か天津風が含まれるツイートの検索 島風 -天津風 - 島風が含まれ天津風が含まれないツイートの検索 #島風 - ハッシュタグ島風が含まれるツイートの検索 from:user - ユーザーuserのツイートを検索 to:user - 宛先がユーザーuserのツイートを検索 @user - リプライ@userが含まれるツイートの検索 島風
fillin - 任意のコマンドを対話型入力に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コマンドを入力する時、多くはオプションを指定して実行します。それらは非常に数多くなることがあり、一行のコマンドが長くなってしまいます。その点、対話型のコマンドでは指定された情報を順番に入力していけば良いので分かりやすくなります。 fillinは任意のコマンドを対話型にしてくれるソフトウェアです。 fillinの使い方 例です。fillin コマンドに続けて実際のコマンドを書きます。その際 {{}} で囲むことで入力が対話型になります。 $ fillin echo "Hello {{lastname}} {{firstname}}" lastname: Atsushi firstname: Nakatsugawa Hello Atsushi Nakatsugawa : を使うと入力が
appr-wrapper - Apple Payを手軽に実装できるJavaScriptライブラリ
Appleの提供する決済システムApple PayはiOS、macOSユーザにとっては便利な決済方法となっています。通常Webサービスレベルで提供されるところが、OSと関連した形で使えるのが特徴です。また、決済に対して障壁の少ないApple IDが使えるのも利点です。 そんなApple PayをWebシステムで手軽に使えるようにするのがappr-wrapperになります。 appr-wrapperの使い方 こちらはデモです。決済ボタンがあります。 決済を開始しました。 筆者アカウントの場合、請求先住所の問題で失敗します…。 appr-wrapperではサンプルのJavaScriptコードも提示されています。この方法に沿って書くことで、簡単にApple PayをWebブラウザ上で実現できるようになります。小さなコマースに組み込んでみるのも良いですし、ちょっとした物販で使っても良さそうです。
スクリーン共有がはじまったら通知をオフにしてくれる『Muzzle』 | 100SHIKI
最近はスクリーン共有ができるアプリが増えてきた。 Slack、Skype、ハングアウトなどなど…。 ただスクリーン共有しているときに通知が届くと気まずい雰囲気になることもあるだろう汗。 そこで登場したのがMuzzleだ。 このアプリを導入すれば画面共有中には通知を自動的にOFFにしてくれるようだ。ちょっとした機能ではあるが、便利ですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【速報】GAにこっそり増えていた重大な新機能「ユーザー指標」とは？ 今すぐに有効にするべきか否か | 衣袋教授の新・Googleアナリティクス入門講座
まとめよう、あつまろう - Togetter
実写映画『BLEACH』ビジュアル初公開 一護・福士蒼汰が「斬魄刀」を手に （CINRA.NET） - Yahoo!ニュース
親から子に植えつけられる呪詛とは→母と娘の関係の難しさについて考える人々「ウチはまさにこれ」
MediumライクなUIのツールバーで任意のテキストをシェア出来るようにするスクリプト・「share-this」
ページの使い方ツアーを実装するjQueryプラグイン「jquery-page-tour」:phpspot開発日誌
パフォーマンスを最重要視したWordPressテーマフレームワーク・「Astra」
