2021-01-11

DashtoDockの設定

Linux

Ubuntuにxrdpをインストールすると、リモートデスクトップ接続が可能になり、遠隔地からコンピュータのGUIを操作することができます。デフォルトではGNOMEがインストールされていますが、標準のUbuntuデスクトップ環境とは見た目が少し異なっています。

gnome-tweaksをインストールする

以下のコマンドを実行してgnome-tweaksをインストールします。

$ sudo apt install gnome-tweaks

設定内容

"Window Titlebars" > "Titlebar Buttons"の"Maximize"と"Minimize"を有効にすると、ウィンドウの右上に最大化ボタンと最小化ボタンが表示されます。

Dash to Dockをインストールする

画面左側にDockを表示させるため、GNOME 拡張機能のDash to Dockをインストールします（標準Ubuntuの左側に表示されているUbuntu Dockはこれの派生版）。

以下のサイトよりDash to Dockをインストールします。
Dash to Dock - GNOME Shell Extensions

設定内容

以下の設定にすると、Ubuntu Dockの見た目に近くなります。

Position and size
- Intelligent autohide
  - Off
- Dock size limit
  - Panel mode ［パネルが全画面表示になる］
Appearance
- Shrink the dash
  - On ［アイコンの余白が狭くなる］

f:id:aki_m86:20210111182548p:plain — 設定後のデスクトップ画面

2020-11-23

【FuelPHP】 File Class

FuelPHP プログラミング

/public/assets内にあるファイルにアクセスする方法

1. 呼び出し方

以下の関数を実行すると（ブラウザからアクセスできる）ファイルのURLが返ってきます。

File::get_url(DOCROOT."assets/<dir>/<file.extension>")

DOCROOT内にあるファイル（ここでは/assets/<dir>/<file.extension>）を取得してそのファイルのURLを返します。DOCROOTは定数で、<プロジェクトルート>/publicを指しています。

例えば以下のように記述すると、assets内にある音楽ファイルをブラウザから再生することができます。

<audio controls>
    <source src="<?php echo File::get_url(DOCROOT."assets/audios/music.mp3") ?>" type="audio/mpeg">
</audio>

2. 設定ファイル

core/config/file.phpにある設定ファイルをapp/config/file.phpにコピーし、以下のように書き換えます（以下のスニペットをそのまま保存してもよい）。

<?php
return array(
    'base_config' => array(
        'basedir' => null,
        'extensions' => null,
        
        /*ここを書き換える*/
        'url' => \Config::get('base_url')."/",

        'use_locks' => null,
        'file_handlers' => array(),
    ),
    'areas' => array(),
    'magic_file' => null,
    'chmod' => array(
        'files' => 0666,
        'folders' => 0777,
    ),
);

エラー

正しく設定できていないと次のようなエラーが出てきます。

Invalid path

File::get_url()で指定したパスが正しくありません。ファイルの保存先、または関数内で指定したファイル名を確認してください。

Fuel\Core\FileAccessException [ Error ]:
Invalid path for file or directory.

LogicException

LogicException [ Error ]:
File operation now allowed: cannot create a file url without an area url.

上述の2. 設定ファイルが正しいかどうか、見直してください。

参考

Fileについて
File Intro - Classes - FuelPHP Documentation

DOCROOTなどの定数について
https://fuelphp.com/docs/general/constants.html:titile

2020-08-08

LaTexで絵文字

Linux LaTeX

必要なパッケージ

bxcoloremoji
- GitHub - zr-tex8r/BXcoloremoji: LaTeX: To use color emoji
binhex.tex
- ~~エラーが出てbinhex.texが必要だと言われました~~

私の環境ではapt install texliveで取得したtexliveはバージョンが古く(texlive 2017)、binhexをインストール *1 することができませんでした。 apt purge texlive* で古いtexliveを削除したあと、以下のドキュメントに従ってtexlive2020をインストールしたら解決しました。

Quick install - TeX Live - TeX Users Group

なお、コンパイルするときはptex2pdf -lではうまくいきませんでした。(p)latexとdvipdfmxの組み合わせではうまくいきました。

パッケージのインストールについて

パッケージを保存するためのディレクトリを作成し、パッケージ（xxx.styなど）を保存します。

mkdir -p ~/texmf/tex/latex/__PACKAGENAME__

参考

help.ubuntu.com

使い方

\usepackage{bxcoloremoji}

\begin{document}
\section{絵文字の出力}
カラー絵文字
\coloremoji{😀}
\coloremojiucs{1F603}
を出力することができる。
\end{document}

f:id:aki_m86:20200807235949p:plain — 絵文字の出力

コマンド名がちょっと長いのでこんな感じで短くしたらいいかも。

\newcommand{\emoji}{\coloremoji}

ベクタ形式で絵文字が保存されているので拡大してもきれい。

*1: 'tlmgr install kastrup' 。ちなみに、apt パッケージxzdecが必要と言われた。

2020-08-08

SublimeTextで日本語LaTeX

Linux LaTeX SublimeText

SublimeTextでTeXを編集するための手順です。

LaTeXのインストール

次のコマンドを実行してtexliveと日本語パッケージをインストールします。

bash

sudo apt install texlive
sudo apt install texlive-lang-japanese

SublimeTextの設定

まず、Package ControlからLaTeXToolsをインストールします。

次に、"Preferences > Package Settings > LaTeXTools > Settings - User" から設定ファイルの"builder_settings"を以下のように変更します。

json

// ------------------------------------------------------------------
// Build engine settings
// ------------------------------------------------------------------

    "builder": "traditional",

    "builder_path": "",

    "builder_settings" : {
        "display_log" : false,
        "osx" : {},
        "windows" : {},
        "linux" : {
            "script_commands":
                [
                    "platex",
                    "platex",
                    "dvipdfmx",
             ]
        }
    },

使い方

クラスjarticleを使ってLaTexを作成します

tex

\documentclass{jarticle}

SublimeTextでCtrl+Bを押すとTeXをPDFに変換することができます

LaTeXのフォントについて

kanji-config-updmapを使ってフォントを選択することができます。詳細はこちらのドキュメントをご覧ください。

まず、以下のコマンドを実行して現在選択されているフォント（CURRENT family）と選択可能なフォント（Standby family）を確認します。

$ kanji-config-updmap-user status

フォントを変更す場合は次のコマンドを実行します。

$ kanji-config-updmap-user FONT_NAME

2020-04-11

Kubuntuで日本語入力

Linux Kubuntu

Kubuntu 19.10（英語版）での日本語入力の設定方法です。

手順

1. Fcitxをインストール

インプットメソッドフレームワーク、fcitx*1をインストールします。

sudo apt install fcitx-mozc kde-config-fcitx

2. Fcitxを有効化

im-config -n fcitx

3. IMEの設定

一度ログアウトします。再びログインするとSystem Settings > Regional Settings にInput Methodが追加されています。この項目を選択して右側のCurrent Input MethodにMozcを追加すると日本語入力ができるようになります。

　キーボードレイアウトの切り替え

f:id:aki_m86:20200410152151p:plain — Input Methodの設定画面

Current Input Methodの右側の３つのボタンのうち一番下のボタン（画像中、赤丸で囲ったボタン）を押すとキーボードレイアウトを変更することができます。

参考

www.ubuntubuzz.com

en.wikipedia.org

*1:fcitxはもともとは中国語用として開発されたが、現在は日本語用のMozc（Google日本語入力のオープンソース版）をはじめ様々なインプットメソッドに対応していて、KDEもサポートしている。

2020-02-24

UbuntuでL2TPでVPNに接続する

UbuntuでL2TPでVPNに接続するためには追加のプラグインをインストールする必要があります。

接続方法

以下のコマンドを入力してL2TPのプラグインをインストールします。

sudo add-apt-repository ppa:nm-l2tp/network-manager-l2tp
sudo apt update
sudo apt install network-manager-l2tp network-manager-l2tp-gnome

VPNとは？

VPN(Virtual Private Network)とはプライベートネットワークをパブリックネットワーク上に拡張する技術のことです。VPNを使用することで、例えば外出先や自宅からオフィスのネットワークにアクセスすることができます。

VPNはトンネリングプロトコルによって暗号化された層を使って接続されます。L2TPはトンネリングプロトコルのひとつです。L2TP プロトコル自体は暗号化技術を提供していないので通信の機密性を確保するため、IPsecと共に使われることが多いです。

VPNを使ってセキュリティの確保されたネットワークに接続することで、セキュリティが確保されていないパブリックWiFiなどに接続しているときでも通信の機密性を確保することができます。

参考

Virtual private network - Wikipedia

Tunneling protocol - Wikipedia

Layer 2 Tunneling Protocol - Wikipedia

2020-02-10

ウェブサイトを作るときのまとめ

web プログラミング

はじめに

html, css, javascriptをイチから書いてオリジナルのウェブサイトを作る際に気をつけることをまとめています。内容は順次加筆、修正予定。

ここでの目標はできるだけシンプルにPC、スマートフォンのどちらにも対応したウェブサイトを作ることです。

スマートフォン向けのページ

画面サイズの設定

viewport

▼html

<meta name="viewport", content="width=device-width, initial-scale=1">

1pxの見た目の大きさは機種によって異なります（例えば、FHDのスマートフォンと24inchモニターでは同じ10pxでも見た目の大きさが全然違う）。

この一文でページの横幅をデバイスの横幅に設定して、ページの表示を最適化します。

スマートフォン向けのレイアウトに切り替える

▼html

<link rel="stylesheet" href="theme00.css" type="text/css">
<link rel="stylesheet" media="(max-width:600px)" href="theme_mobile.css">
<link rel="stylesheet" media="(min-width:601px)" href="theme_desktop.css">

ページサイズが600px以下のときはtheme_mobile, ページサイズが601px以上のときはtheme_desktopが適用されます（max-width: n pxは幅がnまでの意味）。 theme_commonはPC版、スマートフォン版共通のスタイルシートです。配色の設定などを書いています。 theme_desktopにはデスクトップ向け、theme_mobileにはスマートフォン向けの設定（表のサイズなど）を書いています*1。

faviconを取得

ページ全体に適用されるファビコンはHOSTNAME/favicon.icoにあります。以下の方法でページ全体に適用されるファビコンを取得して表示することができます。

①ファビコン保存先のURLを取得する

▼javascript

var url = new URL(URL);
var imageUrl = url.protocol + "//" + url.hostname + "/favicon.ico";

imageUrlにファビコンのURLが格納されます。

②ファビコンを表示する

取得したURLをimgタグのsrcにセットすると画像が表示されます。

▼javascript

$(document).ready(function() {
    $("#image").html("<img src='" + imageUrl + "' alt='favicon'>");
});

▼html

<div id="image"></div>

参考

Quick Tip: Adding a Favicon To Your Website - DWUser.com Education Center

変更履歴

日付	変更内容など
2020年2月10日	初版

参考

Responsive Web Design Basics | Web Fundamentals | Google Developers

*1:スタイルシートを別ファイルに記載しておくとメンテナンスが容易な上、同じスタイルを複数のページに適用する際に便利です。すべてのページに共通載設定、あるページ固有の設定などを分けて記載しておくと便利です。

gnome-tweaksをインストールする

設定内容

Dash to Dockをインストールする

設定内容

1. 呼び出し方

2. 設定ファイル

エラー

Invalid path

LogicException

参考

必要なパッケージ

パッケージのインストールについて

参考

使い方

コメント

LaTeXのインストール

SublimeTextの設定

使い方

LaTeXのフォントについて

手順

1. Fcitxをインストール

2. Fcitxを有効化

3. IMEの設定

キーボードレイアウトの切り替え

参考

接続方法

VPNとは？

参考

はじめに

スマートフォン向けのページ

画面サイズの設定

viewport

スマートフォン向けのレイアウトに切り替える

faviconを取得

参考

変更履歴

参考

　キーボードレイアウトの切り替え