サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
helog.jp
Windows 10で、Docker Desktopで使ってるWSL2のプロセス「Vmmem」のメモリ使用量を制限する方法です。 WSL2を使うようになってから、ローカル開発環境にアクセスするのが重く、また、その度に私のロースペックノートPCのファンがフル回転します。。 高負荷の原因はロースペックだと考えていましたが、調べてみるとプロセス「Vmmem」を制御すれば改善しそうです。 ローカル環境で作業中に、タスクマネージャーを確認してみました。 Vmmemにより、メモリが4.5GBほど消費しています。作業を続けているとメモリ使用量は増え続け、時には全体の使用率が95%を超える場面もあります。 メモリ使用量制限方法 ファイル「C:\Users\username\.wslconfig」を設置する事で、Vmmemのメモリ使用量の上限を設定することができます。 今回は、以下のように記述することで、上
WindowsからLinuxサーバへSSH接続する時に、これまでずっとPuTTYを使っていました。 しかし、何となく古臭い感じがしていて、今の時代、もう少しスマートにならないかと調べてみたらありました。 2018年の春のWindows 10アップデートで標準でOpenSSHが組み込まれるようになったみたいです。 今回はこのWindows 10標準のOpenSSHの活用方法を調べたいと思います。 OpenSSHが使えるか確認する 念のため、事前に今使っているWindows 10にOpenSSHが入っているかどうか確認します。 スタートメニューから「アプリと機能」を起動し「オプション機能の管理」を開き、一覧に「OpenSSHクライアント」があれば利用できます。 また、コマンドプロンプトから「ssh -V」と入力してバージョン情報が出力されれば同じく利用できます。 > ssh -V OpenSS
Laravelを使った認証方法をいくつかあるようですが、Passportパッケージを使ったAPI認証の構築にチャレンジしてみます。 今回は、Facebook APIやTwitter APIのようなAPIを介してサービスを提供する側の認証や、vue.jsなどWebアプリを構築する際にサーバサイドへのアクセスに認証を設けるケースを想定します。 ちなみに、構築した環境は以下の通りです。 Windows 11 Home PHP 7.3.33 Laravel 6.20.44 Passportパッケージをインストールと設定 Composerを使ってPassportパッケージをインストールします。私の場合、Laravel 6.xが最新のpassport 10.xに対応していないようだったので、一つバージョンを落としてインストールしました。 > composer require laravel/passp
Bootstrap4のsassを使った効率良いカスタマイズ方法です。 最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。 これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。 sassを使わないBootstrapのカスタマイズ Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。 この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり（なし）にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生した
Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要：スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。 レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。 （CSSについては別途考えます） そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。 概要 HTMLのソースは上から順に解析されます。 ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。 少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。 読
少し前にWindowsのRubyでSassの環境を構築しました。 WindowsでRubyをインストールしてSassの環境を構築する しばらく使ってみて、Sassで開発進めよう！という気にはなったのですが、手動でコマンドを実行しないといけない点や、ファイルごとにコマンドを実行する点、これを自動化できたらより作業が捗るだろうなと思い、Node.js + Atomの環境も試してみることにしました。 Atomは私が普段から使用しているエディタです。 Atomのプラグイン「sass-autocompile」を使えば、scssファイルを保存したと同時に自動でcssファイルにコンパイルしてくれるようです。 「sass-autocompile」はNode.jsとnode-sassを利用するプラグインなので、早速インストールします。 ちなみに、今回構築した環境は以下の通りです。 Windows 10 Ho
ある日、Atomを起動するとフリーズしてしまいました。 Atom起動アイコンをクリックして、ウィンドウは表示されるのですが、フリーズしていて何も操作できません。 強制終了して再度起動を試みますが状況は変わらず、フリーズしたまま何も操作できません。 環境は以下のとおりです。 少し調べてみると、どうやらフリーズする原因のほとんどはインストールしたプラグインパッケージのようです。 このようなときは、パッケージを一つ一つ無効にして原因を特定したほうがよいとのことです。 しかし、今回のケースは何も操作できません。 パッケージの操作どころか、設定画面も開くことができません。 フリーズするタイミング Atomを起動するとき、Atomは前回の終了時の状態を復元します。開いているプロジェクトフォルダの状態やファイルの状態などです。 どうも、その状態の復元とそれに関するパッケージの動作に問題があった場合に、こ
縦幅の長い、縦スクロールが発生するようなサイトを閲覧しているときにブラウザをリロードすると、画面はページのトップではなく、リロード前の位置で再読み込みされます。 未確認ですが、ここ1年の間での最新のブラウザに機能として追加されたようです。 とりあえず、現時点での最新のブラウザ、IE9、GoogleChrome18、Firefox11で、この動作を確認することができます。 スクロールした後にリロードした場合にも「読んでいたところを再表示する」という親切な機能かもしれませんが、逆に困ることもあります。 例えば最近ではパララックス効果など、意図的に縦長サイトをFlashのようなリッチコンテンツ風に構築されたサイトがあります。オープニングなどの演出で、初期表示は必ずトップを見てほしいという場合です。 JavaScriptでリロード時にトップにくるようにする リロード時にページトップにくるようにする
PHPの関数「file_get_contents」でAPIを利用した情報を取得することがあります。 但し、対象が「https」で始まるurlの場合に、情報が取得できません。 何度もこの問題に直面し、その度に頭を悩ませてしまいます。記憶力が。。。 というわけで、ここでしっかりメモを残しておきます。 「file_get_contents」でhttpsから始まる情報にアクセスできない 例えばAPIなどを利用するにあたり、その情報にアクセスするために以下のようなソースを記述します。 if(($res = @file_get_contents($url)) === false){ （略） } ここで、$urlの中身が「https」で始まるurlの場合に、情報の取得に失敗してエラーになってしまいます。 Notice (8): Undefined variable: http_response_head
10px程度の斜線の画像を用意し、それを背景に繰り返し表示してボーダー装飾しているサイトをよく見かけます。 今回、それを画像を用いずにCSS3だけで実現してみます。 まず、線形グラデーションを使ってラインを引きます。 25%、50%、75%のポイントで黒、白の両方を指定することで、グラデーションの境界を切り替えます。 クロスブラウザ対策で「-webkit-gradient」と「-moz-linear-gradient」を指定すると、CSSは以下のようになります。 background: -webkit-gradient(linear, left top, right top, from(black), color-stop(0.25, black), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, bl
Windows7でWebdavやVPNを用いてネットワークドライブを使用する場合、ファイル表示速度やファイル転送速度が異常に遅い場合があります。 いろいろと試していたのですが、解決策が見つかったのでここに残しておきます。 まずIEを起動して、「インターネットオプション」を開きます。 次にタブ「接続」を選択し、「ローカルエリアネットワーク（LAN）の設定」の「LANの設定」をクリックします。 そして下図のように、「自動構成」の「設定を自動的に検出する」のチェックを外します。 以上です。 問題はネットワークアダプタの設定かと思い悪戦苦闘していたのに、なぜかIEの設定で改善するという結末。不思議です。 この設定を変更するだけで、これまで数十分かけても終わらなかった比較的重いファイル転送も、数分で完了するようになりました。 「設定を自動的に検出する」の機能では、恐らく、高速インターネットを前
過去にGoogleカスタム検索の検索窓をCSSなどを使って好きにデザインを変更した記憶があります。 しかし、最近、新規でカスタム検索のコードを取得したところ、Javascriptで記述されており、また、検索窓のフォームがiframeで読み込む形式になっているため、容易にデザインをカスタマイズというわけにはいきません。 iframeタイプの検索窓 現在、Googleカスタム検索で登録すると、以下のようなコードが取得できます。 <div id="cse" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {
楽天RMSでページを構築する際に、ページ内リンク（アンカータグ）を貼る方法です。 Webサイトでのページ内リンク 通常、Webサイトを構築する中で、ページ内リンクを貼る場合は、以下のようにします。 <a href="#section1">ページ内リンクです</a> このリンクをクリックすると、ページ内の以下の場所までジャンプしますね。 <div id="section1"> こんてんつ </div> ここで、楽天RMSで上のような実装をすると、リンクをクリックした時にエラーページへと遷移してしまいます。 これは、楽天RMSが外部へのリンクを全面禁止しており、「#section1」を外部リンクとして扱っしまっているのが原因のようです。 つまりリンクをクリックした時に、「#section1」は外部サイトなのでエラーです、といった趣旨のエラーページが表示されてしまうわけです。 楽天RMSでのペー
WordPressで投稿した記事をRSSフィードで配信することができます。 例えばこのブログだと以下のリンクからフィードを取得することができます。 http://helog.jp/feed/ このフィードのテンプレートを修正しようと思ったのですが、なんとWordpressはデフォルトでフィードのテンプレートが存在しません。 例えばRSS2をフォーマットを編集する場合、直接インクルードファイルを編集すればカスタマイズは可能のようです。 .../wp-include/feed-rss2.php しかし、アップデートの際の影響も考慮して、ここではなるべくテンプレート内でカスタマイズを完結したいので、以下のサイトを参考にフィードをテンプレート化します。 各種フィード用テンプレートの変更 : dogmap.jp テンプレートファイルを用意する まず、ベースとして先ほどのファイルを、現在使用中の
毎度の事ですが、Javascriptでメールフォームなどのチェックを実装する場合に、 「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。 分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。 困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。 最近ではjQueryの組み込みがデフォルトになってきたので、サンプルはjQueryベースとなっています。ここでjQueryの使い方についての詳細は省きます。 テキストボックスの入力必須チェック このようなテキストボックスがある場合 <input type="text" name="hogehoge" value="" /> 以下のよう値が空かどうかを判定することで、必須チェックを行います。 if($('form input[name
スマートフォンやhtml5+CSS3など新技術に四苦八苦。PHPやAjaxも難しいですね。そんなWebに悩む人のネタ帳です。 例えば、PHPでフォームを構築する場合など複数のボタンを設置して、それぞれサーバ処理を分けたい場合があります。 具体的には、メールフォームで「送信してもよろしいですか？」といった確認画面では、「入力フォームに戻る」と「送信する」ボタンがあり、それぞれでサーバ処理を分岐させます。 複数のsubmitボタンがある場合に、サーバ側でどのボタンが押されたかを取得したいときに、どのような処理が適当なのかを考えてみます。 ちなみにこれから示す全てのコードは比較のために簡略化してあり、動作確認はとっていません。 JavaScriptでポストするデータを分ける これまで私は、主にJavaScriptでPOSTするデータを操作し、サーバ側でその内容を判定することで、処理を分岐してい
smartyを使用した環境でセッション処理を行おうとしたのですが、プログラム「session_start()」のところでエラーとなってしまいました。以下、問題が発生した環境です。 PHP : 5.3.0 smarty : 2.5.26 文字コード : UTF-8 Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at xxxxxxxxxindex.html:1) in xxxxxxxxxindex.php on line 61 テンプレートを読み込み、ページを表示するところは動作しているのですが、どうしても上のエラーがくっついてきます。 いくつか調べているうちに、生成されたhtmlページの1行目
スマートフォンやhtml5+CSS3など新技術に四苦八苦。PHPやAjaxも難しいですね。そんなWebに悩む人のネタ帳です。 MovableTypeはデフォルトでページ分割ができません。 例えば、記事数が100を超えたため、トップやアーカイブなどの記事リストページを10記事ずつに分割しページング処理を行いたいといった場合があります。しかし、MovableType本体だけではページを分割し、以下のようなリンクを生成するのは困難です。 「>」 ほとんど必須の機能なので、いつになったらMTにデフォルトの機能として組み込まれるのかと前々から思っていたのですが、未だ実装されていません。 さて、そのような時はプラグイン「PageBute」が便利です。 静的ページ用ページ分割プラグイン:PageBute PageButeをインストール インストール方法は簡単です。上記ページにもあるようにダウンロー
WordPressで管理画面にオリジナルの設定画面を追加してみます。 主にプラグインを作成する場合に、設定画面を追加する必要が生じると思います。設定画面の追加は、アクションフックをプラグインに記述する事で実現できますが、functions.php上に記述しても同じ結果が得られます。 具体的なステップとしては、画面を構成するHTMLを含んだ関数1を構築し、その関数1をメニューに登録する処理を記述した関数2を記述し、そして関数2をアクションフックに登録するという流れになります。 初めてだと、この感覚を理解するのは難しいと思います。以下のサンプルを見ながら確認しましょう。 実際に静的な設定画面を追加してみる 以下のように、「オリジナル設定画面！！」とだけ表示する、特に意味をもたない静的な画面を記述します。 function option_test() { echo '<div class="
スマートフォンやhtml5+CSS3など新技術に四苦八苦。PHPやAjaxも難しいですね。そんなWebに悩む人のネタ帳です。 特にフルFlashサイトなどでは、ブラウザのサイズを変更しても、フッターを下につけたままにしたい、ボタンを中央にキープしたいなどといった場合があります。Webではリキッドレイアウトといいますが、このように、さまざまなサイズのブラウザでも体裁を保ちたいといった要望がFlashにも求められることが多くなりました。 そこで、任意のムービークリップにクラス「SampleMc01」が設定してあることを前提に、ActionScript3で固定配置するさまざまなサンプルをまとめたいと思います。 まず、ムービークリップを配置するステージをフルFlashにして、ステージの基準点を左上に設定したとします。 import flash.display.StageScaleMode; imp
reset.cssは各ブラウザでデフォルトで指定されているCSSをリセットするために読み込むスタイルシートです。 Firefox、Internet ExplorerやGoogle Chromeなど各ブラウザは、コーダーがスタイルシートを適用していない状態では、CSSの初期状態に差異があります。その差異を埋めるべく容易するスタイルシートが「reset.css」です。 少しずつ自身で調整を重ねて作り上げる「reset.css」もありますが、オープンソースとして公開されているものもあります。私はHTML4でPCページを構築する際、YUI(Yahoo! User Interface Library)のCSS Resetは重宝していました。 YUI 3: CSS Reset 今回、スマートフォンサイトを構築するために、スマートフォン用のreset.cssを探していました。そこで気がついたのですが、
今回はZend Frameworkのベースとなる仕組みを理解してみたいと思います。 まずは定番の「Hello World!」を表示させてみます。 前回、「Zend Frameworkをインストール」でも記述したように、「.htaccess」にmod_rewriteを記述して、全てのアクセスをindex.phpにリダイレクトするようにします。 その理由として、Zend FrameworkはMVCを採用しており、Cの部分に該当するコントローラというしくみで全てのリクエストが処理されます。フロントコントローラがindex.phpにあたります。 以下のようにして、全てのリクエストはまずフロントコントローラであるindex.phpで受け付けられ、リクエストに応じてアクションコントローラに振り分けられます。 require_once 'Zend/Controller/Front.php'; Zend_
楽天APIでは、以下のサイト仕様に従いリクエストを投げることで、xml形式で商品情報を取得することができます。 楽天 WEB SERVICE このAPIを利用しようと、PHPでプログラムを組んだのですが、うまく情報を取得できません。 PHPでXML形式のデータを取得するとなると、関数simplexml_load_fileを使えばよいはずですが。 例えばこのように取得します。 $res = simplexml_load_file('http://api.rakuten.co.jp/rws/3.0/rest?[パラメータたち]'); しかし、取得した結果を出力してみてもデータは空です。 print_r($res); SimpleXMLElement Object ( [Body] => SimpleXMLElement Object ( ) ) 原因を調査したところ、楽天APIから帰ってく
WindowsXPにFTPサーバを立てる機会があったので、その時の作業メモです。 WindowsでFTPサーバを導入するのには、どこからかパッケージをダウンロードしなければならないと思っていたのですが、IIS(Internet Information Services)が標準で用意されており、FTPサーバ以外にもWebサーバやメールサーバのサービスが利用できるようです。 IISは、Windows 2000 Professional、Windows XP Professional、Windows Vista、Windows 7を対象に用意されています。ただ、デフォルトでインストールはされていないので、コンポーネントの追加をする必要があります。今回はWindows XP Professionalの例です。 IISコンポーネントの追加 WindowsXPでIISコンポーネントを追加するためには
AS3でブラウザ判定をしたかったので、調査メモです。 ActionScriptはクライアントで動作するスクリプトなので、ブラウザ情報を取得できるはず、ということで調べてみました。 結果、どうやらActionScript自体にはブラウザを判定するクラスは用意されていないようです。その代わり、外部APIとやりとりするための「ExternalInterface」というクラスが用意されており、これを利用してJavaScriptの関数を呼び出したり、逆に呼ばれたりといった処理が実現できます。 具体的には、ブラウザを判定するために、JavaScriptの「window.navigator.userAgent」を呼び出します。 var res = ExternalInterface.call("window.navigator.userAgent.toLowerCase"); if (res.index
以前にSWFObject 2.2の利用例を紹介しました。 Flash設置の決定版「swfobject」 上の利用例はswfobjectの公式ドキュメントに掲載されているスタンダードな方法です。一方で、objectタグなどを使用しない、少しスマートな記述方法もあるようです。 swfobject – Project Hosting on Google Code まず、swfobjectを読み込んで、以下のようにしてswfobjectを実行します。 <script type="text/javascript" src="/js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("/swf/index.swf", "FlashContent", "400", "400", "10", "/s
プログラミングをしているときに、その変数自体が存在しているかどうかを知りたい場合があります。 例えばPHPの場合では if(isset($a)){ echo "変数$aは存在する"; }else{ echo "変数$aは存在しない"; } や if($a){ echo "変数$aは存在する"; }else{ echo "変数$aは存在しない"; } といった判定が可能です。 また、配列かどうかを確認したい場合は、 if(is_array($a)){ echo "変数$aは配列です"; }else{ echo "変数$aは配列ではありません"; } このように判断が可能です。 ここで、JavaScriptに変数が存在するか確認する方法です。 結果だけになりますが、以下のようにして変数「a」が存在するかどうかを判定できます。 if(typeof a != "undefined"){ e
次のページ
このページを最初にブックマークしてみませんか？
『helog - WEB／システム／IT技術ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
