Wandbox for PHP/Hack @melpon さんと @kikairoya さんが作成された Wandbox をベースに、PHP を異様に充実した形にして公開しました。 サポートする言語 PHP Hack (HHVMのみ) サポートする処理系 PHP 5.2~ HHVM (比較的新しいリリースとLTSと開発版スナップショット) Quercus (JVMで走るPHP処理系) HippyVM (RPython(PyPy)で実装された処理系) PyHP (RPython(PyPy)で実装された処理系) PHPPHP (PHPで実装された処理系) その他の機能 PHP_CodeSniffer によるコーディングスタンダード逸脱の検出 PHPMD による静的解析 phpcpd によるコピペ検出(事実上使い道がない) 何が嬉しいか? 関数の動作の確認を手軽に行いたい場合や遭遇した問題を最小
iOS8からプッシュ通知の仕様が変わり、プッシュ通知アクション機能の追加などが行われました。 またそれにともなって、今まであった通常のプッシュ通知の登録、プッシュからアプリを開いた時のコールバックのメソッドが変更になりましたので、軽くまとめてみました。 通常のPush通知 APNSサーバーへの登録 iOS7まで [[UIApplication sharedApplication] registerForRemoteNotificationTypes: (UIRemoteNotificationTypeAlert | UIRemoteNotificationTypeBadge | UIRemoteNotificationTypeSound)]; UIUserNotificationType types = UIUserNotificationTypeBadge | UIUserNotific
イギリスBBCのクイズバラエティ番組「QI」の公式アカウントが、4月29日にTwitterに投稿した世界一小さい哺乳類の画像が話題だ。画像には人差し指に乗るほど小さい哺乳類が写っており、ネットからは「ちっちゃすぎる!」「かわいい!」などのコメントも見られる。 For Bat Appreciation Month, meet the bumblebee bat. The world’s smallest known mammal by length weighs just 2 grams… pic.twitter.com/LL0ftVmCuO — The QI Elves (@qikipedia) April 29, 2015 この動物は「キティブタバナコウモリ(マルハナバチコウモリ)」。コニカミノルタのホームページによると、タイ西部の限られた鍾乳洞に生息するとされる。大人になっても、体長は
明治から昭和にかけて海底炭鉱によって栄えた、通称「軍艦島」。最盛期には東京の9倍もの人口密度を有していたのが長崎市・端島です。その歴史と魅力にせまるWebサイト、「軍艦島アーカイブス」が公開されました。 2014年に公開され大きな反響のあった4K映像に加えて、かつて軍艦島に居住していた伊藤千行氏(1918-1992)の写真や西日本新聞社が所蔵する写真などを織り交ぜて、軍艦島の成り立ちやかつての島内の様子をたどっていくものとなっています。全8話の構成のうち、現在公開されている第1話~第3話までの内容をご紹介します。 江戸時代後期、長崎半島の西の沖合に浮かぶ「端島」で石炭が発見され、漁師らによって長崎などの町で売られていたという。このころの面積は現在の1/6に満たない小さな岩礁のような島だった。 明治に入ると本格的に竪坑が掘られ、良質な石炭の産出地として注目されるようになる。1890年には三菱
イントロダクション 2012年5月、WebAIMではスクリーンリーダー利用者の好みに関する調査を実施した。この調査の有効回答者数は、1,782名であった。今回の調査は、初回のWebAIM スクリーンリーダー利用者動向調査(2009年1月実施):英語のフォローアップ調査であり、第2回調査(2009年10月実施):英語や第3回調査(2010年12月実施):英語のフォローアップでもある。 免責及び注意事項 四捨五入により、合計が100%にならない場合があります。 各設問に対する回答者数の合計(n)は、その設問に回答しなかった回答者がいた場合には、1,782になっていません。 標本は、全てのスクリーンリーダー利用者を代表するものではない場合があります。 将来的にこのような調査をまた実施したいと考えています。推奨したいことや設問に加えてほしいことなどがございましたら、WebAIM宛にお寄せください。
クライアントサイドで JavaScriptでFileReaderを使用してファイルの処理をする際、稀にXML文書を処理する必要に迫られることがあります。その時必要な実装の例と注意点を記載します。 XMLHttpRequestとFileReaderの違い XMLHttpRequestの場合、ブラウザがデフォルトでDOMを構築するため、そのDOMを元に文書の処理をできますが、FileReaderからXML文書を処理する場合はファイルをテキストとして処理するか、バイナリとして処理するかのどちらかしか無いため、プログラム側で明示的にDOMを構築させる必要があります。 実装例 デモ 下記のようなXMLファイルをJavaScriptで読み込む場合、 <doc> <title id="doc-title">テストXML文書</title> <chapter class="chapter first-ch
(他に知っているものがあれば修正リクエストください!) Replia psdからObjective-C/Swift等のコードを出力してくれる。有料 http://www.replia.io/ Flux アニメーションエディター xcodeのプロジェクトを吐いてくれる http://www.nthstate.com/ PaintCode おなじみのdrawrectエディター PaintCodeで作った図形のコードをObjective-C/Swift等のコードを出力してくれる。有料 http://www.paintcodeapp.com/ LaneKit railsのような構文でモデルをObjective-C https://github.com/larryaasen/LaneKit objective-c-generator-class 名前の通りObjective-Cのクラス構造をGUI上
Non Visual Desktop Access (NVDA) は Windows を音声読み上げと点字出力で操作するためのソフトウェア(スクリーンリーダー)です。 NVDA 日本語版は NV Access がリリースする NVDA に日本の利用者のための機能を追加したものです。 NVDA日本語版 ダウンロードと説明 GitHub releases OSDN での NVDA 日本語版の配布は終了しました。 過去にリリースした NVDA 日本語版の実行ファイルについて、 OSDN 運営元によるウィルス検査が行われており、一部のリリースについて、ごく一部のエンジンが「安全でない」と判断しました。 NVDA 日本語版の開発とリリースは、 公開のソースコードとビルドシステムを使い、 独自にコードサイニング証明書を使用し、 ユーザーの安全に細心の注意を払って行っております。 実行中の Window
タイトルは釣りですw document.documentMode === 11 と、1行で判別できます。 ただし、IE11を他のIEと一緒くたにして扱うと弊害の方が多いです。 IE11の変更点は、IE11 Preview における互換性の変更点 (Preliminary)にMS自身がまとめているが、そこに書かれていないことで、影響が大きそうなものが一つある。 従来のIE判別で重用されてきたIEかどうかをたったの1行で判別する方法が効かない。 つまり、コメント(/* */)で囲まれた@cc_onステートメントは文字通り単なるコメントとして無視される。 クリック ボタンのクリックでalertが出ます。(onclick="alert(/*@cc_on!@*/false)") IE10までは"true"、IE11とIE以外は"false" 一方、IE独自実装のdocument.documentMo
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
スマホからのアクセスを判別して動作を切り替えるCSS、PHP、Javascript、.htaccess CSSで切り替える デバイスの幅によって動作をきりかえます。下記だと最大幅480pxの場合は「sp.css」を参照します。 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="./layout/sp.css"/> <link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="./layout/pc.css" /> PHPで切り替える ユーザーエージェントを判別してPHPで条件分岐します。 <?php $ua=$_SERVER['HTTP_U
<script type="text/javascript"> <!-- document.write(window.navigator.appVersion); // --> </script> <script type="text/javascript"> <!-- var ua = navigator.userAgent; if (ua.match(/Opera|OPR\//)) { var type = (ua.match(/Mini|Mobi|Tablet/)) ? "Opera Mobile" : "Opera"; if (ua.match(/Mini\/([\.\d]+)/)) { document.write("Opera Mini " + RegExp.$1); } else if (ua.match(/OPR\/([\.\d]+)/)) { document.write
※以下はWatch OS 1の情報です。Watch OS 2も今後対応して行こうと思います。 Apple Watch アプリ(以下、Watch App)の開発を担当させてもらって、Apple Watch も購入しました。なので、開発について思ったことを書こうと思います。 まだ書きかけですが特に[ハマったところ]や[Tips]あたりがApple Watch アプリ開発の参考になれば嬉しいです。 参考:https://developer.apple.com/watchkit/ 概要 ・Apple Watch アプリ(以下、Watch App)は単体では提供できず、iPhoneアプリにBundleする形でApp Storeから提供する。 ・Watch Appは、常にiPhone側とWifiかBluetoothで通信して動作しているため(設計思想で後述)、iPhoneが近くにないと動作できない。
それぞれのフェーズの詳細を書いておきます 見積フェーズ 見積り用のQ&A 見積フェーズでは発注側に企画書や画面イメージ、参考になる他アプリを提示してもらい見積金額を提示します。見積用の資料としてRFPがあれば曖昧な仕様にならずに見積もりを行うことも出来るかもしれませんが、発注側がRFPを用意してくれることは稀です。もし発注側が大手で契約を頻繁に行なっているようであればRFPを作成して頂くほうがスムーズに進みますとダメ元で言ってみるのも有効です。 そもそも、発注側はまずは規模感を知りたい、他社と比較したい事が多く、技術的に難しい場合があっても大きな工数や金額を出してしまうと話が進まなくなってしまうので、見積書には技術的に課題があるポイントや開発する上でのリスクを明示し、それを説明し工数・金額の数字の妥当性を理解してもらいましょう。またこの段階で仕様認識の齟齬がある場合も、上記のやりとりで早め
<script type="text/javascript"> <!-- document.write("使用されている OS は " + window.navigator.platform + " です。"); // --> </script> <script type="text/javascript"> <!-- if (navigator.platform.indexOf("Win") != -1) { document.write("あなたは Windows を使用されています。"); } else { document.write("あなたは Windows 以外を使用されています。"); } // --> </script> <script type="text/javascript"> <!-- var os, ua = navigator.userAgent; if (u
PRを出すときとかに、レビュワーが見やすいようにコミットを1つにする。 自分以外使う人がいない気がする。 コマンド # masterに移動 git branch feature/backup1 git fetch git checkout master # コミットを纏める git merge --squash feature/something git branch feature/backup2 # 新たにブランチを作り直す git branch -D feature/something git push origin :feature/something git branch feature/something git checkout feature/something git push origin feature/something git branch -D master g
2015/11/13 AppStoreにて正式にFirefoxが公開されました ですので、普通はもう自分でビルドしなくてもいいです。 Firefox ユーザの皆さん、ついに iOS でもいつものブラウザがお使いいただけるようになりました! | Mozilla Japan ブログ Firefox Web ブラウザを App Store で Chromeも使いますが、Firefoxにとっても愛着を感じております。iOS版の開発も伝えられていましたが ソースが公開されているので、待ちきれずに自分でビルドしてみることにしました。 xcodeを使って実機デバッグできる環境が必要です。iOS Developer Programとかですね。 (円安でさりげなく値上がりしていますね) 手順は、 https://github.com/mozilla/firefox-ios に掲載されていますので その通り実
Twitterでの検索結果をテキスト形式で保存。 様々な検索結果をテキストへ保存し、テキストを読み込み形態素解析。 そこからマルコフ連鎖で文章を生成し、ツイートPOSTするまで。 #!/user/bin/env python # -*- coding: utf-8 -*- from requests_oauthlib import OAuth1Session import json import sys import MeCab import random import re while True: search_words = raw_input(u"words: ") C_KEY = "*************************************" C_SECRET = "*************************************" A_KEY = "**
Content Security Policy 1.0 日本語訳 このページ は、W3C により,副題の日付にて勧告候補として公開された Content Security Policy 1.0 を日本語に翻訳したものです。 この翻訳の正確性は保証されません。 この仕様の公式な文書は英語版であり、この日本語版は公式のものではありません。 【 と 】で囲まれた部分は【訳者による注釈】です。(他のウェブ関連仕様の一覧と共通機能の詳細) CSP に関する和訳参考記事: mozilla, HTML5Rocks 注記: 原文の中の他の仕様へのリンクの多く(特に HTML 仕様)は移動されていたので、新しいリンク先に修正しています。 更新:2014-06-20 (公開:2012-01-03 ) 本文ダブルクリックで当該箇所の原文が表示されます(左下隅に各種 表示切替ボタン — CSS や DOM の対応
このドメインを購入する。 obomemo.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
こんにちは Honma です。今回はデザインする際に役立ちそうな SVG (Webkit は CSS3) を使った、Grayscale Effect と Blur Effect (ぼかし) の利用方法です。記述はすごく簡単! HTML <!– Grayscale Effect –> <img id=”grayscale-effect” src=”URL” alt=”” /> <!– Blur Effect –> <img id=”blur-effect” src=”URL” alt=”” /> /* Grayscale Effect */ #grayscale-effect { -webkit-filter: grayscale(100%); filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/sv
REDbot は、 HTTP リソースの問題を、HTTP の定義や広く使われているルールに基づいて診断し、問題点があればそれらをどう改善すべきかの手助けをしてくれるオンライン・ツールです。 自作の PHP スクリプトで生成したレスポンス・ヘッダをチェックしたり、ページ中のリソースに対するキャッシュの状態をチェックしたりするのに役に立つと思います。 入力方法 Enter a http:// URI to check 欄に診断したい URL を入力し、リターンキーを押すだけですが、add a header で、リクエスト・ヘッダ中に含ませたいフィールドを追加することができます。例えば、User-Agent や Referer に応じてレスポンスが異なるページをチェックしたい場合に利用します。
オンラインで利用できるカラーツール サイトの紹介です。 The Color Wizard 指定色またはランダムな色をベースに、カラースキームを生成します。
Web Content Accessibility Guidelines 1.0 W3C Recommendation 5-May-1999 superseded 18 May 2021 This version: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505 (plain text, PostScript, PDF, gzip tar file of HTML, zip archive of HTML) Latest version: http://www.w3.org/TR/WAI-WEBCONTENT Previous version: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990324 Editors: Wendy Chisholm, Trace R & D Center, Uni
魚は、感情はおろか「痛点すらない」という意見が一般的ではありますが、最近では「痛みを感じるのではないか」という研究結果が発表されており注目が集まっております。そんな中こちらの写真にも注目です。サメの周りを魚が泳いでいるようなのですが、まるで彼らが連携してサメを威嚇しているようにみえるというのです。そうそれはあの物語「スイミー」にそっくりです。 スイミーは国語の教科書で誰もが一度は読んだことがある(今の世代が読んでいるかは定かではございませんが)魚の物語で、オランダ出身の絵本作家レオ・レオニ作の絵本が原作となっている。ざっくり言うと、黒い魚が他の赤い魚と連携して、大きな魚の形状を模して巨大なサメを追い払うというフィクション。 しかしこの写真を見るとそれもフィクションではなく現実ではないかと感じさせられるのです。クイーンズランド州の浅瀬で見られた小さな魚は巨大なサメに怯えることなく、連携して威
CMS(コンテンツマネジメントシステム)というとつい大げさなものを思い浮かべてしまいます。PHPやRuby、Python、Perl、nodeなどのサーバサイドの言語、さらにMySQLやPostgreSQLといったデータベースなどです。環境整備だけで面倒になってしまいます。 そこで紹介したいのがGravです。データベース不要で手軽にセットアップ、利用ができるCMSとなっています。 Gravの使い方 GravはPHP 5.4以上で動作します。データベースは不要なので使えるWebサーバは多いと思います。基本の画面は次のようになります。 ファイル構成は次のようになっています。PHPファイルでMarkdownファイルを読み込んで表示する仕組みになっています。 コンテンツはMarkdownで作成します。 新しいページはファイルを追加するだけです。 フラットなファイル管理なのでGitやDropboxなど
「WebAPIのステートレスなCSRF対策」という2011-12-04の記事がありました。 ここで説明されているCSRF対策は、 GET、HEAD、OPTIONSメソッドのHTTPリクエストはCSRF保護の対象外 HTTPリクエストにX-Requested-Byヘッダがなければエラーにする という非常にシンプルなものです。 そして、この対策の原理として以下の説明がありました。 form, iframe, imageなどからのリクエストではHTTPリクエストに独自のヘッダを付与することができません。独自のヘッダをつけるにはXMLHttpRequestを使うしかないわけです。そしてXMLHttpRequestを使う場合にはSame Origin Policyが適用されるため攻撃者のドメインからHTTPリクエストがくることはない、ということのようです。 ここで、 XMLHttpRequestを使
こんちには! ファッションやお買い物が大好きなかとぅーです! 今や生活にしっかり浸透してきているEコマースやソーシャルメディア! 最近ではスマホのアプリでモノを気軽に売るできるC2Cコマースサービスの登場で 個人でも簡単に「売り手」になることができるようになってきました。 今回は私が良く利用しているおすすめの「フリマアプリ」をご紹介します!!! LINE MALL(ラインモール) 企業:LINE メインターゲットユーザー層:20代以降の女性が中心 料金:出品・購入手数料無料、購入代金の1%はポイントとして加算され次回の購入時に1ポイント1円として利用できる。 LINE MALLはUIがシンプルでかわいい感じが気に入っています。 特徴はユーザー同士の直接的な金銭のやり取りはなく、最初から最後までLINE MALLが管理してくれること! 金銭的なトラブルを防止できるので、安心です。 Fril(
あとは右側にcssと記載されている箇所がありますのでそこをコピーするだけです。 cssの:beforeで設定してあげて下さい。 シェイプをcssで作成したい場合下記サイトもおすすめ。 CSS3 Shapes ボックスのシャドウを簡単に生成「box-shadowジェネレーター」 http://www.bad-company.jp/demos/box-shadow/ ボックスにシャドウをcssで付けたいときに使用します。 各値を変更することでソースコードの値が変更されるのでコピーしてから、 コーディングしているcssにペーストするだけでcss3のbox-shadowが適用されます。 cssをsassに変換「CSS 2 SASS/SCSS CONVERTER」 http://css2sass.herokuapp.com/ cssをsassに変更できます。 昔cssで書いたのをsass/scssで
A collection of inspirational websites made by real Squarespace users. Stories and solutions for the modern entrepreneur. In-depth guides and videos about the platform, our services, and how to get started. An online community for Squarespace users and professionals to discuss best practices and seek advice. Free, online sessions where you’ll learn the basics and refine your Squarespace skills. Ea
みなさまこんにちは、クリエイターブログ初登場のあつこです(ΦωΦ) 自社サービスのフロントエンド周りのエンジニアとして、せっせとコーディングをしております。 主にHTML/CSS/たまにJSの話ができたらいいなぁ、と思っています。 弊社では開発本部全体で社内外へ勉強会を行っていたりするのですが、 (私もAWDDでお話しました!) 先日社内向けに「コンテンツ・モデル」についてお話する機会がありました。 その際に調べたこと・話したこと等を、簡単にまとめてみました。 実際に勉強会に使った資料がコチラ。 コンテンツ・モデルってなに? HTMLで使用する要素は主にブロックレベル要素とインライン要素に分類されます。 資料内にもあったのですが、インライン要素の中にブロックレベル要素を入れると気持ち悪いってルールを漠然と持っている方もいるかと思います。 (私がそうでした・・・) そもそも何でそんなルールな
重要なお知らせ:このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。 Webデザインに黄金比を取り入れよう - Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。 黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です。「その美しさをWebデザインでも」というのがエントリの趣旨です。 Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です(ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している)。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。 Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそ
こんにちは、フロントエンドエンジニアのあつこです。 先日システム部の先輩に「2カラムのデザインがなんで実装できるのかよくわからない(´・ω・)」と言われたので、 2カラムのレイアウトを例にCSSの定番テクニック「clearfix」について簡単に解説してみたいと思います。 clearfixってなに? 例としてベタな2カラムのレイアウトを用意しました。 ベタですね。 (MacのChromeエクステンションでキャプチャとったらスクロールバーが映り込んでた(´・ω:;.:...) ちなみに、大きさはこんな感じ HTML <header>header</header> <div class="wrap"> <aside class="sideCol">sideCol</aside> <article class="mainCol">mainCol</article> </div> <footer>f
Googleの検索結果に顔写真やレビューが表示されていることがあるかと思います。 これはページの内容と検索クエリの関連性についてユーザーが把握するために行われているものです。 よく目にするのはECサイトのレビューやブログ記事の著者情報かと思いますが こういった情報が他の検索結果とは違う形で表示されるので、CTRも高くなる傾向があります。 効果例 わかりにくくて恐縮ですが、とある案件ではGoogle Analyticsの検索エンジン最適化での数字において 下記のように27.56%の向上が見られました。 ※リッチスニペットが表示された前後1週間での特定キーワードでの比較結果 なお、Googleがサポートしているコンテンツの種類は下記の7つですが、今回は渋いところを攻めて「イベント」を見てみることにします。 レビュー 人物 商品 会社と組織 レシピ イベント ★今回はこれ 音楽 イベント情報をリ
ブラジルワールドカップは、いよいよベスト8が出揃いましたね。 深夜のサッカー観戦で寝不足気味の制作部ディレクターのなかはしです。 僕は自社サービスのディレクターとして働いてまして、職業柄、気になるWebサービスやアプリはなるべくたくさん使ってみるようにしています。 UXやUIを中心に見るわけですが、凄く勉強になるし自分が作り手として考える時の参考にもなるんですよね。 さて今回は、実際触ってみて工夫されてておもしろいなーと思ったローディング表現(おもしローディング)なスマホアプリを紹介してみようと思います。 ページを読み込んで表示されるまでの間によく出てくる、グルグルしてるこんなのとかの事です。 一瞬の時もあれば、読み込みに時間がかかる時はしばらくにらめっこすることになりますね。 Google+ 下に引っ張って離すと更新されますが、青赤黄緑のラインが出てきてピロピロします。 下に行くほど細く
先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLとCSSでお仕事をするようになって暫く経つのですが 未だにスタイル効かない、何故だ。。。→優先度が低かった!ってことがたまに起こります。 Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:... 今日はそんな「CSSにおけるスタイルの適応の優先順位」についてまとめてみました。 もくじ 0.デモの準備 1.基本の優先順位 2.タイプセレクタとclassセレクタ 3.親要素と一緒に指定する 4.idセレクタとclassセレクタ 5.つまりどうゆうこと? 6.最終奥義!important宣言 おまけ.IEのセレクタの限界のはなし 「ある程度なら知ってるよ!」って方は5.つまりどうゆうこと?から読んでもらえれば大丈夫かと思
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演(アウトリーチ活動)の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者(研究仲間や審査員、一般市民)へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー(私)によるDTPデザイン注意書き:Webと
こんにちは、デザイナーのタカハマです。「キーカラーは決まったけど、色数を増やすと変になる…」「いつも色選びがワンパターン」「色相環ってどうやって使うの?」そんな色選びのお悩みをズバっと解決するかもしれない、配色のコツをご紹介します。また、キーカラー選びの段階から悩んでいる方は、前回の記事(色の基礎知識と色彩心理)が役に立つかもしれませんので、あわせてご覧ください。 「ジャッドの色彩調和論」と配色のための3Step ひとくちに配色理論と言っても、ニュートンやゲーテに始まり多くの学者や画家がそれぞれの持論を展開してきており、これが正しいというものはありません。今回は、その中でも20世紀半ばまでの先人たちの色彩調和論を”4つの原理”にまとめた「ジャッドの色彩調和論」に焦点をあて、配色のための3Stepをご紹介します。 (本記事の内容に明らかな間違いがあれば、ご一報いただければ幸いです。) Ste
こんにちは。制作部の2児の父、近藤です。 最近HTMLを勉強し始めた新卒2年目の子に、 「簡単にできる、ちょっとカッコいいマウスオーバー表現ってありますか?」と相談されたので、 3分くらいで試せるエフェクトをご紹介したいと思います。 早速ですが、以下、完成例。 BUY ME A BEER! 最近良く見かける、ボーダーがアニメーションするエフェクトです。 埋め込み方 以下まるっとコピペして調整してみてください。 HTML <a href="#" class="btnBorderEffect"> <svg width="400" height="60"> <rect width="400" height="60" /> <text x="72" y="40">BUY ME A BEER!</text> </svg> </a>
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は? 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう!と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元:少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
こんにちわ。 コーダーのタムラです。 今回は自分が可愛い!おしゃれ!と思ったサイトのフッターを紹介したいと思います。 イラストがかわいい イラストが使用されていてとてもかわいく仕上がってます。ぴょこぴょこ動いてるサイトもあります。 旅もじゃ EHONICA(エホニカ) 旅モニ 玉名牧場 http://www.tamanabokujo.jp/ 愛犬厨房 http://www.i-ken.jp/ アーク引越センター http://www.0003.co.jp/ たかみ幼稚園 http://takami-kids.com/ 伊丹高台の日本茶専門店 茶舗木蔭 http://chaho-kokage.com/ 三陸フィッシャーマンズプロジェクト http://www.sanrikufisherman.jp/ フッターの高さにボリュームがあるサイト フッターの高さにボリュームが合ってサイト全体を印象付
こんにちはフロントエンドエンジニアのあつこです(ΦωΦ) 前回の記事の流れ的にAPIの話をするのかと思いきや、早速しません。 先日Firefoxでドはまりしたのでその時の対処方を備忘録的に。 (APIの話の続きは次に書きます、多分・・・) ちなみに8月中に滑りこみでスイカを食べました。唯一の夏体験… 事の発端 私は主に自社サービス開発のチームにおりまして、先日もサービスの管理画面のコーディングをしておりました。 で、表組の表示切り替えにタブっぽい表現を使うことになりました。 ソースはこんな感じ <ul class="tablink1"> <li class="current">tab1</li> <li><a href="#">tab2</a></li> <li><a href="#">tab3</a></li> <li><a href="#">tab4</a></li> <li><a h
こんにちは。すーさんです。 前回の記事に続きまして今回もkeynoteでつくるプロトタイプについてお送りしたいと思います。前回はデスクトップウェブサイト想定していましたが今回はスマホアプリverです。 完成型 まずは完成イメージから。前回に比べてかなり気合いをいれて作ってみましたw 素敵な夜景を検索できるアプリをイメージしてます。 TOP画面 ⇒ ヘッダーがある一覧画面 ⇒ 詳細画面と3画面の構成で 今回のポイントは前の画面の要素を上手く残しつつ遷移する、最近トレンドのアニメーション。 1)TOP画面 ⇒ 一覧画面 基本的なkeynoteの設定は前回同様「マジックムーブ」と「オブジェクトのイン」アニメーションの2つ。 最初のつなぎはマジックムーブです。 2)フェードインで出現するパネル ファル!ファル!ファル!ファル!っと現れる小さなパネルは、「インスペクタ」>「アニメーション」>「イン」
ブランドのイメージを伝えるのに、ブランドカラーはとても強い力を持っていますね。 Instagramの青やLINEの緑など、ぱっと見ただけでブランド想起できる、とても力強い要素のひとつだと思います。 最近、いろいろなサービスなどのブランドカラーを調べてみましたので、 調査中/作りかけではありますが公開しておこうと思います。 参考サイト Find Guidelines http://findguidelin.es/ ページ開いたとたんに楽しくなりました。 カラーパレットのダウンロードや、本家ガイドラインへのリンクもありますので、とても参考になりました。 BrandColors http://brandcolors.net/ すごい数!検索も良い動きで、とても参考になります。 カラーまとめ 他にも、サイトのガイドラインを参考にしたり、で作成したのが以下のリストです。 並べるとなかなか気持ち良いで
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 最近一段と寒くなってきましたが皆さんいかがお過しでしょうか。 私は寒さに弱いので、早速コートを出してきました。冬本番になったら何を着たらいいのだろう…… 先日GoogleスプレッドシートのデータをJSONで扱う機会があったのでここで、ちょっとまとめておきたいと思います。 もくじ 事の発端 Google Sheets APIとは 4ステップでデータを取得する JSON形式のデータをjQueryで整形する まとめ 事の発端 社内で運用しているチェックシートをもっと手軽にできないか、という要望があったのでチェックフォームを作りました。 チェック項目のデータはその他のものにも転用したい為、Googleスプレッドシートで管理しています。 イメージとしてはこんな感じ。 Googleスプレッドシートを選んだ具体的な理由はこちら。 wikiにWY
人気女優の杏さんが、担当しているラジオ番組で話して話題になった動画のご紹介です。映像でも酔ってしまうという人はご注意を! 杏さんによると、この動画はスイスのチューリッヒ室内管弦楽団によるPR動画で、使われている曲はベートーベンの弟子である、フェルディナント・リースが作曲したもの。五線譜のレールの上を、音符たちがジェットコースターのように突っ走り、高揚感を表現しています。 仕事で行き詰まった時や、イライラしている時などに観たら、ストレスが吹き飛ぶかもしれない爽快さがありますね!
IEが起動しない問題が発生していると話題となっている。この原因として詳しい状況はわかっていないが、YAHOOツールバーをアンインストールしたら起動するようになったとの報告もあるようだが、果たして何が起きているのであろうか。具体的な問題としては起動してもエラーなどの不具合でうまくブラウジング出来ないとのことだ。 いやぁパソコン使ってたら急にネットにアクセス出来なくなって1時間色々やってみた結果Yahooツールバーが原因だった、いやぁ思わぬところに敵がいるものだ(笑) — 畑中樹里也 (@jukky19) 2015, 4月 29 IE起動させるとエラー表示→再起動→エラー→・・・ で動かない(汗) で、何やらYahooツールバーっぽかったので アドオン停止させたら動いた。 PC前回起動時には問題なかったのに 何があったんだ? — かほかほ (@kahokaho01) 2015, 4月 29 I
フジテレビの朝の情報番組「とくダネ!」ノツイッターアカウントが批判を浴びている。事の発端は東北新幹線が停電し運転を見合わせている問題で、それに関する情報をツイッター上で収集していたところ、画像を投稿しているユーザに対し使用許可をとったうえで「取材を受けた等の投稿は遠慮してほしい」などという口止めを行っていた。 はやぶさ13号、停電により急停車 pic.twitter.com/VqJuYEXNwQ — すたじお抹茶 (@NNR_5128F) 2015, 4月 29 番組内では投稿された写真を掲載する予定だったのか、上記のようなツイートを行っているユーザに対し、一斉に写真利用許可を得ようとしていた。そこまではよかったのだがその後以下のように投稿者に口止めを行った。 また当番組から取材を受けた等の投稿は遠慮していただければと思います。よろしくお願いします。 写真提供をうけたうえ、取材を受けたこと
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTTP Guides Resources and URIs Identifying resources on the Web Data URLs Introduction to MIME types Common MIME types Choosing between www and non-www URLs HTTP guide Basics of HTTP Overview of HTTP Evolution of HTTP HTTP Messages A typical HTTP session Connection management in HTTP/1.x Protocol upgrade mechanism HTTP security Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-
Content Security Policy Reference The new Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring which dynamic resources are allowed to load. What is Content-Security-Policy? Content-Security-Policy is the name of a HTTP response header that modern browsers use to enhance the security of the document (or web page). The Content-Security-Policy header
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection サイトの安全化 HTTP Observatory HTTP アクセス制御 (CORS) HTTP 認証 HTTP キャッシュ HTTP の圧縮 HTT
Thank you for visiting OWASP.org. We recently migrated our community to a new web platform and regretably the content for this page needed to be programmatically ported from its previous wiki page. There’s still some work to be done. Last revision (mm/dd/yyyy): 08/31/2013 Introduction CSP stands for Content Security Policy. Is a W3C specification offering the possibility to instruct the client bro
HTTP Guides Resources and URIs Identifying resources on the Web Data URLs Introduction to MIME types Common MIME types Choosing between www and non-www URLs HTTP guide Basics of HTTP Overview of HTTP Evolution of HTTP HTTP Messages A typical HTTP session Connection management in HTTP/1.x Protocol upgrade mechanism HTTP security Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-
Content Security Policy (CSP)をgrunt-contrib-connectで設定するのにはどうしたら良いかという話。 やり方としては、grunt-contrib-connect タスクで CORS を有効にする - メモログと同様、middlewareのオプションに追加する。 middleware: function (connect, options) { return [ function (req, res, next) { res.setHeader('Content-Security-Policy-Report-Only', "default-src *; script-src 'self'; style-src 'self' 'unsafe-inline'; report-uri 'localhost'"); next(); }, // Serve
home rss search July 18, 2018 Nginx Secure Web Server with HTTP, HTTPS SSL and Reverse Proxy Examples Nginx is a secure, fast and efficient web server. It can be configured to serve out files or be a reverse proxy depending on your application. What makes this web server different from Apache, Lighttpd or thttpd is the overall efficiency of the daemon, the number of configuration options and how e
個人的には、Web PayのAPIは一貫性があり使いやすいと思います。 ですが開発者は、カード決済業務の知識に乏しい場合もあるため、一通りのAPIを試せると業務のイメージもつきやすかったりするのかな?と思って、WebPayのインタラクティブなAPIドキュメント(node.js)を作ってみました。(実際のドキュメント部分は、載せていません。一緒にドキュメントが表示されるイメージをしてください。) URL http://sleepy-lowlands-7086.herokuapp.com/webpay 【使い方】 例えば、次の「新しい顧客の作成」を選択した場合には、undefinedをクリックすると表示される入力フィールドに、以下のオブジェクトを設定します。※引数が文字列の場合は、値を""ダブルクオートで括る必要があります。
If you're not familiar with Content Security Policy (CSP), An Introduction to Content Security Policy is a good starting point. That document covers the broader web platform view of CSP; Chrome App CSP isn't as flexible. CSP is a policy to mitigate against cross-site scripting issues, and we all know that cross-site scripting is bad. We aren't going to try and convince you that CSP is a warm-and-f
弊社のホームページにCSP(Content Security Policy)を導入しました。CSPについては、はせがわようすけ氏のスライド「5分でわかるCSP」がわかりやすいと思います。以下にスライドの一部を引用します。 具体的には、以下のように指定して使います。 Content-Security-Policy: default-src 'self' この結果、以下のようにJavaScriptの記述が制限されます。 外部のJavaScriptの読み込みは禁止 HTMLソースに記述した<script>...</script>のJavaScriptは禁止 イベント属性(onload="xxxx"など)は禁止 何も書けなくなるじゃないかと思われるかもしれませんが、JavaScriptは全て*.jsファイルに記述すればよい、ということです。 CSPは、JavaScriptのコードとデータを分離して
このウェブサイトは販売用です! monoweb.info は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、monoweb.infoが全てとなります。あなたがお探しの内容が見つかることを願っています!
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection サイトの安全化 HTTP Observatory HTTP アクセス制御 (CORS) HTTP 認証 HTTP キャッシュ HTTP の圧縮 HTT
サーバサイド向けのライブラリについては、各言語向けのライブラリ配布用の仕組みおよび、本ページよりzipにてダウンロードすることが可能です。 ダウンロードして利用する場合は、依存している各ライブラリを別途ダウンロードする必要があります。 各ライブラリの利用方法については APIドキュメント の左上のプルダウンメニューから各言語を選択の上、閲覧できます。 各ライブラリの更新情報については、 開発者ブログ にてリリース時にお知らせしています。 Ruby CRuby 1.9.3以上の環境での動作をサポートしています。 RubyGems.org で配布しています。 コマンドラインより、以下のコマンドを実行するか、 $ gem install webpay Bundler環境下でGemfileに以下の通りに記述して利用できます。 gem 'webpay', '~>3.2' また、以下gemファイル、ソ
ヨーロッパ一高いマンションということで話題となっているのがこちら、モナコにある「Tour Odeon」である。もはや値段はケタ違いの487億円という信じられない値段である。モナコを一望でき、部屋には当たり前のようにプールが付いているのだという。内装もすべて360度見渡せる絶景となっているためもはやマンションというよりそういった施設だ。 このマンションは「Tour Odeon」といい、ヨーロッパで一番高いマンションとなっている。360度のパノラマビューが可能となっているこのマンションは、もはや「絶景」という言葉すらチープに感じるほど圧巻のしつらえ。更に45階からはスカイ・ペントハウスとよばれ、喫煙室・ジム・プールなど特別な施設が備え付けられた究極のマンションとなっている。 現在はCGでしか公開されておりませんが、実際にできた際には更に驚愕の建物になることは間違いないでしょう。 478億円とい
Here we are again. It’s too late for April Fools, so you can believe us when we tell you that we have two new patch releases for you: jQuery 1.11.3 and 2.1.4. These releases include a hot-fix for a rare bug in iOS 8.2 and 8.3. This is the only change. As with 1.11.2 and 2.1.3, we do not anticipate any issues when upgrading. However, if you do encounter bugs in upgrading from the previous versions,
林修の今でしょ講座 『イノッチもきょうイチ驚いた!科学で料理がこんなに美味しくなる!&葉加瀬太郎の音楽講座3時間SP』 より まず、最初に特売の牛肉と高級ステーキとの価格と科学的な違い! 固さに歴然の差! つまり特売肉を高級なお肉にするために科学的にこれらの ❏固い ❏水分の量が少ない ❏香が少ない をおぎなってしまえばいい! サラダ油を浸したキッチンペーパーで、スライスした牛脂を挟んで巻いてから120度のオーブンで15分、裏返して10分、焼き色だけをフライパンで30秒。最後に、アルミホイルで休ませる。 油でアクや臭みを取り除く 牛脂をしきつめ、和牛の香りをつける ラクトン類の和牛香をつける 【参考】特売の安い輸入牛肉を美味しくする方法!ためしてガッテンhttps://4knn.tv/how-to-bargain-for-cheaper-imported-beef-science-for-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く