常連

注目の的

質問力

回答者

拍手喝采

自己紹介

Macでgoogle chromeをフルスクリーンで起動する方法を教えてください。
OSはsierraです。アプリケーションを終了するときにウィンドウを閉じるのチェックは外しています。
chrome以外のアプリは前回閉じた時のサイズを保って起動されますがchromeはうまくいきません。
宜しくお願い致します。

macでchromeをフルスクリーンで起動する方法を教えてください

###jQuery Coda Popup Bubblesを改造したい
初めての質問です。

現在、jQueryのCoda Popup Bubblesを使用し、ツールチップを表示しています。
表示自体は問題ないのですが、表示の位置が固定されウインドウ内に収まってくれないため困っています。


###該当のソースコード
```ここに言語を入力
 $(function () {
           $('.bubbleInfo').each(function () {
               var distance = 10;
               var time = 250;
               var hideDelay = 400;
               var hideDelay2 = 500;
               var hideDelayTimer = null;
               var beingShown = false;
               var shown = false;
			   var delaySpeed = 200;
			   var fadeSpeed = 1000;
               var trigger = $('.trigger', this);
			   
               var info = $('.popup', this).css('opacity', 0);
               $([trigger.get(0), info.get(0)]).mouseover(function () {
                   if (hideDelayTimer) clearTimeout(hideDelayTimer);
                   hideDelayTimer = setTimeout(function () {
				   
                   if (beingShown || shown) {
                       // don't trigger the animation again
                       return;
                   } else {
                       // reset position of info box
                       beingShown = true;
                       info.css({
                           top: 120,
                           left: 23,
                           display: 'block'
                       }).animate({
                           top: '-=' + distance + 'px',
                           opacity: 1
                       }, 1, 'swing', function() {
                           beingShown = false;
                           shown = true;
                       })
					   ;
				   }
                   }, hideDelay2);
                   return false;
               }).mouseout(function () {
                   if (hideDelayTimer) clearTimeout(hideDelayTimer);
                   hideDelayTimer = setTimeout(function () {
                       hideDelayTimer = null;
                       info.animate({
                           top: '-=' + distance + 'px',
                           opacity: 0
                       }, 100, 'swing', function () {
                           shown = false;
                           info.css('display', 'none');
                       });
                   }, hideDelay);
                   return false;
               });
			   
           });
       });
```

###試したこと
jQuery UI の Position をうまく組み合わせたらcollisionの設定で調整できそうと思い、色々調べてみましたが、どう書き加えればいいのか全く分からない状態です。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

jQueryのツールチップを画面からはみ出さないようにしたい

お世話になっております。

いくつかのWEBAPIを利用する場合、「アプリケーションID」など、利用者・利用システムの識別情報をサーバへ送る必要がありますが、皆さまこれをどのように隠しておられるでしょうか？決め手がみつからずに難渋しています。

こちらで紹介されている方のように、ページをかませる方法もありますが、かませたページを他者からハック・利用される懸念、またブラウザがリファラーを必ず送ってくるとも限らないと思いますし...
http://freefielder.jp/blog/2011/11/yahoo-japan-web-api-id.html

隠す必要がない、とのご意見もあれば、ぜひお聞かせいただければと思います。

WEBAPI利用時のアプリケーションID隠匿について

今プログラムを勉強している初心者です。
宜しくお願いします。

javascript(Node.js)でWEBアプリ製作を考えているんですが、調べてみるとNode.jsにむいているWEBアプリはリアルタイムのWEBアプリと書かれていたのですが、リアルタイム以外のWEBアプリ・サービス（例えば、じゃらんのような宿泊サービスなど）を考えている場合、言語設定の選択肢としてサーバーサイドはjavascript(Node.js)ではなく、phpやrubyを言語として選択した方がいいのでしょうか？？

お忙しい中申し訳ないですが、アドバイス頂けると幸いです。
宜しくお願いします。

Node.jsでWEBアプリを作る場合

タグでもある様にあDBはMySQLを使用してます。

１つ質問点がありますので、質問させていただきます。
### 前提・実現したいこと
PHPで削除する機能。例えば掲示板での削除機能ではデータベースでのデータを直接削除せずに論理削除機能（削除フラグをたてる）を使う事ができるとおもうのですが、投稿の編集をした際には元の投稿内容に上書きされてしまいます。
よって、復元したり参照はできません。
実際にはデータを上書きして保存せず、上書きされたというフラグを立て、ユーザーには上書きされたように見せ、かつ過去の編集履歴もすべて閲覧できる様にしたいです。

また、皆さんはどの様な方法で過去の編集履歴等を復元・参照しているのでしょうか？



#実装内容
teratailでも、質問・回答の過去の編集履歴が全て閲覧可能ですが、[その様な機能](https://teratail.com/questions/history-questions/233131)を実装したいです。

## 試した事
どの様な処理の流れになっているのかも疑問点なのですが、自分で一度流れを書き出してみました。

・編集フォームを押すとその投稿の編集フラグが立つ。
・編集フラグが立っていればその投稿を上書きして保存する。
・編集フラグが立っていればその元の投稿を表示しない。

編集後のデータを別のカラムに格納するとして仮にユーザが５回編集したとするならその元の投稿と５回分のカラムが必要になってしまうので、その方法ではやはりないのでしょうか・・

過去に編集したデータを復元や参照する方法

# 前提
以下2つのドメインを所持していると仮定します。
- a.com
- b.com

「a.com で設定した cookieまたはlocalstorage の値を b.com から読み取る」という事をやりたいです。
`Access-Control-Allow-Origin`を利用する方法で実装しようと考えています。

# 質問
本日以下の記事を見かけました。
この記事は`Access-Control-Allow-Origin`が今後使えなくなるという理解であっていますでしょうか？

もし、`Access-Control-Allow-Origin`が使えなくなることが決まっている場合、別の方法として何を使えばよいでしょうか。

[https://www.itmedia.co.jp/news/articles/2001/15/news064.html](https://www.itmedia.co.jp/news/articles/2001/15/news064.html)

cookieまたはlocalstorageの値を別ドメインで共有したい

**実現したいこと**・・・レスポンシブ対応

**現状**・・・自分で作ったサイトをレスポンシブ対応させようとしている最中です。パソコン表示では、横並びになっている**box**を768px以下の表示の際は、縦表示になるようにしたいです。自分で色んなサイトを見て、何とか768px以下の際は、縦表示にすることはできたのですが、肝心な文字や画像が画面の隅っこに行ってしまい上手く表示されません。widthやheightがおかしいのだろうかと色々いじってみましたが、手も足も出ず・・・。知っている方がいらっしゃれば、教えていただけないでしょうか。下記にHTMLとCSSを貼らせていただきます。

```
html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>chapter9</title>
	<link rel="stylesheet" href="chapter9.css">
</head>

<body>
	<main class="clearfix">
		<div class="introduce-box">
			<div class="introduce-img1"></div>
			<span class="introduce-num">No.1</span>
			<h3 class="title">通天閣</h3>
			<p class="text">大阪府の観光名所<br> 通称、「大阪のエッフェル塔」<br>5階には大阪を一望できる展望台や、足の裏をなでると幸運が訪れるという神・ビリケン像が存在する</p>
		</div>

		<div class="introduce-box">
			<div class="introduce-img2"></div>
			<span class="introduce-num">No.2</span>
			<h3 class="title">東京タワー</h3>
			<p class="text">東京都の観光名称<br>1958年12月23日に完成した総合電波塔で、正式名称は「日本電波塔」<br>東京のシンボルとして扱われている</p>
		</div>

		<div class="introduce-box">
			<div class="introduce-img3"></div>
			<span class="introduce-num">No.3</span>
			<h3 class="title">京都タワー</h3>
			<p class="text">京都府の観光名称<br>世界一高い「無鉄骨建築」であり、京都のランドマーク。<br> 周辺にはレージヤー施設が多数存在する</p>
		</div>
	</main>
</body>
</html>

```
```
css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

main {
	width: 1000px;
	margin: 160px auto;
}

.introduce-box {
	float: left;
	width: 310px;
	height: 370px;
	margin-right: 30px;
	padding: 25px;
	position: relative;
	border: 1px solid #000000;
}

.introduce-box:last-child {
	margin-right: 0;
}

.introduce-img1 {
	height: 150px;
	background-image: url(Osaka.jpg);
	background-size: 100% 100%;
	background-position: bottom;
}

.introduce-img2 {
	height: 150px;
	background-image: url(Tokyo.jpg);
	background-size: 100% 100%;
	background-position: bottom;
}

.introduce-img3 {
	height: 150px;
	background-image: url(Kyoto.jpg);
	background-size: 100% 100%;
	background-position: bottom;
}

.introduce-num {
	position: absolute;
	top: 0;
	left: 0;
	background-color: orange;
	color: #1e90ff;
	padding: 3px;
}

.title {
	margin: 15px 0 5px;
}

@media screen and (max-width:768px) {
{
	width: 90%;
	height: 20px;
	margin: auto;
}
.introduce-box {
	float: none;
}}

```

レスポンシブ対応をさせたいです

こんにちは。
Javascriptを勉強し始めたばかりです。

テキストに「オブジェクトの中のデータをWEBに表示させる」というワークがあるのですが、
ふとした時に、document.getElementById("xxxxx")はなぜ必要なのかと思い投稿させていただきました。

実際に、下記2種類を書いてWebに反映させたところ、全く同じレイアウトで同じテキストが反映されました。

実際にはどのように違うものなのか教えてください。　よろしくお願いいたします。

<script>
var js={title:"JS", price:2500, stock:30};
document.getElementById("title").textContent=js.title;
document.getElementById("price").textContent=js.price +"円";
document.getElementById("stock").textContent=js.stock;
</script>

<script>
var js={title:"JS", price:2500, stock:30};
title.textContent=js.title;
price.textContent=js.price +"円";
stock.textContent=js.stock;
</script>

Javascriptでdocument.getElementById("xxxxx")を使用する場合としない場合の違い

```html
<input type="checkbox" id="test" value="DESC" />ここを押すと
<div class="text">テキストが消える</div>
```
```CSS
input[id="test"]:checked ~ .text{
     visibility:hidden;
     position:absolute;
}
```

チェックボックス機能で上記のような表示切替テキストを作りました。
**__18:17追記__**
表示の切り替えは上記のとおり本当に簡易的なものを想定しており、回答いただいたように覗こうと思えば覗ける程度の仕組みで構わないと考えています。
元の質問では「一度ページを開いたとき見かけ上には入力フォームのみがあり、パスワードを知っている（あるいは類似の方法で特定される）ユーザーが簡単にアクセスできるようになっていれば、ソースの検証などには全体が表示されていても構わない」という意図が上手く伝わらなかったようで申し訳ありません。
難しいことだとは存じていますが、もう少し他の回答を待たせてください。
**__追記終わり__**

これをinput type="text"に特定の文字列を入力することで（もしくはsubmitと組み合わせることで）同じ動作をするようにしたいのですが、jsなどを利用したページ遷移が伴わないため不可能なのでしょうか。

~~他の方法でもページの一部分のみを特定のユーザーに限定して表示させることができれば検討したいと思います。~~
解決策をご存知の方はなにとぞご教示ください。よろしくお願いいたします。

inputでパスワード認証を作りたい

例えばdevise等の認証系ライブラリではパスワードを登録した際にその文字列がハッシュ化されDBに格納していると思います。
例えばログインする際、暗号化であれば例えばBASE64などは一定の法則があって復号化が可能で、DBに入っている文字列を復号化し入力した値を照らし合わせるということが出来ると思うのですが、非可逆なハッシュ文字列を用いて認証を出来る意味が良く分かりません。
同じ文字列をハッシュ化しても同じハッシュ化された文字列にはなりませんよね？
よろしくお願い致します。

なぜdevise等の認証（パスワード）は非可逆なハッシュ化をしているのにログインが出来るのかが分からない

$_GET, $_POST などの値を使用する場合、よくサンプルとして

```php
$str = isset($_POST['str']) ? $_POST['str'] : '';
```

のようにスーパーグローバル変数を直接扱っているものを見かけます。

```php
$str = $_POST['str'];
```

なんて記述は論外ですが、上の三項演算子のモノでも、IDE によっては「スーパーグローバル変数には直接アクセスしないでね。」と警告をクラってしまいます。

少し調べてみたのですが、理由は以下のようでした。
> スーパーグローバル変数は、変更可能な変数であるため、直接アクセスすべきではない。

利便性も良いので、`filter_input()`を利用することは嫌ではないのですが、警告内容に納得がいっていません。

スーパーグローバル変数に直接アクセスしない方がいい理由とはなんなんでしょうか？
できれば具体的な内容も交えて説明いただけると助かります。
少しとんがった回答でもありがたいです。よろしくお願いいたします。

スーパーグローバル変数に直接アクセスしない方がいい理由

```js
$(function(){
  	var sortkey=location.search+location.hash;
  	$('.is-desc[href="'+sortkey+'"]').css({"background-Color":"#ffffff"});
  	$('.is-asc[href="'+sortkey+'"]').css({"background-Color":"#ffffff"});
  	$('a.is-desc:after[href="'+sortkey+'"]').css({"border-color":"#ffffff transparent transparent transparent"});
  	$('a.is-asc:after[href="'+sortkey+'"]').css({"border-color":"transparent transparent #ffffff transparent"});
	});
```
```html
<table>
<tr class="is-sorter" id="aaa">
<th>
<a href="?r1=1#aaa" class="is-desc">A 降順</a>
<a href="?r1=0#aaa" class="is-asc">A 昇順</a>
</th>
<th>
<a href="?r2=1#aaa" class="is-desc">B 降順</a>
<a href="?r2=0#aaa" class="is-asc">B 昇順</a>
</th>
<th>
<a href="?r3=1#aaa" class="is-desc">C 降順</a>
<a href="?r3=0#aaa" class="is-asc">C 昇順</a>
</th>
<th>
<a href="?r4=1#aaa" class="is-desc">D 降順</a>
<a href="?r4=0#aaa" class="is-asc">D 昇順</a>
</th>
</table>
```
```css
.is-sorter th a {
	position: relative;
	display: inline-block;
	height: 23px;
	width: 23px;
	margin: 0 1px;
	border-radius: 3px;
	background: #5e5d5d;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
	vertical-align: middle;
  border: solid 1px #5e5d5d;
}

.is-sorter th a:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
}

.is-sorter th a.is-desc:after {
	margin: -4px 0 0 -7.5px;
	border-width: 7px 8px 0 8px;
	border-color: #ffffff transparent transparent transparent;
}

.is-sorter th a.is-asc:after {
	margin: -4px 0 0 -7.5px;
	border-width: 0 8px 7px 8px;
	border-color: transparent transparent #ffffff transparent;
}
```
現在はこのようなコードになっていて
aタグに擬似クラスを使って四角の中に三角をボーダーで作りボタンのように見せています。
この際そのボタンがクリックされたら色をボタンの背景と三角ん色を反転させたいのですが、
jsの書き方がよくわからず苦戦しています。
擬似クラスなどは使えないのでしょうか。
始めたばかりでよくわかっておらず申し訳ございませんが、
ご教示のほどよろしくお願いいたします。