ポケットカメラをブラウザ上で再現する『Super Game Girl Camera』機能紹介。ゲームボーイで撮ったような写真が撮れる | トバログ
2015.07.12 ポケットカメラをブラウザ上で再現する『Super Game Girl Camera』機能紹介。ゲームボーイで撮ったような写真が撮れる レトロゲーム�が好きな人はもう知っているかもしれないが、Webブラウザ上でゲームボーイ専用ソフト『ポケットカメラ』を再現する『Super Game Girl Camera』というサイトが存在する。色々な機能が備えられているので、説明していきたい。 ポケットカメラはゲームボーイのカセットで、カセット自体にカメラが備えられており、写真を撮って画像を編集したり音楽を作ったりちょっとしたゲームを楽しめたカセット。当時カメラは高級で買えなかった少年たちが、ポケットカメラを手に近所中を駆け回って写真を撮りまくっていた(詳しくは【レトロな思い出】ポケットカメラの思い出。誰でもカメラマンになれた夢のゲームソフトをどうぞ)。 Super Game Gir
CSS 半角英数の連続文字が折り返すようにする | テクニカルノート
があります。 どっちも、連続した半角英数文字を折り返すかどうか。を指定するのですが、いったいどう違うんでしょう？ ってことで、整理。 word-wrap: break-word と word-break: break-all の違い word-wrap: break-word; は、枠内に収まらない英単語の場合は単語の途中でも折り返しますが、 枠内に収まる限り、単語の途中では折り返さないようにします。 なので、たとえば、forという短い単語なら、よほど狭い枠でなければ、途中で折り返されることはありません。 一方、word-break: break-all; は、英単語の途中であっても、問答無用で折り返します。なので、右端でforのような短い単語の途中であっても、 fo r というように、折り返してしまいます。 とうことで、どちらかというと、単語が切れてしまわない、word-wrap: br
【JavaScript入門】setIntervalの使い方まとめ | 侍エンジニアブログ
こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。 タイマー処理などに使用するJavaScriptのsetIntervalについて解説します。 この記事では、 ・setIntervalとは？ ・clearintervalで処理をstopする方法 ・setTimeoutとの使い方の比較 などの基本的な内容から ・コールバック関数でsetintervalを利用する方法 などの応用的な内容まで解説します。 setIntervalについて正しく理解し、必要な場面で使いこなせるようにしっかりと理解していきましょう。 setIntervalの基本的な構文は以下の通りです。 setInterval(関数,処理間隔) // 処理間隔の単位はミリ秒 setIntervalは第一引数に与えられた関数を、第二引数に与えられた間隔で実行します。 具体的なサンプルコードは以下の通りです。
WordPress既存のサイト内検索をGoogleカスタム検索に置き換える方法を徹底解説
本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。 WordPress内のウィジェットに登録されている、既存の「検索」（サイト内検索）ボックスをウィジェットに設定しても問題なくサイト内検索はできます。 さらにこだわる人は、Googleのカスタム検索機能を、WordPressサイト内へ実装したいと思うはずです。 「サイト内検索」を簡単に設置する方法です。意外と簡単に設置ができるので、興味のある方はチャレンジしてみてはいかがでしょうか。
カスタム検索の「Google臭さ」をJSとCSSでカスタマイズするスマートな方法
Googleカスタム検索を使うとサイト内検索を簡単に実装できますが、デザインがいかにも「Googleっぽく」なってしまいます。サイト全体となじむデザインにカスタマイズする方法を紹介しましょう。 WebサイトでCMS内蔵の検索機能や独自の検索機能を使う代わりに、Google カスタム検索エンジン（GCSE）を使うケースが多くなってきています。理由は単純で、作業が簡単で、効果的だからです。高度なフィルターやカスタム検索パラメーターを使わないのであれば、GSCEはコンテンツ検索にぴったりです。 この記事では、結果ボックスを（特別なGCSEタグを使用せずに）手動で表示する方法と、検索フィールドをスタリングする方法について紹介します。 Googleカスタム検索をただ設置するだけでは済まない理由 運営しているWebサイトにGCSEを追加するのは、スクリプトやカスタムHTMLタグをコピー＆ペーストするの
CSSだけで画像トリミングできたよ ｜ Tips Note by TAM
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。 CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。 やり方 HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。 例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。 CSSのトリミングは、パターンによ
レスポンシブ対応！CSSで画像を中央トリミングする方法 - Design Color
追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう！ CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1：object-fit版 「object-fit」というプロ
記事内の一番最初の画像を取得してサムネイル画像表示
サムネイル画像として使う方法としてはアイキャッチ画像で表示する方法もありますが、ここで紹介する方法は単純にブログを更新してその中に使っている最初の画像をサムネイル画像として使う方法なので、クライアント向けにカスタマイズをされるならこの方法が便利だと思います。 functions.phpにコードを追加 まずは下記のコードをfunctions.phpに追加してください。コードの中の $first_img = “http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/default.jpg”のｱﾄﾞﾚｽはもしも記事内に画像がない場合に表示する画像なのでここは各自のサイトでご用意してアドレスを書き換えて下さい。 <?php function catch_that_image() { global $post, $posts; $first_
<a>－HTML5タグリファレンス
<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。 <a>は、anchor（アンカー）の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。 href属性は、ハイパーリンク先のURLを指定する際に使用します。 href属性の値には相対パスと絶対パスのどちらでも指定することができます。 相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、 同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。 絶対パスと
WordPress（ワードプレス）で記事の一番最初の画像を取得する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Wordpressで記事の一番最初の画像を取得し、サムネイルとして使う方法をご紹介します。 当サイトもトップページの記事一覧はサムネイル画像と、文章出だしの一覧になっていると思いますが、構造としては記事の一番最初に画像を挿入し、文章出だしを書いてmoreタグをつけるという手順を踏んでいます。 ただ、この方法だと画像が一番上にきて、つづきの文章があり、という形を変えることは難しいです。 もちろん、抜粋などを利用して頑張れば色々出来ることはあると思いますが、今回紹介する方法であればサムネイル画像を自由に設置することができます。 以下手順。 functions.phpの設定 コードはこちらの記事を参考にさせて頂いてます。 まずは、functions.phpに以下のコードを追加します。 function catch_that_image() { global $post, $posts; $fir
WordPressで綺麗な本文抜粋を取得する方法（moreタグ対応、ショートコード、タグ、特殊文字削除）
WordPressの本文抜粋に求めるもの僕が抜粋に求めるのは以下のポイントです。 長い文字列を指定した長さにしてくれるタグの削除<!–more–>タグ以降は表示しないショートコードの削除特殊文字の削除WordPressデフォルトの、get_the_excerptは（書き出すthe_excerptも）、基本的に赤字部分はやってくれず、黄文字部分もメインループ内だとやってくれないことがあります。（僕のやり方が悪いのかもしれないけど） 今回は、上の条件にすべて合う抜粋文字取得関数get_the_custom_excerptを作成してみました。 抜粋文字取得関数作成した関数は以下です。 //本文抜粋を取得する関数 //使用方法：https://nelog.jp/get_the_custom_excerpt function get_the_custom_excerpt($content, $len
学校授業1年分の学習範囲を、わずか32時間で終わらせる人工知能教材Qubenaが効果的な理由 | flick!
わずか1/7の時間で学習効果を得られる 学生時代を思い出して欲しい。算数・数学の出来はいかがだったろう？ とっても簡単で、問題を解くのが単なる作業になっていたことはないだろうか？ 逆に、授業にまったくついていけなくて、脂汗を流しながら、授業を聞き流していたことはないだろうか？ 「大勢を教えなければならない学校教育の場合、算数・数学の授業の多くは、この『自分のレベルに合っていない状態』なんです。」と言うのはQubena事業を行うCOMPASSの神野元基代表。 ところが、Qubena Wiz（https://wiz.qubena.com/）を使えば、人工知能を使って、生徒のレベルにあった問題を出し続けるので、無駄な時間がほとんどなく、わずか1/7の時間で、学校教育と同等の学習効果を得られるという。 常に適切な課題を出し続けることで、効率大幅アップ といっても、ものすごい魔法があるわけではない。
文章の「自動要約ツール」、ユーザーローカルが無償提供
ユーザーローカルは7月24日、入力した文章から重要部分を取り出して要約する「ユーザーローカル自動要約ツール」を公開した。Webサイト上で無償利用できる。 入力フォームにテキストを貼り付けるか、テキストファイルをアップロードすると、文章構造を分析して特徴語（特徴的な言葉を機械的に抽出した単語）や重要文を自動抽出するツール。重要な文章をマーキングやヒートマップ、モノクロ強調で視覚的に捉えられる強調表示にも対応する。 要約文は「3行ダイジェスト」「5行ダイジェスト」「10行ダイジェスト」といった分量調整もできる。 重要文の抽出には、重要単語を多く含み、他の文に類似度が高い文を抽出するアルゴリズム「LexRank」を活用した。 ツールが公開されているWebページには、ニュース配信各社から引用したニュース本文の要約をダイジェストとしてランキング表示している。 同社は「インターネット上には、日々ニュー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2D版『ダークソウル』と評されるARPG『ソルト アンド サンクチュアリ』Nintendo Switch版発表。日本語対応で、8月2日に国内配信へ - AUTOMATON
「この世界の(さらにいくつもの)片隅に」12月公開。30分新規シーン“もう一本の映画”