はてなブックマーク

はじまり・ページを開くとYouTube埋め込み動画を自動再生させる方法？ 動画を自動再生させる事自体の行儀良し悪しについては、ここでは置いておきます。 とりあえず、僕個人は特にモバイル機器ではユーザーが望まないタイミングでギガを消費させるのは(言ってみたかっただけ)サイトの印象悪化につながりかねないので、やめておくのが無難だと考えてます。 所要で、ウェブページに埋め込まれたYouTubeの動画を自動再生出来る方法を調べる機会があったので、その調査のメモです。 先に結論・全環境対応させるには、多分videoタグを使うしか無い(消音限定) 執筆日の時点では、iOS/Android/PCの全環境でYouTubeの自動再生は多分無理です。 vimeo(ヘルプセンター)やDailyMotion(FAQ)等、他の動画サービスでも難しそうです。 自分のサーバー等に動画ファイルをアップロードして、そのUR

こんな感じでしょうか。 僕自身は「サーバー機能」と「他人へ提示・連携開発」の部分を特に重視してるので、オンラインで作ってしまう方が総合的に良いと判断してます。 実際に動くものをぱっと作って、お客さんにURLを送って提示できるのはやっぱり楽です。 比較項目にはしてないけど、個人的にテスト環境を本番に直接移行する機会も多いので、この時の手間と安定性の差も大きいです。 僕は普段WordPressの開発環境を作る場合は、「XSERVER」や「さくらのレンタルサーバ」等の大手レンタルサーバー、または「AmazonEC2」を使ってます。 特に慣れればEC2が楽ちんで柔軟性が高く、さくっと実験するに使いやすいのでお気に入りです。 もちろん、使わない時はインスタンスをきちんと停止させないと余計な費用がかかるので、そこだけは注意ですが。 EC2での環境構築は少し昔の記事だけど、「AmazonEC2のWord

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed フォーム構築時は面倒でミスが多くなりがち ウェブサイトのフォーム作り。 お客さんがサイトを見て、何らかの申込をする際の重要な入り口となる重要かつ、情報の整理整頓を考えるのが楽しい仕事です。 普通の問い合わせフォームのような、入力項目がメールアドレスとメッセージしかないフォームなら、あまり入力値のチェックしなくても問題ないです。 だけと、たとえば、アンケート要素のあるフォームのように入力項目数の多くなる物だと、入力欄と実際に扱われる情報に食い違いミスが起こりやすくなるし、そもそもフォーム構築時のテスト入力自体が面倒で仕方ないです。 入力項目のラベルには名前を入力するよ

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed SVG、すっかりどこでも見かけるようになりましたね。近年、僕が仕事で作るサイトでもロゴや主要なアイコン画像を中心に、積極的に使うようになりました。 ファイルサイズ、解像度、動的な扱いやすさ等で、これまでのJPEG、PNG、GIFに比べたメリットの多いSVGだけど、とにかく取扱がめんどうに感じるのが正直なところです。 Bootstrap3→4への変化でCSSへのインラインSVG埋め込みに変わった箇所をみつけた HTML/CSS/JSフレームワークのBootstrapのバージョン3と4のコードを見比べてたとき、メニューボタンのアイコン( こんなの→ )がバージョン3まで

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed 前回、OS XをAppleScriptの変わりにJavaScriptで操作する方法についての利点やデバッガの使い方をはじめ、基本的な情報元の整理をしました。 なんとなく把握できたので、今回は具体的にリファレンスを見ながら実用的なコードを作って行くことにしましょっかー。 分かりにくいライブラリの見方 スクリプトエディタ.appには、スクリプトで動かせるアプリのリファレンスを簡単に参照することが出来るけど、それを読み解くのは、僕には難しい作業でした。 公式でサンプルコード付けて置いてほしいな。 英語なのは仕方ないけど、サンプルコードはおろか、何が引数なのかとかの説明も分

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed OS Xをスクリプトで行う自動操作は、AppleScriptで制御する場合はそのまま「AppleScript」、JavaScriptの場合は「JavaScript for Automation(以下JXA)」と呼ばれています。ちょっとややこしいけど、慣れるしかないでしょう。 僕は元々AppleScript自体がほとんど分からない状態だったけど、どうやらAppleはOSXのスクリプティングをAppleScriptからJavaScriptに置き換えたいらしいです。 AppleScriptは全然だけど、JavaScriptならチャンスか？ 気が向いたのでJXAを触ってみる

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed プレビュー表示はできるけど、イラレでは編集できないPDFファイル 仕事のなかで、提供された複数のPDFファイル内の文字とレイアウトを微調整することがありました。 PDFファイルには、僕の環境にはないフォントが埋め込まれており、Macの「プレビュー.app」や「Acrobat」で読み込み、表示をする分には全く問題無いけど、Illustratorで開こうとすると、まずこんな表示が出て、アウトライン化される旨の警告が出ます。 このドキュメントには再解釈されたPDFオブジェクトが含まれています。 アピアランスを保持するため、一部のテキストがアウトライン化されました。 続いて

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed Atomエディタ、すっかり使いやすくなりましたね。 出始めのころは動作が重く、使い物にならないと感じてたけど、しばらく経って入れなおしてみると、凄まじい進化をして、当時Sublime Textを使っていた僕も乗り換え不可避でした(笑) そのAtomエディタのならではの標準プラグイン、Markdown Previewの表示のスタイルは、元々GitHub的スタイルなだけあって、そのままでも本当に美しいです。 だけど、これは完全にパソコンスクリーン表示向け、そして半角文字向けの見た目なので、それを印刷やPDF化したり、プロジェクタで映す場合、ちょっと見辛い上、日本語が主体

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed Python。日本よりも海外でよく使われている言語で、アプリケーションのスクリプト制御用にもよく採用されているイメージです。 僕に身近なところでは、おなじみのGoogle Apps Engineや、オフィススイートのLibbreOffice(最近全く使わなくなったけど)、3DCGツールのBrenderなんかがPython対応しているので、その辺からずっと前から気にはなってました。 そんな中、最近使っていてるタスク管理ツール、Todoistで提供されているAPIのドキュメントページがPythonでのコードを見本に載せているのを見た途端、ページのかっこいい見た目、構造に

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed 少し前のMacBook Pro環境で 動画を作ってる After Effects CC 2014(Adobe Store) var 13.2.0.49 MacBook Pro (Retina, Mid 2012) OS 10.10.3 HDMI接続によるデュアルディスプレイ環境 ← (ネタバレ)後々これが重要に いつもAfter Effectsに 警告される人生 After Effects(以下AE)を起動するたびにこんな警告をうけています。 以前も解決を試みた事があるはずなんだけど、どうも上手く行かず、解決法が見つかりませんでした。 どう試行錯誤したのかの記録も、